Introduction to Style Sheets
| This page introduces the basic concepts of cascading style sheets, and provides some examples and links to further resources. |
Rules, Selectors and Declarations
Style sheets contain rules to determine how the styles shall be applied. Rules comprise- selectors
-
HTML elements are known as selectors in CSS.
The selector is the link between the HTML document and the style,
and all HTML tags are possible selectors.
There are two kinds of selectors:
- Type
- Attribute (Class or ID)
- declarations. The declaration has two parts:
-
- property (e.g. 'color') and
- value (e.g. 'blue').
selector {property: value; property: value; ...}
=============== ===============
declaration declaration
For example, to make a green paragraph:-
P { color: green }
P is the selector, and the rule has just one declaration - that
the color property of the paragraph will be green.
A property and its associated value is known as a declaration.
The combination of a declaration and a selector is known as a rule.
A style definition consists of any HTML tag
followed by a listing of properties for that tag within curly braces.
Each property is identified by the property name,
followed by a colon and the property value.
Multiple properties are separated by semicolons. For example, the following style definition assigns the <H1> tag a specific font size (15 points) and font weight (boldface):
H1 {
font-size: 15pt;
font-weight: bold
}
If the same properties are top be applied to several selectors (i.e.
HTML elements) then the selectors may be grouped thus:-
H1, H2, H3 {
font-size: 15pt;
font-weight: bold
}
Of course, you probably wouldn't want this particular rule...
The CLASS Attribute
OK, so now I can make all paragraphs green or all level 1 headings bold. But suppose I only want some paragraphs to be green, or some level 1 headings to be bold ?CLASS is a new attribute. All BODY elements can be classed, and the CLASS can be addressed in the style sheet. Classes establish grouping schemes for identifying HTML tags within a Style Sheet. Different HTML tag types can share the same Class Name value - this allows an entire class to be identified by a common label.
A CLASS attribute may be used to reference either all tags or only selective tags within the class. A period (".") is used in the selector to identify what follows as a class name. To address a specific element within the class, use the element joined to the class name by a period as selector (e.g. 'Body.Astro'). To specify ALL elements in the class, use only the class name with a leading period as a selector (e.g. '.screen'.)
Body {font-family: "garamond";
color: "#000000";
background: "#ffffcc";
}
Body.Astro
{font-family: "garamond";
color: "#ffcc33";
background: "#000000";
}
.screen {
background: #000033;
color: #66ff33;
}
In this example, documents will be rendered with black text on an
off-white background unless
CLASS = Astro is specified
inside the
BODY tag.
Turning Off Link Underlining
A commonly asked question is "How can I turn link underlining off ?" Before you do, be sure that there are other cues to let the reader know that there are clickable links there, e.g. they are in an area that is clearly a navigation menu. Here's how:
<Head> <Title>Style Sheets</Title>
<Style>
A.myMenu { text-decoration: none; }
</Style>
</Head>
<Body>
...
<a class=myMenu href="/old?u=http%3A%2F%2Fstars.com%2FAuthoring%2FStyle%2FSheets%2Findex.html&y=1999">
This is a clickable link</a>.
This is a clickable link. If you really absolutely wanted to turn off all the link underlines, then omit the .myMenu and the class=myMenu. But it's generally a good idea to start thinking in terms of 'classes' which represent logical segments of your document, e.g. menus, an abstract, information areas, etc. See The WDVL Style Sheet for examples.
Fonts and Colors
Margins
The margin-left, margin-right, and margin-top properties set the side margins and top-margin for an element. You can specify the margins in pt, in, cm, or px:
BODY { margin-left: 100px;
margin-right: 100px;
margin-top: 50px
}
Or you can combine them into one property called margin:
BODY {margin: 100px 100px 50px}
The order is top, right, and left.
If you specify a single value, it will be applied to all three margins.
Style sheets will be the best solution once browsers that support them are widely deployed. They separate presentation directives from structural markup and are explicitly designed to address the presentation issues.
<p style="margin-left: 100pt; border: ridge; background: #ffffcc"> Style sheets will be the best solution once browsers that support them are widely deployed. They separate presentation directives from structural markup and are explicitly designed to address the presentation issues. </p>Note that the above example does not separate presentation from markup, to keep the example simple; normally the style would be defined in a separate style sheet. Again, please view source for a better example.
Create Your Own HTML Tags
Well, almost. The DIV tag used with the CLASS attribute allows you to define logical containers that are almost as good as new HTML tags. For example, I want all WDVL documents to begin with an 'abstract' - i.e. a paragraph giving a quick overview of the document, like this:-<div class=Abstract> This page introduces the basic concepts of <em>cascading style sheets</em>, and provides some examples and links to further resources. </div>Here's the definition in the WDVL Style Sheet:-
Div.Abstract, P.Abstract {
background: #99cccc;
color: #333300;
border: white;
padding: 2%;
font-family: Times, Verdana;
}
CSS Layers
Web Style Sheets
The WDVL Style Sheet
Linking Styles to Documents
Cascading Style Sheets, Level 1
Cascading Style Sheets Resources
|
