Class5

702 views
640 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
702
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Show limits of inline styling of many repeated elements such as DT’s and DD’s
  • Class5

    1. 1. Class 5<br />
    2. 2. Overview ofCascading Style Sheets (CSS)<br />2<br />Greater typography and page layout control<br />Style is separate from structure<br />Styles can be stored in a separate document and linked to from the web page<br />Potentially smaller documents<br />Easier site maintenance<br />
    3. 3. CSS: Separating Structure and Design<br />CSS in Action:<br />http://www.csszengarden.com<br />
    4. 4. Types of Cascading Style Sheets<br />Inline Styles<br />Embedded Styles<br />External Styles<br />Imported Styles<br />4<br />
    5. 5. Inline Styles<br />Inline Styles<br /><ul><li>Configured in the body of the Web page
    6. 6. Use the style attribute of an XHTML tag
    7. 7. Apply only to the specific element</li></ul>5<br />
    8. 8. Inline CSS<br />Inline CSS<br />Configured in the body of the Web page <br />Use the style attribute of an XHTML tag<br />Apply only to the specific element<br />Example: configure red color text in an <h1> element:<br /><h1 style="color:#ff0000">Heading text is red</h1><br />6<br />
    9. 9. Inline CSS <br />Separate style rule declarations with ;<br /><h1 style="color:#FF0000; background-color:#cccccc">This is displayed as a red heading with gray background</h1><br />7<br />
    10. 10. Embedded CSS<br />Embedded Styles<br /><ul><li>Configured in the header section of a Web page.
    11. 11. Use the XHTML <style> element
    12. 12. Apply to the entire Web page document</li></li></ul><li>CSS Syntax<br />Style sheets are composed of "Rules" that describe the styling to be applied<br />Each Rule contains a Selector and a Declaration<br />Declaration for the Selectors are contained in Curly Braces<br />Each Declaration is ended with a semi-colon<br />9<br />td { color: #3399cc; }<br />selector<br />property<br />value<br />
    13. 13. Common FormattingCSS Properties<br />See Table 3.1 Common CSS Properties, including:<br />background-color <br />color<br />font-family <br />font-size <br />font-style<br />font-weight<br />line-height<br />margin<br />text-align<br />text-decoration<br />width<br />10<br />
    14. 14. CSS Embedded Styles<br />Embedded style<br />
    15. 15. CSS Selectors<br />CSS style rules can be configured for an:<br />HTML element selector<br />class selector<br />id selector<br />

    ×