File Under: Cheat Sheets, CSS

Linking Stylesheets

Local (inline) stylesheet declarations, specific to a single instance on a page, can be used instead of <font> tags to specify font size, color, and typeface and to define margins, leading, etc.

<p style="font size:small; color:red; font-weight:bold; 
font-family:Arial, Helvetica, non-serif">
This is a local stylesheet declaration. 
</p> 

Global (embedded) stylesheet declarations, applicable to an entire document, are defined within the <style> and </style> tags, which precede the <body> tag in the HTML document and are usually placed in the header.

To embed a global stylesheet in your HTML document:

<html>
    <head>
    <title>Title</title>
    <style type="text/css">
    <!--
    [STYLE INFORMATION GOES HERE]
    -->

    </style>
    </head>
    <body>
    [DOCUMENT BODY GOES HERE]
    </body>
    </html>

Linked stylesheet declarations use a single stylesheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing style rules, as here:

P {font-family:non-serif; font-size:medium; color:red}
H1 {font-family:serif; font-size:x-large; color:green}
H2 {font-family:serif; font-size:large; color:blue}

To apply a .css stylesheet (“style.css” in the example below) to an HTML page, a <link> tag is added to the page header:

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

Inheritance

In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence:local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements.