Class5
- 1. Class 5
- 2. Overview ofCascading Style Sheets (CSS)2Greater typography and page layout controlStyle is separate from structureStyles can be stored in a separate document and linked to from the web pagePotentially smaller documentsEasier site maintenance
- 3. CSS: Separating Structure and DesignCSS in Action:http://www.csszengarden.com
- 4. Types of Cascading Style SheetsInline StylesEmbedded StylesExternal StylesImported Styles4
- 5. Inline StylesInline StylesConfigured in the body of the Web page
- 6. Use the style attribute of an XHTML tag
- 7. Apply only to the specific element5
- 8. Inline CSSInline CSSConfigured in the body of the Web page Use the style attribute of an XHTML tagApply only to the specific elementExample: configure red color text in an <h1> element:<h1 style="color:#ff0000">Heading text is red</h1>6
- 9. Inline CSS Separate style rule declarations with ;<h1 style="color:#FF0000; background-color:#cccccc">This is displayed as a red heading with gray background</h1>7
- 10. Embedded CSSEmbedded StylesConfigured in the header section of a Web page.
- 11. Use the XHTML <style> element
- 12. Apply to the entire Web page documentCSS SyntaxStyle sheets are composed of "Rules" that describe the styling to be appliedEach Rule contains a Selector and a DeclarationDeclaration for the Selectors are contained in Curly BracesEach Declaration is ended with a semi-colon9td { color: #3399cc; }selectorpropertyvalue
- 13. Common FormattingCSS PropertiesSee Table 3.1 Common CSS Properties, including:background-color colorfont-family font-size font-stylefont-weightline-heightmargintext-aligntext-decorationwidth10
- 14. CSS Embedded StylesEmbedded style
- 15. CSS SelectorsCSS style rules can be configured for an:HTML element selectorclass selectorid selector
Editor's Notes
- #8: Show limits of inline styling of many repeated elements such as DT’s and DD’s