1 / 17

Cascading Style Sheets

Cascading Style Sheets. Beginning Web Site Creation: Dreamweaver CS4. 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>

mada
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related