Review: Style sheet basics

HTML was not designed to control the form or appearance of Web pages. It defines the logical structure and function of elements on a page. The Web browser decides how those elements should actually be rendered. Tags such as <font> and attributes such as bkgrnd and align were introduced because designers wanted to control page appearance. Designers used (and still use) structural elements such as tables and lists to control layout unrelated to logical structure or function.

Style Sheets define specifications that can control the presentation of the rendered documents. They do not affect the contents of the document, only the appearance (or equivalent). With style sheets,

• structure can be separated from presentation.
• designers can collect presentation control in one central location
• users can have more control their output devices
• developers can adapt sites to diverse devices
• presentation is controlled better than with the HTML extensions do
• the HTML document must be properly structured for the style sheet to work correctly

Style Sheet capabilities

Styles let you

• specify presentation elements such as margins, spacing and indentation, colors, fonts, link styles, alignment, sizes, positions, borders, and more.
• customize documents for different media such as screen, print, aural, projection, handheld, braille, and "all". See the CSS documentation at W3C for more about media types.
• redefine how the basic HTML tags are rendered.

Incorporating styles

There are 3 basic ways to incorporate style rules into a document:

1. Inline: Specify the style as an attribute of an HTML Tag. The style only applies to the text defined by that tag.
2. Embedded: Create the styles in a <style> </style> block in the document head. The styles only applies within that document.
3. External - Linked or Imported: Create an external file that defines the style elements and is linked or imported into documents. The styles apply to the documents with which they are linked.

Cascading Style Sheets

HTML Styles are referred to as Cascading Style Sheets because they are implemented in a "cascading" order. The style definition "closest" to the element is used. Inline Style takes precedence over Embedding Style, which takes precedence over External Style. For example, if an external style sheet defines a heading 1 tag as 16pt blue and the top-of-page embedded style sheet defines it as red, the text will be displayed as 16pt red (assuming size and color can be displayed). If in addition, an inline h1 tag has a style attribute saying it is 12pt, then the displayed text will be 12pt red. (The font-family would be whatever the default is.)

Style Rules

Style rules are defned in external and embedded style sheets, in the form

selector {attribute_1: value_1a value_1b; 
          attribute_2: value_2a value_2b; 
          etc.}

External style sheets

External style sheets are simply files containing style rules. One example is the one for this class's home page.

The file can be linked into the document with a tag of the form

    <link rel="relation"     
          href="URL of file" 
          title="title for style sheet"
          media="display medium"
          type="text/css">

in the document's head section.

relation will be replaced with stylesheet or alternate stylesheet. The first will spectfy the default sheet to be used.

If more than one (non-alternate) style sheet is designated, they will be loaded in the order they appear to form a single style sheet, with later defined rules taking precedence over earlier ones.

