Basic Syntax
Style sheet syntax is simple, and is made up of three parts: a selector, a
property and a value.
selector {property: value}
The selector is normally the element or tag you wish to define, the property
is the attribute you wish to change, and each property takes a value. The
property and value are separated by a colon and contained in curly braces. If
you wish to specify more than one property than you should separate each one by
a semi-colon. The example below shows how you would define level 1 headings to
be shown centered and coloured blue.
H1 {text-align: center; color: blue}
The W3C Cascading
Style Sheets Level 1 (CSS1) Specification and CSS2 Specification formally define the properties and values available. A full list
of properties with examples may also be found in the Properties section.
An important note from experience of using style sheets is
that you must use the closing tags for all situations. This means that
if you start a paragraph using <P> you must end it using </P> . Remember to apply this to tags such as list items <LI> </LI> , table cells <TD> </TD> and any other elements where
previously it has not been required to close the tag.
Linking style sheets to HTML
Style sheet methods can be applied at three different levels:
- Linked. This means you create a single style sheet that each page of your web
site links to, thus creating a consistent look to your entire site.
- Embedded. This means you include the style sheet at the beginning of a specific
web page. This will define the look of a single page.
- Inline. This allows you to apply styles to a section or group of tags on a
page.
You can create an external style sheet for your entire website, or for a
group of related pages on your website. Each web page must link to the style
sheet using the <LINK> element. The <LINK> element must always be placed within the <HEAD> of your document, as follows:
<HEAD>
<TITLE>Style sheet
example</TITLE>
<LINK REL="stylesheet" HREF="styles/mystyles.css" TYPE="text/css">
</HEAD>
The above example links to a style sheet file called mystyles.css in a directory called styles.
The style sheet can be written in any text editor. The file should not
contain any HTML tags like <HEAD> or <STYLE> and must be of the form:
selector {property: value}
Your style sheet should be saved with a .css extension. An
example of an entire style sheet file is shown below:
/* Example style sheet file (note how this comment was created) */
BODY {background: #FFFFD8;
margin-top: 20}
A:link {color: #400080;
background: #FFFFD8}
H1 {font-weight: bold;
text-align: center;
color: #006000;
background: #FFFFD8;
font-family: 'Gill Sans', Arial, sans-serif}
CITE {font-family: 'Gill Sans', Arial, sans-serif;
font-style: italic}
An linked style sheet is ideal when the style is applied to numerous pages.
With a linked style sheet, an author could change the look of an entire site by
simply changing one file. Additionally, most browsers will cache a linked style
sheet, thus avoiding a delay in page presentation once the style sheet is
cached.
Contextual Selectors
Contextual selectors are merely strings of two or more simple selectors
separated by a space. These selectors can be assigned normal properties and, due
to the
rules of cascading order, they will take precedence over simple selectors.
For example, the contextual selector in:
P STRONG { background: yellow }
is P STRONG . This rule says that strongly emphasized text within
a paragraph should have a yellow background; strong text in a heading would be
unaffected.
Grouping
In order to decrease repetitious statements within style sheets, grouping of
selectors and declarations is allowed. For example, all of the headings in a
document could be given identical declarations through a grouping separated by
commas, thus:
H1, H2, H3, H4, H5, H6 {color: red;
font-family: sans-serif }
The above example would make all headings in the document coloured red and in
a sans-serif font (if the browser supports it).
The implication of embedding a style sheet into a web page is that only a
single web page will benefit from the styles you specify. If the web page also links to a
style sheet, the embedded styles will take precedence in the case where two
tags are defined differently (see The Cascade). Embedded styles are placed in
the <HEAD> of your web page, surrounded by <STYLE> </STYLE> tags. The example shows
how the previously linked stylesheet (see above)
could be embedded into a web page:
<HEAD>
<TITLE>Style sheet example</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: #FFFFD8;
margin-top: 20}
A:link {color: #400080;
background: #FFFFD8}
H1 {font-weight: bold;
text-align: center;
color: #006000;
background: #FFFFD8;
font-family: 'Gill Sans', Arial, sans-serif}
CITE {font-family: 'Gill Sans', Arial, sans-serif;
font-style: italic}
-->
</STYLE>
</HEAD>
Note the comment tags <!-- --> surrounding the
stylesheet attributes. These ensure that the attributes remain hidden from
browsers not supporting style sheets.
An embedded style sheet should be used when a single document has a unique
style. If the same style sheet is used in multiple documents, then an external
style sheet would be more appropriate.
Styles may be applied inline to any element in the <BODY> using the STYLE attribute in the relevant element tag. The STYLE attribute can contain any number of CSS properties. The
following example demonstrates how to change the colour of a paragraph inline.
Notice how the embolded word also retains the style properties defined for the
paragraph.
<P STYLE="background-color:#F6F6FA;
color:#860BA8">
Cor blimey, <B
STYLE="font-size:120%">Guvnor</B> you don't get many of them to the
pound!</P>
Cor blimey, Guvnor you don't get many of them to the
pound!
Inlining styles loses many of the advantages of style sheets by mixing
content with presentation. This method should be used sparingly, such as when a
style is to be applied to a single occurrence of an element. |