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.

• Inline: This is applied inline with the HTML.

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

• Embedded: This is created within the head of the HTML body and can be reused on this page.

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

• External: External CSS stylesheets consist of a separate .css file containing all the CSS code. A link to the stylesheet must be placed in the head of each HTML document.

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

• Imported: This approach imports CSS styles from elsewhere. This is slower and not recommended.

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 Element: Applying CSS to an HTML element will impact ALL such HTML elements in the HTML document.

• Class Selector: A CSS class is used to assign styles to a specific portion of the HTML document. Essentially we are creating a named set of styles. In the CSS, a class name begins with a period, like so: .classname. To use this in HTML, we would indicate the class <h1 class="classname">.

• ID Selector: An ID selector works much like a class selector; however, an ID selector can only be used once per HTML page. This allows us to assign and reference unique names. In CSS, an id is coded beginning with a hashtag #idname. In HTML, refer to the id <h1 id="idname">.

• Descendant Selector or Contextual Selector: This selector is used to specify an element within the context of a container. For example, if I created an unordered list of hyperlinks, I could then format all hyperlinks within an unordered list by using a descendant selector. In the following example, the first hyperlink will be unaffected by the CSS, while the hyperlinks contained within the unordered list will be affected.

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;}