Introduction to Style Sheets

As noted in the introduction, Cascading Style Sheets comprise a language to describe how the contents of an HTML document is displayed, or “rendered.”

CSS is a very large topic, and you will appreciate a good reference, such as the ones at Mozilla or W3Schools.

Structure v. Appearance.
1. The basic function of HTML is to express the structure of a document: head, body, p, etc.
2. Some HTML tags that change appearance are really structural tags: em and strong specify the meaning (emphasis or strong emphasis) and leave display up to the browser.
3. Designers wanted more control.
  1. They prefer to use i and b, so they can control how the text should be displayed.
  2. They like attributes such as align to control position of the text.
  3. HTML sprouted more tags and attributes to control appearance.
4. Cascading style sheets were created as a better way control appearance.
5. CSS is a separate language which tells the browser how to present the HTML.
6. Key notion: Separation of structure and appearance.
  1. Style sheets control: colors, sizes, positions, font faces, styles and sizes.
  2. Some styles duplicate controls available in HTML, some are in addition.
  3. Using HTML style controls is deprecated, and new ones are not added. New styling capbilities are added just to CSS.
CSS instructions can appear in any of three places.
1. In-line styles are given by a style attribute. [ Inline Styles Source ]
  1. Most tags take a style.
  2. The <span>...</span> tag can be used for applying style to arbitrary text.
  3. The <div>...</div> tag can be used for applying style to larger sections involving multiple paragraphs or other block items.
2. Embedded style sheets. [ Embedded Styles Source ]
  1. Given in a <style>...</style> section in the header.
  2. Often enclosed in comments to prevent cows by old browsers.
  3. Uses the name of a tag to tell what the styles that tag should use: h1 { color: red }
  4. Advantages.
    1. Assign consistent styles for the whole page.
    2. Specify everything once in one place; One place to change.
    3. Can reduce page size.
3. External style sheets are linked. [ External Styles Source Style Sheet ]
  1. In the header, say
    <link rel="stylesheet" href="url" type="text/css">
    instead of a <style>...</style> section.
  2. The type is probably not needed, but safe.
  3. Alternative: <style> @import url(url) </style>
    1. The first loads the page from HTML, the second starts a section of CSS, and loads from CSS.
    2. The link can only be used from HTML, the import can be used to load one style sheet into another.
  4. Advantages:
    1. Allows the styles for a site to specified in one place.
    2. Gives site a consistent look.
    3. Allows whole site's look to be changed by changing one document.
    4. Browser will cache the sheet, so download may be reduced across the site.
4. The controlling style is the one closest to the text. In-line beats embedded, embedded beats external.
Inheritance: Most attributes are inherited from the enclosing tag.
For instance, the <body> styles are generally inherited by everything in the body.