CSS tutorial
Cascading stylesheets, or CSS for short, were not part of the early browsers. But although they came a few years later, the improvements they offered to web design brought their use widespread relatively quickly (once browser support finally became nearly universal). Today, no respectable web designer creates a web site without using stylesheets.
One major advantage CSS provides is allowing consistent styling across the website. There is no need to repeat styling by copying and pasting. Simply assign a “class” to an element, and define the look of that element in the stylesheet. Any element can then reuse the same style.
You may have noticed in the HTML tutorial the attribute on the span tag that read class="spanExample". The name “spanExample” was chosen for this tutorial, but it could well have been “myBoldText” or “superAwesomeFont” - the name doesn't matter as long as it matches up with a class in the css file.
The name then becomes what is called a “selector”; but a class name is only one type of selector. We will example 4 common types of selectors, but all style definition follows this basic structure:
selector {
property: value;
}
For a complete list of selectors, visit the W3C site.
|
Line #
|
Paste the contents of this column into style.css and save
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
html {
background-color: #1E77AE;
}
body {
margin: 30px;
padding: 20px;
background-color: white;
}
.spanExample {
font-weight: bold;
}
#lnkAdeo {
color: red;
}
#lnkAdeo:hover {
background-color: #C3D4DF;
}
|
-
Lines 1 & 4 are examples of “type selectors” where all tags of this type have that style. Since there is only one html & one body tag per document, there is no need to name it.
In this example, we add a little padding around and inside the body and set the page’s background color to white. We also changed the font name for the whole document. -
Line 10 is an example of a “class selector” (prefixed with a dot) where we gave an element a class, and then defined the style for the class. In this case we simply made the text bold.
-
Line 13 is an example of an “ID selector” (prefixed with a number sign) where we gave an element an identifier and defined the style for elements with that ID. An ID is usually assigned only for JavaScript which is beyond the scope of this document.
-
Line 16 is an example of a “dynamic pseudo-class selector” where the style changes according to a certain user action. In this example, the style changes when the user mouses over a link with ID “lnkAdeo”.
Not only are there more selectors, but there are many more properties beyond basic colors and spacing that we examined here briefly. W3schools has a more complete list of CSS properties.