background
|
|
Games
Ruffnecks Gaming Gaming for everyone
More

Tombstone
Tombstone Tuning Home of tuning, projects and fast cars and boats.
More

Tombstone
Tombstone Tuning
Home of tuning, projects and fast cars and boats.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Reference   Stylesheets Guide


Quick Reference:

HTML Cheatsheet | Special Characters | Color Codes
Browser Chart | Stylesheet Guide | Unix 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 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