If a document has alternate style sheets, they can be used by selecting "Page Style" from the Firefox browser's view menu. For example:

    <!-- The primary style sheet for screen display -->
    <link rel="stylesheet" title="default" 
       href="common/default_pagestyle.css" type="text/css" media="screen" />

    <!-- The alternate style sheet -->
    <!-- The word alternate (in the rel value means that it will not be used automatically -->

    <link rel="alternate stylesheet"  title="silly alternate"
       href="common/silly_pagestyle.css" type="text/css" media="screen" />

    <!-- The style sheet especially for printing -->
    <link rel="stylesheet"
       href="common/printer_pagestyle.css" type="text/css" media="print" />

With most browsers, the first style sheet will be the one used when the document is loaded. The third style sheet is used only when the document is printed.

As an example, look at the wyrd.hood.edu index page and select "Page Style" from the view menu. The default style is named "wyrd style". Choose the alternate style, named W3C. (This is one of the W3C demonstration styles, and the file is actually located on a W3C server, not on wyrd.)

As an example, Weekly Class Topicspage for this course.

Then choose "Print Preview" from the file menu.

Notice that the page is different for printing - some parts, such as the picture and the bottom menubar, are not shown. However other identifying information is shown at the bottom. Also, the font is different - a serif printer-friendly font instead of a sans-serif one that is larger and better for screen viewing.

A closer look at CSS Selectors

is called a selector. The simplest selector is simply the symbol for an element. In IT 280, we also looked at classes, which let you create categories of elements.

The selector identifies the elements to which the rule will apply. It is the first part of a CSS rule, outside the { } curly braces.

Selectors can be defined in a number of ways. We will look at just a few of them here. See the documentation(http://www.w3.org/TR/CSS2/selector.html#q2) for more a comprehensive discussion.

The simplest selector is just the symbol for an element. In the following example, the selector is the paragraph element p.

    p {
        color: black; 
        font-family: "Times New Roman", Times, Serif;    /* list of choices */
        font-size: 12pt; 
        font-style: italic
        border: solid thin #f00;    /* values for several sub-attributes in in rule */ 
       }

This rule specifies how text enclosed in the p element should be displayed. Spaces are delimiters in CSS, so multi-word terms such as "Times New Roman" must be quoted. Notice that the style specifies several alternatives for the font-family property. This is good practice because not all fonts are available on all systems. For instance, Times New Roman is a proprietary Microsoft font that may not be available on Macintosh or Unix systems.

Using the generic elements: div and span

The div and span elements, provide a generic mechanism for adding your own structure to documents.

They do not have any intrinsic structural meaning of their own, other than that

• div is a block-level element.
• span is an inline element.

Recall that a block is a complete unit of information, such as a paragraph, heading, or list, while an inline element is a group of characters within a block.

You can use div and span in conjunction with style sheets and classes to make, in effect, custom HTML elements.

Classes

    *.item {
        color: #800040; 
        font-size: 10pt; 
        font-weight: bold;
        }
    div.item {
        color: #0000ff; 
        font-size: 16px; 
        font-weight: normal;
        font-style: italic;
        }
    *.gaudy {
        color: #ff0000;
        font-size: large;
        font-family: "ITC Zapf Chancery", "Lucida Handwriting", cursive;
        }

The first rule defines a class named item (notice the asterisk (*) and the dot ( . ). The asterisk means any element can be used for the class, the dot indicates a class. (Such a pattern place holder is refered to as a wild card or glob.) The second rule will only be applied to divs with class item. The example

    <p class="item">This is a paragraph of class item.  The rule for *.item applies.</p>
    <p><span class="item">This is an inline span of text with class item </span> within 
          a paragraph.  The rule for *.item applies.</p>
    <div class="item">This is a div with class item.  The rule for div.item applies 
          to the entire div.  <span class="gaudy">This span adds some additional rules</span>  
          within the div. </div>

renders as

On the WebDev multibar CSS 2.1 reference, you can click the small tab marked "Sel" for an index of selectors.

id selectors

Elements in HTML documents can be assigned an identifying name with the id attribute. For example, <h2 id="topics>. The id is used to identify the fragment in a URL. It can also be used to single out an element for a style rule.

Note: Although you can type the same id for more than one element, you should not. To work correctly, ids should be unique - only assigned once per document. If you assign the same id value twice in the same document, the validator will report an error.

A rule with an id selector applies only to the unique element with that specific id. It is indicated by a # symbol.

    
        #foot_menu {
          width: 90%;
          border-top: dotted 3px rgb(255, 127, 127);
          text-align: center;
          }
    
        h1#first_page {
          font-size: 3em 
          }

        div#screen_only { background-image: url(../graphics/beigepaper.jpg);
        
        @media print{
            #screen_only { 
                display: none; 
                }
            }

The first rule will be applied to the element whose id is foot_menu. such as <div id="foot_menu"> or <p id="foot_menu">, or <h2 id="foot_menu"> or whichever element is identified by that id (there must be only one of them).

The second rule will be applied only to an h1 element with the id value of first_page, such as <h1 id="first_page"> ; if the id belongs to a different element the rule will not be used.

Similarly, the third rule will be applied only to a div element with the id value of screen_only.

The fourth rule will be applied to the designated element if and only if the media type is print, hiding it on the printed page but not the screen.

Parse Trees and selectors

The structure of a valid XHTML document can be represented as a tree structure. Consider the following short document.

Tree structure of a document

The following short HTML document

      <html>
        <head>
          <title>The Emmel's home page</title>
        </head>

        <body>
          <h1>The Emmel's home page</h1>

          <p>We are a multi-generation 
            <strong>family</strong>. Our names are

          <ul>
            <li>Essgy</li>
            <li>Aitchtee</li>
            <li>Exx</li>
          </ul>

        </body>
      </html>

could be diagrammed as:

      <a href=gotopage.html"><strong>My homepage</a></strong>

<body>
<h1>The <em>beginning</em> <strong>of the <em>end</em></strong></h1>
<p><strong>And so it  <em>begins </em></strong>, 
the <strong>search</strong> for better <em>style</em></p>
</body>

    h1 { color: red }
    em { color: green }
    p  { color: teal }
    p em { color: blue }

     p * em {background-color: yellow;}

     p>em {background-color: teal; color: lime}

      h1+p {color: #c9c; }
      p+p {font-size: smaller; }

    <style type="text/css">
      a:link { color: red }
      a:visited { color: green }
      a:hover { color: yellow }
      a:active { color: blue }
      li:first-child { font-weight: bold }
    </style>

    <style type="text/css">
      p:first-line { text-transform: uppercase }
      p:first-letter { font-size: 200%; font-weight: normal }
    </style>