Webmonkey | Reference: Stylesheets Guide

Reference Stylesheets Guide

Local, Global, and Linked 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>
</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.

- What Is CSS?
- How CSS Works
- Units of Measure
- CSS-P (Position)
- Attributes
- CSS Properties
- CSS Examples