------------------------------------------------------------------------------
MC logo
Style Sheets
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Tables Frames>>
  1. Style sheets control the appearance of an HTML page.
    1. Control colors, fonts, position, spacing, rules, outlines.
    2. Alternative to some of the attributes we've already learned.
    3. Style sheets are considered the preferable way to do this.
  2. They form a kind of language embedded within HTML.
    1. Set style parameters with a keyword: value format.
      color: red
    2. Set several by separating with a semicolon. color: red; font-size: 120%
    3. There are many variables to set. Here is the list from W3Schools.
  3. Three places to specify.
    1. In-line styles are given by a style attribute. [ Inline Styles ]
      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 ]
      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 ] [ 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. 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.
  4. Inheritance: Attributes are inherited from the enclosing tag.
    For instance, the <body> styles are generally inherited by everything in the body.
  5. Style classes. [ Style Classes ]
    1. You don't always want to apply the same style to every <p> or <h2>.
    2. You can create different style classes like this:
      p.fred { font-size: 16pt }
    3. You can refer to the class with the class attribute:
      <p class="fred">...</p>
    4. You can create general classes without just a dot:
      .barney { color: #00AA00 }
      These can be used with class on any sort of item.
    5. When the class attribute is not given, the base style is used.
  6. Colors and Fonts. [ Fonts And Colors ]
    1. Colors: color, bgcolor
    2. Font: font-family: , font-size: , font-style: , font-weight:
      1. font-family: : Specific: times, courier, ariel, or general:
        serif, sans-serif, cursive, fantasy, monospace.
    3. line-height: Set a percentage or multiplier to adjust.
  7. Box model
    1. From inside out: content, padding, border, margin.
    2. Several bazillion ways to control all of these. margin-top, margin-right, etc. padding-top, padding-right, etc. text-align, text-indent, text-transform.
    3. [ Common Style Sheet ]
    4. [ Margins ]
  8. Box Position [ Boxes ]
    1. The position attribute.
      1. Absolute: Position is from the edges of the screen.
      2. Relative: Position is from the location where the box would be without the attribute.
    2. Where: left, right, bottom, top: The location of the indicated edge of the box. Back from the outside box.
  9. List properties. [ Lists ]
    1. list-style-type: Choose a bullet, much like the type attribute, but more flexible.
    2. list-style-image: Use an image bullet.
    3. list-style-position: How the bullet or number is located.
  10. Inverted L with style sheets. [ Inverted L ] [ Joe Style ]
  11. Background image. background-image, background-position, background-repeat, background-attachment
    1. Size is important, since the image covers the size of the area.
    2. Example: [ Joe's With Handles ]
    3. Example: [ One centered handle ] Note that it is centered on the page, not in the region it is specified for.
    4. Example: [ Vertical repeat ].
    5. Example: [ Fixed ].
  12. Link colors: a:link, a:visited, a:hover, a:active. [ Links ].
  13. More Examples.
    1. Tab links: [ Smigglish ] [ Style Sheet ]
    2. [ Drop Down ]
    3. Tab example (offsite).
    4. [ z-index ]
    5. [ Fixed Menu ]
    6. [ Using + in selectors ]
  14. Server-Side Includes.
    1. The [ Zebras ].
    2. What it contains
    3. Zebra Header
<<Tables Frames>>