Basics of Cascading Style Sheets
CSS style files are very simple to create and understand.
They comprise only a list of descriptive commands, always in the form
attribute: value;
Observe that the attribute and value are always separated by a colon, and
that every line of a style must end with a semicolon. It is barely worth
noting that the last line of a style specification can omit the colon,
but you may as well get in the habit of ending every line with the
semicolon. These descriptions may be applied to HTML elements, e.g. to
change the format of an <h1> tag, to a collection of HTML
elements grouped as a class, to elements
of a certain division of a document, or to elements only in
certain situations. We'll describe these individually.
To create a style file, all you need to do is open a new
file in your favorite editor. You type descriptive statements
for the style of your document as discussed below, and save the file
using a .css extension: e.g. mystyle.css.
To get an HTML file to use your CSS file, you would insert a
link tag into the header: e.g.
<link rel='stylesheet' type='text/css' href='http://my.server.com/mydirectory/mystyle.css'>
HTML Elements
We can change the appearance of any text associated with an HTML element such as a heading or paragraph simply by specifying a style for that element. For example, to change <h1> and <h2> so that such headings always appear centered and in a red text, we could use the following specification.
h1, h2 {
color: red;
text-align: center;
}
The line breaks and spacing are only for readability. No spaces or
new lines are actually required.
Note that you can set the format for multiple tags by listing them
separated by commas. The actual style specification is always
enclosed by braces.
CSS Classes
Sometimes we want to apply a style to many disparate HTML elements, or to only HTML elements in certain situations. One way to do this is to use classes to specify the format. For example, we could define a class to make a paragraph appear with a smaller font than normal, and to be indented using the following specification.
p.smallindent{
font-size: smaller;
text-indent: 2em;
}
Once that style is defined, we can apply it to any paragraph
in our document by specifying the paragraph tag as
<p class='smallindent'>
Alternatively, if we wanted to apply the attributes to more than just paragraphs, we could make the definition more generic.
.smallindent{
font-size: smaller;
text-indent: 2em;
}
In this case, any HTML tag can use the class attributes. For example,
we could apply them to a definition term using
<dl> <dd>The Term</dd> <dt class='smallindent'>The definition</dt></dl>
IDs
There is another way to restrict the effect of style specifications. This is through ID labels. ID specifications work in practice similarly to classes. The only immediate differences are that ID labels use the pound sign (#) in place of the period used to denote a class. The chief difference in these approaches is that classes allow us to specify style attributes for actual HTML elements: headings, paragraphs, spans, and so on. By contrast, IDs pertain to containers, and the attributes we set for IDs will apply to HTML elements contained in the divisions, tables, sections and such identified by those IDs. To emphasize this, the attributes set in a class apply only to those HTML elements directly identified as being in that class; the attributes applied to an ID can apply to HTML elements inside the container so identified. However, as a general practice, classes are preferred for elements that will be used multiple times, while IDs are supposed to be used just once within a document.
In particular, one can use <div> tags with ID labels to delineate a structural section of a document with uniform presentation properties. In this way a paragraph from the "main" document section can be formatted differently from a paragraph in the "secondary" section. For example, consider the following.
#main p{
font-size: smaller;
color: red;
}
#secondary {
font-size: x-small;
color: blue;
}
The first ID specification causes any paragraph within a "main"
division to be formatted in a smaller, red font, while any element of
any kind in a "secondary" division would be displayed
in an extra small green font. In the document these might be used
as
<div id="main"> <p>This text is in the main part of the document</p> </div> <div id="secondary"> <p>This is in the secondary part of the document.</p> </div>
Pseudoclasses
Certain elements in HTML change their behavior based on the state of the browser. The principal example of this is the anchor tag. Typically the text associated with an anchor tag is blue until you click the link. Once the page the anchor tag points to has been visited, the link changes color, typically to purple. Thus, the anchor tag itself did not change, but its state within the browser session changed from normal to visited.
We can control the appearance of such stateful elements using CSS pseudoclasses. Using these we can specify colors for anchor tags in their unvisited, visited, or active states. The CSS specification below would color anchor tags blue normally, green after their href has been visited, and yellow when the mouse hovers over the link text.
:link{color:blue;}
:visited{color:green;}
:hover{color:yellow;}
