CSS is an acronym for Cascading Style Sheet. A style sheet is made up of rules that tell a browser how to present a document to the user. Some older browsers don’t understand CSS very well, but most of the newer browsers handle CSS increasingly well.
In this tutorial i will attempt to explain a few CSS concepts to you, please read on.
Why use CSS?
CSS allows us to declare rules that tell the browser how we want our document to look to users. We can make certain HTML tags look a certain way.
Say we want anything contained within a <font> tag to look a certain way, we can use CSS to tell the browser what font to use, what size, what colour, whether we want it underlined, and on and on.
So rather than typing:
<font size="5" color="red" face="Tahoma">text</font>
Every single time, we can tell the browser to make anything in a font tag, red, and in tahoma text, it saves alot of typing, it makes things so much easier.
CSS isn’t limited to this, we can use it for positioning elements, background colours, to help make our tables look more attractive, to make our links more attractive, the list goes on, there are a few ways we can implement CSS, firstly let me introduce you to the style attribute.
The style attribute
HTML has a special style attribute we can use to change the look of anything contained within a tag.
<font style="font-family: tahoma;">text here</font>
Take note of font-family. This is a CSS command that tells the browser which font “face” to use. There are many more, the style tag has the format:
<tag style="rule1: value1; rule2: value2; rule3: value3;">
The rule name and its value are separated by a colon (:), and each rule is separated by a semi-colin (;). Simple enough.
This is a very crude way of implementing CSS, but its very handy in certain circumstances. Now that you have the style attribute in mind, let’s go on to learn how we can tell CSS to handle tags in a certain way.
The Style Tag
The style tag is a tag we can put inside the head tag in our HTML document. If you don’t know basic HTML now is a good idea to learn it.
<html>
<head>
<title>CSS Example</title>
<style>
<!--
body {
background-color: #EEEEEE;
}
font {
font-size: 9pt;
font-family: Arial;
text-decoration: underline;
color: #000000;
}
//-->
</style>
</head>
<body>
</body>
</html>
Look at the above, take note of the commands between the <style> and </style> tags. This is the style sheet for that page. Allow me to go through and explain this to you.
<style>
Open the style tag.
<!--
Add an opening comment tag, the CSS commands will be contained within a comment tag, that way, browsers that cannot understand CSS with think it is a comment and it will not show on the page. Browsers that don’t understand CSS will actually show the CSS commands to the user, this is not what we want, so we comment it out.
body {
background-color: #EEEEEE;
}
Now this is the CSS, the body part declares that anything inside the body tag will follow these rules. background-color: #000000; is the CSS command for setting the background colour of a tag, there are many of these commands and you must learn them, #000000 is the hexadecimal colour code for black, so we have set the background colour of the whole document to black.
font {
font-size: 9pt;
font-family: Arial;
text-decoration: underline;
color: #000000;
}
Now we set the rules for the font tag:
font-size: 9pt;
Set the font size to 9pt. pt is a unit of font size in CSS.
font-family: Arial;
Set the font family to arial.
text-decoration: underline;
Decorate the text, make it underlined.
color: #000000;
Set the colour of any text within a font tag to black.
We define the tag we want to set rules for, and then we open the curly brackets, we set out the rules for that tag, when we are done we close the curly braces. We can set rules for as many tags as we want to. So now our document’s background colour is set, and our font tag has rules.
<font>This text follows our rules</font>
Classes
But maybe we don’t want everyting in a font tag to look the same, maybe we want a few different types of font for our page. We can define classes for this.
.class1 {
font-size: 10pt;
color: blue;
font-family: arial;
font-weight: bold;
}
.class2 {
font-size: 9pt;
color: black;
font-family: verdana;
font-weight: light;
}
We have defined two classes. A class “selector” is preceded by a full stop (period) and then the name of the class. We can now use this class in conjunction with a tag and everything within that tag will follow the rules of its class.
<font class="class1">Class 1</font> <font class="class2">Class 2</font>
We could also do:
font.class1 {
css rules
}
To limit the class so we can only use it within a font tag.
Very easy, and it saves us from having to specify how we want our text to look over and over.
CSS gets alot deeper than this, this method is inefficient in some ways, say we have many documents using CSS and we wanted to alter them, we would have to go through each document in turn and edit the CSS, we can make a .css file and include this in the head tag of our document, aditing this CSS file will change the rules on every page it is included in, go onto the next chapter to read about this.
CSS Files
To make a CSS file we simply make a file with a .css extension. For example: style.css or stylesheet.css. The name is irrelevant, just be sure to use a CSS extension so you knwo what the file is.
Within the file we no longer need to use the <style> tag, we just write out our CSS rules and save it.
h1 {
font-size: 14pt;
color: black;
font-family: tahoma;
font-weight: bold;
}
.class1 {
font-size: 10pt;
color: blue;
font-family: arial;
font-weight: bold;
}
.class2 {
font-size: 9pt;
color: black;
font-family: verdana;
font-weight: light;
}
There we have a few CSS rules, save them and copy them into a file, name the file style.css. We can then include this file into our document, there are a couple of methods of doing this.
The link tag
We can include a CSS file into a HTML document like so:
<link rel="stylesheet" href="style.css" type="text/css">
The rel attribute tells the browser we are including a style sheet, the href attribute tells the browser the name of the CSS file and the type attribute tells the browser the file contains text-written CSS commands. Include this in the head tag of your document and the CSS rules will take effect.
Import
We can use the @import rule to include style sheets in a html document:
<style> @import "style.css"; </style>
or:
<style>
@import url("style.css");
</style>
We can also use @import within a css file. So that we can include already-written CSS rules into another CSS file, very handy.
Now that we know the basics of CSS and how it works, let’s have a look at some practical examples.
CSS and Links
We can use CSS to make hyper links look alot nicer, we can define how we want them to look normally, how we want visited links to look, how we want active links to look, and the one everyone likes, how we want links to behave when the user’s mouse rolls over them.
a:link {
font-size: 9pt;
color: red;
text-decoration: none;
}
a:visited {
font-size: 9pt;
color: blue;
text-decoration: none;
}
a:active {
font-size: 9pt;
color: red;
text-decoration: none;
}
a:hover {
font-size: 9pt;
color: red;
text-decoration: underline;
}
Firstly we define a rule for the @a tag, the size and colour, and @text-decoration: none; makes it so the link is not underlined. The we use a:visited, a:active and a:hover to define rules for the a tag when the link is active, when it has been visited, and when the mouse is hovering over it.
We can use this to make our links look alot better, we can define many different rules for our links, we have have as many as we want by using classes.
a.one:link {
font-size: 9pt;
color: red;
text-decoration: none;
}
a.one:visited {
font-size: 9pt;
color: blue;
text-decoration: none;
}
a.one:active {
font-size: 9pt;
color: red;
text-decoration: none;
}
a.one:hover {
font-size: 9pt;
color: red;
text-decoration: underline;
}
a.two:link {
font-size: 9pt;
color: red;
text-decoration: none;
}
a.two:visited {
font-size: 9pt;
color: blue;
text-decoration: none;
}
a.two:active {
font-size: 9pt;
color: red;
text-decoration: none;
}
a.two:hover {
font-size: 9pt;
color: red;
text-decoration: underline;
}
I’m sure you can see what’s going on there, we define classes that are limited to the a tag, and use visited, active and hover to define rules for the links in each of those states. Now we can use our link rules like so.
<a class="one" href="http://whatever">click here</a> and for class two <a class="two" href="http://whatever">click here</a>
CSS allows us to make our page much more attractive for the user, and as most popular browsers have a relatively good understanding of CSS, it’s safe to use without fear of people not seeing it.
Now that we have a basic idea of CSS and how it’s implemented, let’s get more techinical, next we look at selectors and properties.
Selectors
We have already used selectors, but there are various types of selectors, let’s take a look at them.
p {
font-size: 9pt;
}
In this CSS statement p is the selector, we can have different classes of selectors, allowing the same tag to have different rukes.
p.one {
font-size: 9pt;
}
Where p is the HTML tag being given rules, and one is the selector class, we can apply this class to a tag like so:
<p class="one">
And a class can be declared without any associated tag:
.one {
font-size: 9pt;
}
Where class one can be used with any tag.
ID Selectors
We can use a different kind of selector, an ID selector, these have the format:
#small_font {
font-size: 8pt;
}
ID selectors aren’t applied to an element with the class attribute, we use the id attribute.
<font id="small_font">
Remember, in order for your document to be valid HTML you can only assign the same id attribute once, as it is used to give that element a specific id, due to this limitation ID selectors should be used sparingly.
Contextual Selectors
We can also define selectors that only work in a specific combination of elements.
p strong {
background-color: red;
}
Now this would only apply the rules to a <strong> tag contained within a paragraph.
<p>This would be unaffected, yet <strong>this would be affected.</strong></p>
This is contextual, it will only work on a strong tag within a paragraph tag, if the strong tag isn’t within a paragraph, it won’t be affected.
Grouping
We can also assign the same rules to many different tags.
p, font, h5, strong {
background-color: blue;
}
We separate the selectors with commas, this forces the rules upon all tags in the grouped selector.
Comments
We can add comments into our CSS code.
/* This is a comment */
Anything between /* and */ is a comment and will not be counted as CSS data, we use comments to help others read our code and understand it.
Pseudo Classes and Elements
Remember the last chapter on links? With those links we were using pseudo classes.
a:link {
properties
}
a:visited {
properties
}
a:active {
properties
}
a:hover {
properties
}
Here we are using the psuedo classes link, visited, active and hover. These allow us to control the rules applied to a style when it is in different states, how a visited link looks, hwo an active one looks, how one looks when the user rolls their mouse over it. These are named pseudo classes.
There are also pseudo elements.
p:first-letter {
font-size: 11pt;
}
This pseudo element is first-letter. By using this we can set a rule for how the first letter, and only the first letter contained between an opening and closing paragraph element will look. There is also first_line. These are used to visual fancies.
Properties
The property is the actual CSS rules that are contained within the selector.
p.big_first_letter:first-letter {
background-color: yellow; /* This is the property */
}
There are many properties and the number will continue to grow as CSS develops, i will provide you with links, rather than listing all the properties myself, i will direct you to pages that already have the information written, continue onto the next chapter.
Bibliography
This short tutorial was designed to get you started using CSS, CSS continues to grow, and with CSS2 well on it’s way i’ll soon have to write a CSS2-specific tutorial, but as most browsers’ understanding remains limited, i’ll leave it for a while.
Here are a few links to help you get deeper into CSS.
- Comprehensive list of the CSS properties
- Glish
- Style Sheet Reference Guide
- Validate your CSS
- CSS page layouts for you to use
- Nicely done CSS site, maybe he’ll help you if you ask nicely
