Cascading Style Sheets - PowerPoint PPT Presentation

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

play fullscreen
1 / 17
Cascading Style Sheets
105 Views
Download Presentation
mada
Download Presentation

Cascading Style Sheets

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

  1. Cascading Style Sheets Beginning Web Site Creation: Dreamweaver CS4

  2. What’s the difference? XHTML CSS • Describes the structure • Content <p> </p> • Collection of styles • Formatting body { background-color: #006; margin-left: 100px; margin-right: 100px; } <body> <h1><a href="index.html">Dreamweaver CS4</a></h1> <p>&nbsp; </p> <h4><a href="Dreamweaver Winter2010 Syllabus.pdf">Syllabus</a> <p>Thanks to everyone who made our first festival a great success! Keep checking back. We are working on the new site and should have it posted soon!</p> </body> </html>

  3. How powerful is this?? • Look @ http://www.csszengarden.com/

  4. Cascading Style Sheets • Style sheets come in three types: • Inline • Part of the tag<h1 style=“color: #6887c”> • Inside text<strong>HELP!</strong> • Embedded • In the <head> tag • Just for this page • Linked (or External) • On a separate sheet • Controls all the pages linked to it. Preferred!

  5. Preferred? Why? • Format your site consistently • Redefine existing tags • Create styles for commonly used elements • Navbars • Headlines • Define styles that align and position elements – divs (divisions) • Make global changes

  6. Cascading? The term Cascading, refers to which element takes precedence when it comes to styling a page, a line, or any other element on the page. Generally, the closer the better • Class wins over • Internal wins over • External

  7. How does it work? • CSS Rule: • h1 {color: #6887c;} Declaration block Selector

  8. Selectors

  9. RedefineExisting tags • Type/Tag selectors • Style all the tags on a Web consistently • (h1, h2, body . . . ) • Found in or are part of the HTML code • There are two types of CSS tags • Class • ID

  10. Or, Create your own -- Class • Class selectors • Can be used many times on a page • Formats selected things • Naming • Starts with a . • No spaces • No other punctuation • CSS Example: .sidebarLeft • HTML Example: <p class=“sidebarLeft”> </p>

  11. Create your own -- ID • ID selectors • Identify specific items (#navbar, #footer) • Should be unique to the page • Can only be used once • Naming • Starts with a # • Case sensitive • No spaces • CSS Example: #footer • HTML Example: <p ID=“footer”> </p>

  12. How does CSS Code work? • h1 {color: #6887c} Selector

  13. How does it work? Declaration Block • h1 {color: #6887c} Property

  14. How does it work? Declaration Block • h1 {color: #6887c} Value

  15. More • h1 { font-family: Arial, Helvetica, sans-serif; font-size: x-large; font-weight: bold; text-align: left;} • #navbar { font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; text-align: center; vertical-align: bottom; height: 20px;}

  16. Attributes • Type • Font family, size, color, decoration, weight • Background • Color, image • Block • Spacing, alignment, indents • Box • Placement of elements on a page • Border • Weight, color, line styles of the selection box

  17. Attributes • List • Ordered, unordered • Positioning • Extensions • Page breaks