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 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.
- What Is CSS?
- How CSS Works
- Units of Measure
- CSS-P (Position)
- Attributes
- CSS Properties
- CSS Examples
