CSS topics

Last updated 2017 January 15

CSS box model, style properties and validation

Use the W3C CSS validator to validate your CSS files by URL, by file upload or by direct input.
Here is a description of the box model for HTML elements. It is the fundamental model used to style HTML elements.
Here is a CSS reference listing all the style properties.
Here is a CSS selector reference listing of selector patterns. Use the style editor for prototyping — see Class 2 detail.
Here is the low down on Assigning property values, cascading and inheritance.
Here is the SitePoint CSS reference and the SitePoint box model reference

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 Chrome 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 in the HTML file and see the background change color from yellow to blue, and the first paragraph change color from blue to yellow.

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

!important directive

When you add the !important directive as the last value for a property, that instance of the property overrides any conflicts with other styles. For example in the following the heading will be black — the h1 style overrides more specific styles such as .wrapper h1, and h1.main.

        h1 {color: black !important; }

WARNING: Try to avoid using important

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.

Property value units

Use w3schools to learn about units that are used.

Colour — hexadecimal, rgb, rgba, hsl, hsla, colour names
Length — ems, px (pixels), other
Fonts — families, weights, size, style