Using stylesheets | An embedded stylesheet | Page background | Font styles | Aligning text | Linked stylesheets
Inline styles are useful if you only wish to apply a style to a few elements on the page, but if you wish to apply the same style to many elements, this method can increase file size and also be very time consuming for you. CSS™ therefore can be used in the form of stylesheets.
Let us suppose we wish that all links on our page
were of the colour midnight blue and not
underlined. We could use the style attribute to apply
the styles color: midnightblue;
text-decoration: none;. Manually appending
this style to all <a> elements
would be very tiring. So instead we will use an
embedded stylesheet.
In your document's <head> section,
after the title tags, paste the following:
<style type="text/css">
<!--
-->
</style>
The style tags tell the browser that an embedded stylesheet is being used. The comment tags (<!-- -->) are also used here. Comment tags are used by web page authors to add their own comments within their source code. Anything between the two tags are ignored by the browser, i.e. they do not appear on the screen when the page has rendered.
Some older browsers do not support CSS, and therefore
do not recognise the style tags as
denoting a stylesheet, and such a browser will then
render any text between the style tags
as text and this will appear on the screen. To avoid
this, we will place all styles within the comments
tag. Older browsers will then ignore the styles,
while CSS-enabled browsers will still recognise the
text between the tags as styles.
We will use the above example of formatting links to demonstrate embedded stylesheets.
<style type="text/css">
<!--
| a |
{color: midnightblue; text-decoration: none; } |
| a:hover |
{color: deepskyblue; text-decoration: underline; } |
-->
</style>
Note that in stylesheets, all groups of styles are
enclosed within curly brackets { }.
a:hover denotes the user hovering the
mouse cursor over a link. Now that we have declared
the styles for a elements, all links on
the page will be formatted with the colour
midnightblue, and no text decoration. When the user
hovers their mouse cursor over a link, the colour
will change to deepskyblue, and the text will become
underlined.
You can use a:visited to change the
styles of links that the user has already visited.
You may wish to make it a darker/duller colour, for
example. Other styles of text-decoration are
overline and line-through.
You can use one or more of these in combination, e.g.
text-decoration: overline underline;
will cause the link to have both a line over it and a
line under it. Alternatively, you may wish that the
link remains without any decoration, but that the
background colour changes, in which you can use
a:hover {background-color: lightpink; },
which will cause the text to 'highlight'.
We have now learnt different ways to format text, but
what about formatting the actual background of a
page? As we learnt in Tutorial I, the
body element is where all the page's
content goes. So to change the appearance of the
entire background, we can apply a style to the
body element using our stylesheet.
<style type="text/css">
<!--
| body |
{background-color: violet; } color: white; |
| a |
{color: midnightblue; text-decoration: none; } |
| a:hover |
{color: deepskyblue; text-decoration: underline; } |
-->
</style>
Now the background colour of our document will be violet (note that the XHTML standard name of violet is quite different to real violet!), the font colour will be white, and links will change colour and become underlined when we hover over them.
We can also use an image as a page's background using
the background-image style.
| body |
{background-color: indianred; color: white; background-image: url(../../morrin-logo.png); } |
| a, a:visited |
{color: yellow; text-decoration: none; font-weight: bold; } |
| a:hover |
{color: red; text-decoration: none; background-color: orange; } |
-->
</style>
The background image style takes the format
background-image:
url(your image url here);
Again, you can use either absolute urls, or relative urls.
Because our background image here has a transparent background itself, we can also set the body to have a background colour, which will show through any transparent parts of your background image. In this case we have used the colour indianred. Note that this will only work if your background image has a transparent background. However, declaring a background colour is still useful, even if your image has no transparent areas, in case the background image fails to load, or if the user has disabled images in their browser.
To make the background repeat, we can use the style:
background-repeat:
with only one of the following values:
repeat, repeat-x (repeats horizontally only),
repeat-y (repeats vertically only) or no-repeat (image does not
tile).
If this value is not set, then browser will
normally default to repeat, as shown above.
We can also assign the attachment of the background using
background-attachment. We can set the value to
either scroll (causes the background
to continually repeat as the page scrolls down or across - this is the default)
or fixed (causes the page content to 'float' above the background)
We can also determine the exact position of the background image using the
background-position style. This can use preset values, such as:
background-position: bottom left;
or
background-position: center right;
This will cause the image to remain in the defined position on the page, regardless of whether the user resizes the window or scrolls up and down the page.
We can also use other values, such as em, px,
% or cm, as with font sizes.
Remember that the horizontal length from the top is the
first value, and the vertical length from the left hand side is the second value.
background-color: indianred;
color: white;
background-image: url(../../morrin-logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
This causes the image to stay exactly in the middle of the page, no
matter how much the user resizes it. (50% 50%
has the same effect as center center).
Notice how the image has stayed in the centre of the page, even when we resize the window.
If we wish to apply identical styles to multiple elements, we can separate the element names by a comma:
| a, a:visited |
{color: yellow; text-decoration: none; font-weight: bold; } |
Now all links AND visited links will have the same style. You can also set more styles for either of the individual elements in the usual way. For example, if we wanted visited links to also have a background colour, we can just add:
| a, a:visited |
{color: yellow; text-decoration: none; font-weight: bold; } |
| a:visited | {background-color: lightgray; } |
We have also used the
font-weight style above. This can be set to either: lighter,
normal, bold or bolder.
You can also scale them using values from 100-900. Most browsers cannot scale fonts
this finely, so it is best for you to use the preset values. Again, some browsers can
only render the middle two values in the list, so remember this when
designing your pages.
In addition to this, we can also use the font-style
style to make text either oblique, normal or italic.
If the browser cannot display fonts as oblique, it will default to italic.
We can align text using the style attribute
text-align. This can take one of the
following values: left,
right, center and
justify. Text on this page has been set
to justify. Also, h1 elements have been
set to text-align: center; text-decoration:
underline;. Nearly all tags can have a style
attributed to them, using the syntax:
tag name {all styles here;}
Remember, all styles must be separated by a semicolon [;]. You can include any whitespace (i.e. tabs, line breaks or spaces) between styles.
An alternative to embedding stylesheets is to create a separate CSS stylesheet (typically saved with a .css file extension) and link to it. This enables the web page author to make just one stylesheet, which can be used for a whole range of their pages. This reduces programming effort and file size. Another benefit is that if an author ever wishes to change the formatting of their page, they can modify just the one stylesheet and changes will be made across the entire site.
Instead of embedding, we will now create a file in a
simple text editor and give it a name, such as
styles.css. Place all your style
information in this document in the same way as with
embedded stylesheets, but do not include the
<style> tags, or indeed any other
XHTML content. If you wish to place a comment in your
CSS document, you can use the syntax /*
comments here */. Try viewing the
stylesheet used for this tutorial and
see how the styles have been applied.
Now in order to let the browser know that you want
your XHTML document to render using this stylesheet,
you must create a link in the
<head> section of you XHTML
document. Use the syntax:
<link rel="stylesheet" type="text/css"
href="styles.css" />
If your stylesheet is in a different directory to
your XHTML pages, use the method described in Tutorial
II to navigate to it. This will produce exactly
the same effect as using an embedded stylesheet, but
now we can reuse the same stylesheet for multiple
pages. Just remember to include the link
tag between the header tags on each page that you
want to use the styles.
You can also define styles using inline styles, even if you are linking to an external stylesheet, and likewise you can include special styles for an individual page with an embedded stylesheet, so that that page only can access those styles.
XHTML 1.0 Quick Reference v1.0 © 2005 Samira Pandor