Cascading Style Sheets Web Page Design CSS
Types of Style Sheets External Style Sheet External style sheets are linked to HTML documents from external text files. Internal (Embedded) Style Sheet Internal or Embedded style sheets are <style> elements within the html page. In Line Style Sheet In Line style sheets are element attributes. The paragraph tag inserts a blank line between each line of text, the line break tag does not.
External Style Sheets Separate text file Contains no html code File extension for external style sheet is .css Example: body { color: #339999; background-color: #FFFFCC; font-family: Arial, sans-serif; } h1 { text-align: center;
Linking the external CSS Example <html> <head><title>Linking External CSS</title> <link rel="stylesheet" type="text/css" href="my_style.css" /> </head> <body> <!-- page content goes here --> </body> </html>
Internal (Embedded) Style Sheet Example <html> <head><title>Embedded Style Sheet</title> <style type="text/css"> body { color: #339999; background-color: #FFFFCC; font-family: Arial, sans-serif; } h1 { text-align: center; </style></head> <body> <!– Text Goes Here --> </body> </html>
In Line Style Sheet To design a specific element during development. Example – <html> <head><title>In Line CSS</title></head> <body> <p style=“font-style: italic; font-weight: bold; font-family; Arial, sans-serif;”>A paragraph with italics, bold, Arial style.</p> </body> </html>
Multiple Style Sheets (Cascading) Cascading Order (when using more than one style sheet) Inline Style Internal (Embedded) Style Sheet External Style Sheet
CSS Properties and Values Visit…. http://www.w3schools.com/css/css_reference.asp