Cascading Style Sheets

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.

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>  </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

Cascading Style Sheets