Math 300: Mathematical Computing

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

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.

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.