Getting Started with Style Sheets

• CSS rules
  • Purpose of rules
    • Style sheets provide the browser program with instructions on how to represent each element of an HTML file. This is done through a list of rules pairing up HTML elements and appearance attributes.
    • Even if no style sheet is provided, each browser is in fact using a default set of rules to format HTML files it displays (this is why, for instance, H1 headings appear more prominent than H2 headings). Any formatting issues not explicitly handled by style sheets will be resolved by these default rules.
  • Rules are made up of selectors and declarations
    • A selector indicates which part(s) of an HTML file will be affected by the declaration, which in turn contains the formatting instructions. Selector and declaration are separated by white space (any number of spaces, tabs, returns), and the declaration is enclosed in {} (curly brackets).
  • Different selector types provide increasingly detailed control
    • The most straightforward type of selector is simply the name of an HTML tag. This approach requires no changes to the HTML file itself--it simply changes how tagged content will be rendered by the browser. The following sample rule would cause type in an EM container element to turn red:
      EM { color: red }
  • Each declaration is made up of a property and one or more values
    • Property and value(s) are separated by a : (colon).
    • The property is one of approximately 50 aspects of web page formatting included in the CSS Level 1 Recommendation, which also lists acceptable values.
    • Multiple values are separated by white space (any number of spaces, tabs, returns). In the following example two values of the font property, type style and typeface family, are set:
      EM { font: italic sans-serif }
  • Measurement values can be expressed in absolute or relative units
    • Absolute measurements are fixed in size and may not adjust appropriately to varying display conditions. In the following example, the left margin is always 10 pixels regardless of window size:
      EM { margin-left: 10px }
    • Relative measurements automatically reflect some changes in the display environment. In the following example, the left margin is twice the current type size:
      EM { margin-left: 2em }
  • Multiple selectors can be condensed in one rule
    • The selectors appear in a comma-separated list. The following example:
      H1, H2 {font-weight: bold}
      is equivalent to:
      H1 {font-weight: bold}
      H2 {font-weight: bold}
  • One rule can comprise multiple declarations
    • Each declaration must be terminated by a ; (semicolon). The following example:
      H1 {font-weight: bold; color: maroon;}
      is equivalent to:
      H1 {font-weight: bold}
      H1 {color: maroon}
  • Subsequent rules override previous conflicting rules
    • A conflicting rule is one that defines the same property of the same selector in a different way. The following example:
      H1 {font-weight: bold; color: maroon;}
      H1 {color: fuchsia}
      results in fuchsia-colored, bold H1 headings.
  • Child elements inherit appropriate rules from their parents
    • Children-parent relationships are established through the containment hierarchy of HTML elements. Rules set up for the child override conflicting parent rules. The following example:
      BODY {font-family: serif; color: purple;}
      H1 {font-family: sans-serif}
      results in purple-colored H1 headings set in a sans-serif typeface.

• Attaching style sheets to HTML files
  • Style sheet files
    • A style sheet can be set up as a separate plain text file. The filename should end with the extension .css.
  • Linking a style sheet file
    • The LINK element is empty, and should appear within the HEAD container.
      <LINK REL=STYLESHEET TYPE="text/css" HREF="sample.css" TITLE="Sample Sheet">
  • STYLE tag
    • This can be used to define a stylesheet within an HTML file. The STYLE element is a container (containing the styles sheet's rules), and should appear within the HEAD container. The STYLE tag takes a TYPE parameter with value "text/css"
    • To accommodate older browser programs, the content of the STYLE element can be enclosed in comment tags:
      <STYLE TYPE="text/css"><!--
      BODY { color: olive }
      --></STYLE>
  • Importing a style sheet file
    • Done as part of the content of a STYLE element:
      <STYLE TYPE="text/css"><!--
      @import url(IMPORTED.CSS);
      --></STYLE>
  • STYLE parameter
    • Attaches style sheet rules directly to an HTML element:
      <H3 STYLE="{ color: teal }">This heading is teal-colored</H3>