Department of Mathematics

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
<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;}


The "final exam" for this course will take place at 8:00 AM on Tuesday, 12 December. This will be an ordinary 50 minute test. It will be comprehensive, but weighted toward the latter half of the semester. As always, paper notes will be permitted, but no electronic devices will be allowed.




A Solution example is available for the quiz.




Assignment A is posted.

Department of Mathematics, PO Box 643113, Neill Hall 103, Washington State University, Pullman WA 99164-3113, 509-335-3926, Contact Us
Copyright © 1996-2015 Kevin Cooper