|
|
Intro to Cascading Style Sheets
Cascading Style
Sheets are a useful way to control the various elements
of many web pages at once. Essentially they separate presentation
from content. Examples of what CSS can control are:
-
The size, colour and font
style for your text.
-
Whether or not links on your
web page are underlined, and what colour they are.
-
The colour of your page background.
To create a linked CSS, you need two documents.
One is your webpage and the other is a document saved with a .css
extension. This second document is where you specify the parameters
for the presentation of the web page.
Examples of CSS declarations:
Working CSS example:
Here is an example of a cascading
style sheet with comments explaining each
declaration:
Here is the web page the above CSS will control:
| <html>
<head>
<link rel="stylesheet" type="text/css"
href="example.css">
</head>
<body>
<h1> Welcome Students!</h1>
Welcome to my web page!
<p>
My favorite search engine is <a href="http://www.google.com/">Google</a>.
</body>
</html>
|
To see how these two documents interact:
- Copy and paste the text from the blue document
(with the CSS declarations) into a Notepad document.
- Save the document to your desktop as example.css.
Be sure to use the css extension.
- Copy and paste the text from the green document
(the html page) into a Notepad document.
- Save the document to your desktop as csstest.html.
- Go to your desktop and double click on the
csstest document. It should open in your browser. Notice how the
CSS declarations have affected the content. What happens when
you hold your mouse over the link (in Internet Explorer)?
Table of CSS properties
| Property |
What it controls |
Examples |
| font-family |
defines which font will display |
- {font-family: courier}
- {font-family: helvetica}
- {font-family: arial}
|
| font-size |
lets you control text size |
- {font-size: small}
- {font-size: x-large}
- {font-size: xx-large}
|
| font-style |
italics |
|
| font-weight |
bold |
|
| text-align |
horizontal alignment of paragraphs |
- { text-align: center }
- { text-align: left }
|
| background-color: |
background colour of your page |
- { background-color: navy }
- { background-color: teal }
|
| All colors available are: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow. |
Try changing the CSS parameters and see if they
have the desired effect on the web page above. For example,
- Left-align the heading.
- Remove the italics from the heading.
- Change the colour of the heading to purple.
- Change the body font style to Times New Roman.
Notes:
- To link a web page to your css document, you
need to insert <link rel="stylesheet" type="text/css"
href="filename"> in the HEAD section of your
web page. In place of filename, type in the name of your
CSS file.
- You must use a semi-colon to separate each
property tag (e.g. font-family: "arial"; font-weight:
medium;).
- Any local-level specifications will override
a CSS specification. For example, if you specify that one particular
heading within a web page is displayed in blue, but your CSS page
says that all headings should be in green, that one heading will
be in blue with the rest of the headings in the web page appearing
in green.
- Specifying relative rather than absolute font
sizes is safer because Mac monitors render fonts smaller than
PCs anyway.
- The hover specification is not supported in
Netscape versions below 6.
Summary table of pros and cons of using CSS
| Advantages |
Disadvantages
|
- Allows site-wide control and changes
by editing a single document.
- Speeds up time to download a web page
slightly.
- Allows more precise control over page
layout and font sizes.
- Easier to create consistency across
a whole website.
|
- Not supported by IE and Netscape browsers
before version 3 (so may cause display problems).
- Advanced CSS commands still not completely
supported by all browsers.
- Concept somewhat confusing to first-timers.
- If JavaScript is disabled, CSS won't
work in Netscape.
|
Further resources
- Webmonkey stylesheets tutorial
- Microsoft list of CSS attributes
- Effective use of style sheets by Jakob Nielsen
|
