Attaching style to pages Contents
A D V E R T I S E M E N T
Introduction
There are three basic ways of declaring style data. The first is in the
<HEAD> of pages, the second is at tag level and the third is in a separate
external style sheet.
In each case, style sheets do not contain any HTML, just style commands. For
example:
P {color: red}
is a style statement.
External style sheets
Linked style sheetsStyle sheets are linked using the <LINK rel="stylesheet" type="text/css"
href="name.css"> tag, which must go in the header of a page.
The tag's various attributes indicate things about the style sheet - the rel
attribute, the type of link (a style sheet); the type attribute, the type of
style sheet (always text/css); and the href attribute, the location of the style
sheet.
Example
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="fluorescent.css">
</HEAD>
<BODY>
...
</BODY>
</HTML>
Once you have linked the style sheet to your page, you then have to create
the style sheet. For example:
BODY {color: black;
font-family: Geneva, Helvetica, Arial, sans-serif;
background-color: white}
If you saved the example above as a style sheet, then every page that links
to it will have the specified styles.
Linked style sheets are advantageous insofar as one style sheet can be
attached to hundreds of files. Thus they are the only way to go if you want
consistency of style, and indeed in my opinion they
are the only way to go anyway. Their only disadvantage is that if a
page is downloaded and read offline, the user is unlikely to bother to save the
style sheet. The main reason for using them is that you can attach the same
sheet to many files ensuring consistency and reducing file sizes.
Importing style sheetsSay you have standard corporate margins in corestyles.css:
BODY {margin-left: 0.5in;
margin-right: 0.3in}
However, you have different color schemes:.
@import url(corestyles.css);
BODY {color: red;
background-color: black}
The @import rule thus allows you to keep some things the same while having
others different; and follows this syntax: @import url(nameoffile.css);.
It must come at the start of the style sheet, before any rulesets (a ruleset is
something like P {color: red}).
Alternatively it can be specified as @import "nameoffile.css";,
as @import url("nameoffile.css"); or as @import
'nameoffile.css';. However, Internet Explorer only supports the url()
formats, not the " and ' formats.
There are esssentially three reasons for using @import:
- If you are writing for XML and your documents include right-to-left text
(such as Hebrew), you are responsible for setting your own bidi, and
to do this it is better to have a standard bidi style sheet:
@import url(bidi.css);
That way there is no chance of accidentally changing the bidi settings,
and you can control the bidi of many style sheets.
- You might have a standard style sheet that specifies the appearance of P
elements, Heading elements and so on for the whole of a large site, but also
areas that are specific to a small section of the site. That way, rather
than copying out the whole style sheet, you can just import it. This helps
in that it allows caching, which reduces the load on your server, and also
means that when you make a change to the style sheet you only have to change
one, rather than changing one and updating all the others.
- You can modularize your style sheets; for example, you can have a
margins module and a colors module. That way you can combine them without
redundancy. For example:
@import url(margins3.css);
@import url(fonts1.css);
@import url(colors2.css);
could be the style sheet, using the fonts sheet 1, the margins sheet 3
and the colors sheet 2.
Embedded style sheets
Embedded style sheets are enclosed in a <STYLE type="text/css">
and </STYLE> tag. They go in the header of a page:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Note the <!-- and --> tags. These are the HTML
comment tags, and are unnecessary for browsers that do support style sheets, but
are essential for those that do not to avoid the
unsightly problem of the style sheet appearing on the screen. This
affects about 4% of all browsers.
They have two benefits over linked style sheets:
- They do not affect all the rest of the style sheets that you might use
- If a document is saved and read offline, the style will be maintained -
users might not save linked style sheets.
Inline style
Any tag except the <HTML> tag itself can take the style
attribute:
<P style="color: green">
</P>
Inside the style attribute comes style declarations. In this example, the P
element is being made green.
The most important difference between inline (tag-level) style and other
styles is that by applying the style to an individual element, you have selected
the element unambiguously, and therefore inline style does not use selectors.
Thus with the example above, there is no need for a selector, whereas if you
were making the element green in a LINKed or embedded style sheet, you would
need to have P {color: green}.
In my opinion, inline style should be avoided, since it does not indicate
why you have changed the style. Thus if you gave the paragraph above a name
that indicates its content, you could easily change it. The means of doing this
is discussed in the next section.
Overview so far
The bare HTML & CSS document should look like this:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="filename.css">
</HEAD>
<BODY>
...
</BODY>
</HTML>
And the CSS document looks like this:
...
Getting started
At this stage you should be able to create your own style sheet. Most
probably you will do this by adding a <LINK rel="stylesheet" href="nameoffile.css"
type="text/css"> tag to the HEAD of your pages. Then you will creating
the file 'style.css'. Try creating one now - you should have got the idea how to
specify that something should be red or green or whatever - P {color: red} or
BODY {font-size: 16px}. When you've played around a bit, the
next section deals with how styles are specified as applying to individual
elements, etc.
|
