Your SlideShare is downloading. ×
Using Cascading Style Sheets2
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Using Cascading Style Sheets2


Published on

Published in: Technology, Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Using Cascading Style sheets In Dreamweaver CS3 Methods for establishing Consistent House Style
  • 2. Diagrammatic Representations of what they do. Consider updating loads of pages Both do a similar Job but Templates are easier to set up and use and do not involve adapting any code. CSS results in simpler and cleaner HTML code, which provides shorter browser loading times. Template or CSS Page 1 Page 2 Page 3
  • 3. About Cascading Style Sheets Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, those using screen readers). CSS gives you great flexibility and control over the exact appearance of your page.
  • 4. Cascading Style Sheets
    • Work in a similar way but use an external file rather than a Template. This then calls the style into the HTML through the addition of a line referencing it to the code or attaching a style sheet.
    • <link rel=“stylesheet” href=“style1.css”>
    • </head>
    • See Example exercise and sample code.
  • 5. Apply your formatting by using style sheets. Make sure these are in users’ folders before you start.
    • Use View , HTML to view the HTML coding.
    • Add the reference to the style sheet in the head section.
    • Save and preview.
    • Edit the style sheet as appropriate.
  • 6. Style sheet one
  • 7. Style sheet two
  • 8. Style sheet three
  • 9. Style sheet four
  • 10. New Style Sheet
  • 11.  
  • 12. Replace td and th as h1 and h2
  • 13. Change colour by clicking into each section and selecting background colour and then font-size and color for it.
  • 14.  
  • 15.  
  • 16.  
  • 17.  
  • 18. Style sheet Applied
  • 19. BasicStyleSheet Code body { font-family: Arial, Helvetica, sans-serif; background-color: #CCFFFF; } h1 { font-family: Arial, Helvetica, sans-serif; color: #0000FF; font-size: x-large; } h2 { font-family: Arial, Helvetica, sans-serif; color: #FFFF00; font-size: large; }
  • 20. Another Style sheet Applied
  • 21. AdvancedStyleSheet Code h1{color:red;font-family: Arial,Helvetioca, sans-serif;font-size: xx-large} h2{color:red;font-family: Arial,Helvetioca, sans-serif;font-size: x-large} a{text-decoration:none:font-style:italic-transform:lowercase} a:link(color:red;font-weight;bold} a:visited {color:blue} A:hover {color: green;text-transform:uppercase} a:active{color:green}
  • 22. Create a More Advanced CSS sheet
    • See