Download
cascading style sheets n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets PowerPoint Presentation
Download Presentation
Cascading Style Sheets

Cascading Style Sheets

176 Views Download Presentation
Download Presentation

Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheets Web Page Design CSS

  2. 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.

  3. 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; }

  4. 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>

  5. 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>

  6. 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>

  7. Multiple Style Sheets (Cascading) • Cascading Order (when using more than one style sheet) • Inline Style • Internal (Embedded) Style Sheet • External Style Sheet

  8. CSS Properties and Values Visit…. http://www.w3schools.com/css/css_reference.asp