CSS Fundamentals

CSS allows formatting to be separated from structure and content. This provides numerous advantages, including re-usability and easier maintenance.

Applying CSS

CSS may be applied in four ways.

<h1 style="color: white; background-color: black;">

<style type="text/css"> 
        body { color: white; background-color: black; }
        </style>
        

<link rel="stylesheet" href="name.css" type="text/css">

CSS Rules

CSS rules have two parts: the selector and declaration. The selector indicates what is being formatted, while the declaration indicates the property being set and the value being assigned.

CSS Selectors

In general, there are four CSS selectors.

HTML

<a href="http://www.utm.edu">UTMartin</a>
        
        <ul>
            <li><a href="file1.html">File One</a></li>
            <li><a href="file2.html">File Two</a></li>
            <li><a href="file3.html">File Three</a></li>        
        </ul>
        
        

CSS


        ul li {a color: red;}
        

The CSS Cascade

Formatting is applied in a specific sequence, much like mathematical operations are performed in a specific sequence. In CSS, the cascade follows this order:

browser defaults -> external styles -> embedded styles -> inline styles -> HTML attributes

However, be aware of the sequence in which you apply styles. CSS files are parsed and applied from the top down. This means a CSS element applied at the bottom of a CSS file will override the same CSS element listed at the top of the file (in reality there's no reason to include something twice but accidents happen).

For example, the following CSS snippet will result in a BLUE background color, simply because blue is the last color specified.

body {background-color: green;}
        
        other CSS elements
        
        body {background-color: blue;}