13 EECS 1550 CSS

Last updated 2015 January 7

CSS box model, style properties and validation

Cache problem

When you are developing external style sheets your latest changes may not be loaded when you reload a page. To force a reload that reloads all linked files you press the CTRL or CLOVER key while clicking on the reload button. Keyboard shortcuts: CTRL-F5 works for Chorme and Internet Explorer; CTRL-SHIFT-R (CLOVER-SHIFT_R) for Firefox, and CTRL-R (CLOVER-R) works for both Safari and Chrome.

CSS syntax

A style sheet is a collection of zero or more named style elements.
StyleSheet ::= +[ StyleElement ];

Each style element has a selector followed by its definition.
StyleElement ::= Selector Definition;

A selector can be written in three primary ways.
Selector ::= (    element -- Selects all instances of the HTML/XML element
             , .identifier -- selects all elements with the attribute class="identifier"
             , #identifier -- selects the one element with the attribute id="identifier", avoid its use
             };

A definition is zero or more property-value pairs, all written within a pair of braces. Note that property-value pairs are separated with a semicolon, ';' but it is good policy to use it as a property-pair terminator.

Definition ::= '{' +[ PropertyValuePair ';' ] '}';

A property-value pair is a property name that is defined by the world wide web consortium (W3C), followed by a colon, ':' and followed by the value of the property, the syntax of which depends upon the property being defined.

PropertyValuePair ::= PropertyName ':' PropertyValue;}

The following is an example of a style sheet

Items in blue are selectors.
Items in magenta are definitions. 

      body {
        background-color: #FFFF88;
        color: #000000; }
      
      li { margin-top: .5em; }
      
      .alignHorizontalCenter {
        width: 50%;
        margin-left: auto;
        margin-right: auto; }
      
      .academicHonesty {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5em; }
      
      .fixedFont { font-family: Georgia, "Times New Roman", serif; }
              /* Why can this be a list?
                 Why is Times New Roman in quotes? */
      
      #lastUpdated {
        font-style: italic;
        font-weight: bold;
        color: red; }
      
      #font13 { 
        font-size: 1.3em;
        font-weight: bold; }

Style sheet location

Inline style
Property-value pairs are entered as a style attribute of the element and affect only that instance of element. An example is shown in the following.

<p style="color: blue; font-size: 1.5em">Bigger font in blue</p>

     Bigger font in blue

Embedded style
A style sheet can be defined within the page it is being used. You do this only if the style elements are needed only on the one page. The style sheet elements are typed within the style element and the style element should only be written as a part of the head element, as shown in the following example. 
          <head>
            …
            <style type="text/css">
              .alignHorizontalCenter {
                width: 50%;
                margin-left: auto;
                margin-right: auto; }
          
              .academicHonesty {
                width: 50%;
                margin-left: auto;
                margin-right: auto;
                font-size: 1.5em; }
          
              body {
                background-color: #FFFF88;
                color: #000000; }
          
            </style>
          </head>

Underground Airways Example with embedded styles

External style
A style sheet can also be stored in a file with the extension css. You use this option if the style elements are going to be used on more than one page. In this case the style sheet is referenced with link element that is a part of a head element, as in the following example. 
          <head>
            …
            <link rel="stylesheet" type="text/css" href="../styleBase.css">
          </head>

Underground Airways Example with external styles

Imported style
An external style sheet can be imported into an embedded style or an external style with the @import directive

CSS semantics

The way in which the style name is written determines how the style is used.
identifer
If a style name is the name of an HTML element, then the style is applied to every instance of that element.
.identifier
If the style name is a class selector, then the style can be referenced in any HTML element. For example,
<table class=fixedFont>
You can also use class="fixedFont indent" to use two style definitions, here fixedFont and indent
#identifier
If the style is an id selector, then the style is meant to be referenced only once in only one HTML element in the page. For example,
<table id=font13> WARNING: DO NOT USE ID SELECTOR
For a discussion of why you should avoid id selectors visit
http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class

CSS comments

You can write comments in a a style sheet using the block comment characters '/*', start comment, and '*/', end comment that are used in C and Java, as in the following example. 
        … style text  /* comment text
          can span lines
          */ 
        more style text …

Cascade rules of precedence

Browser Defaults
    ---> External styles
        ---> Embedded styles
            ---> Inline styles
                --->HTML element attributes

The rules of precedence mean that the definition most local or closest to the displayed data take precedence over definitions further from the displayed data.

Cascade example — Remove style definitions close to the text and see the changes that take place.

Inheritance

Some styles are inherited from the parent element. For example, fonts, font size.

Some are not inherited. For example, margins and padding.

Inheritance is indicated by using the keyword inherit as a property value. 

        color: inherit

Use of reset.css

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

The source of this idea is here.