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)
We'll address those later.
- declarations.
The declaration has two parts:
-
- property (e.g. 'color') and
- value (e.g. 'blue').
CSS supports 35 different properties which can be applied to selectors
to determine the presentation of an HTML document.
Properties include
background (color or graphic),
font-size,
font-weight,
line-height (leading or interlinear spacing),
font-family,
letter-spacing and word-spacing.
A rule generically looks like:
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="index.html">
This is a clickable link</a>.
.
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.
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;
}
|
