Tonight's Agenda: Introducing CSS 
First, Quiz 3
The whole XHTML ball of wax, in 20 minutes
Location, Location, Location
Style rules can be specified in three different locations:
- as an attribute of an XHTML element
- as an XHTML element within the
<head>element - as an external "style sheet" applied through a
<link>element within within the<head>element or imported through a different statement (see below)
Let's look at the basic structure for writing style rules in each location and then discuss the ways these three possibilities work together as part of a larger strategy to specify the look of your Web pages.
Style as an Attribute of an XHTML Element
Style rules can be written as an attribute of pretty much any XHTML element. So, for example, I could decide that a paragraph in my document should have red text:
Here's my bright red paragraph.
And here's the code for my bright red paragraph.
<p style="color: red;">Here's my bright red paragraph.</p>
The rule about the color of the text will be applied to that one paragraph and to no others. It is, therefore, an extremely specific rule. We'll come back to specificity and why it matters when we discuss the "cascading" properties of style sheets.
Rules written as attributes of a specific XHMTL element have two parts: the
property and the value. In the example of the
bright red paragraph above, the property is color
and the value is red. The attribute is, of course,
style and like all other attributes, it is followed by an equal sign ( = ) and a
value enclosed in quotation marks ( " ). So, when you write rules in this way, the rule itself is a value for the style attribute.
Style as an XHTML Element
You can create rules for an entire page by inserting a <style> element. It belongs inside the <head>, where other information important to the browser's ability to interpret your mark-up is also located. Here's what it would look like if I wanted every paragraph on my page to be displayed in red!
<style>
p {
color: red;
}
</style>
Rules written within a <style> element have three parts:
- a selector
- one or more properties
- a value for each property
A selector is generally an XHTML element, including lists, list items, paragraphs, headings, tables, table rows, table cells, and so on.
When you write rules inside a <style> element,
the rule's properties and values are written
inside curly brackets. You do not use equal signs or quotation marks.
The rule always ends with a semi-colon. So, the selector is specified,
then the open bracket -- { -- followed by the property and value.
The property and value are separated by a colon. The rule ends with a
semi-colon. And at the very end, you need to close the brackets with this: }.
Any rule written in this way applies to every instance in the document, unless it is superceded by a more specific rule.
External Style Sheets
Often style sheets are separate documents linked to the files they are to govern. The rationale here is simple.
Say I have a Web site with 20 or 25 pages. One of them is the "home page," four of them are
"landing pages" for the main subtopics, and the remainder (15-20 pages) have the bulk of the site's content.
I want all the content pages to use the same style rules, and all of the landing pages for the subtopics to use another style sheet.
If I put a <style> element on each of those pages and then want to change the look of,
say, the <h3> elements on all of them, I have to revise the code on every one of the 15-20 pages.
If I simply link each one of those content pages to a single style sheet, however, I can make all my
changes in one place and ensure that the changes will be reflected in the presentation of all of the pages.
To create a separate style sheet that you will link to your pages, you simply write a file with all the rules you need. You do not use a <style> element on that page. Just the selectors and the rules you want. You name the file something like pbds660_style.css and store it in its proper place. For the purposes of this course, you will need to store your style pages in a directory you will create and name "styles."
Here's what the contents of a style sheet as a separate document might look like:
body
{
font-face: Arial;
}
h1
{
background: #339966; padding: 5px;
}
h3
{
color: #993399;
}
Note that you can use more than one property-value pair with each selector. In my example above, the rule for the h1 selector
specifies the background color (in hexadecimal code -- a topic we'll cover another day) and also the amount of "padding" around the text (when we study the
box model, we'll learn more about padding).
To link your style sheet to specific pages, you write a <link> element within the <head> element of your document, like this:
<link rel="Stylesheet" href="../styles/pbds660_styles.css" type="text/css" />
Note the attributes the <link> element requires: rel, href, and type.
Alternately, the following syntax placed within the <head> element will "import" a stylesheet:
<style type="text/css" media="screen">
@import url("../styles/pbds660_styles.css");
</style>
So what's the difference between linking and importing? None, really, except that older browsers probably won't recognize the importing way of doing things. And sometimes, that's fine.
Inheritance: Flowing Down Stream
Remember the Document Object Model (DOM) and the idea that some XHTML elements
(such as <li>) are children or descendents of other elements? Just as human children inherit features from
their parents, code children inherit features also. For example, every <p> is a descendent of the <body>
element. So any style rule you apply to the body will be inherited by all the elements that are descendents of the body -- unless of course you write another rule, a different rule,
for the child.
Here's another example. Let's say I write a rule that says that all text belonging to the <p> element should be displayed in red. And then I use
the <em> element for some part of that paragraph. The emphasized text will be italicized (probably) since that is
the "built-in" style rule for the <em> element. The text will also be red because the <em> element inherited
the color property from its parent, the <p> element. Unless otherwise specified, the text within the <em> element will inherit
several properties from the <p> including font, weight, and color.
Specificity and Cascades: Swimming Against the Tide
The "cascade" in the name refers to the way style sheets handle conflicting rules. Here's what CSS guru Eric Meyer has to say about cascading in CSS: The Definitive Guide:
CSS ... makes provision for conflicting rules; these provisions are collectively referred to as the cascade. For example, take the ... scenario in which you import a single style sheet into several web pages. Now inject a set of pages that share many of the same styles, but also include specialized rules that apply only to them. You can create another style sheet that is imported into those pages, in addition to the already existing style sheet, or you could just place the special styles into the pages that need them.
For example, on one page out of ... 700, you might want headings to be yellow on dark blue instead of white on gray. In that single document, then, you could insert this rule:
h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}Thanks to the cascade, this rule will override the imported rule....
The rules on specificity determine how to interpret mark-up when more than one rule is applied.
According to Elizabeth Castro (HTML, XHTML & CSS, sixth edition),
"The law of specificity states that the more specific the selector, the stronger the rule.
So if one rule states that all <h1> elements should
be blue but a second rule states that all <h1> elements with a class of Spanish
be red, the second rule will override the first for all
those <h1> elements whose class is Spanish." (See below for what a class is, what an id is, and how to use them.)
You can find the precise rules governing specificity in Section 6.4.3 of the CSS specifications: http://www.w3.org/TR/CSS21/cascade.html#specificity.
And to make things just a little more complicated, location also matters. Thus, rules that appear later have more weight than ones that appear earlier in the whole shebang. And what does "later" mean in this context? It refers to the order in which the browser interprets the mark-up. An external style sheet comes first, the internal one next, and styles embedded within an instance of an element on a page come last. So, the last shall be first! Or at least strongest. If the external style sheet says "red," and the internal style rules say "green," but the local rule says "blue," blue wins.
Here's how Castro sums it all up:
In summary, in the absence of a rule, many styles are inherited from parent element to child. With two competing rules, the more specific the rule, the more weight or importance it has -- regardless of its location. With two rules of equal specificity, the one that appears later wins.
Let's Get Classy
You can give pretty much any XHTML element a class attribute. Once you have designated something as belonging to a particular class, you can
write style rules for the whole class all at once. An element designated by a particular class is then a more specific instance of that element.
For example, on the course pages I write every week, there are links in the right-hand navigation bar sporting a green background. So I want all of those links to display in white so they'll be easier to see. If I create a rule for all anchor tags and specify that the color of linked text shall always be white, I will find that my linked text in the main content areas will completely disappear from view! After all the background color of the main part of the page is white, and white on white works well only for damask table cloths.
What to do?
Write all the anchor tags in the navigation area with a class designation like this:
<a href="someURL.html" class="navLinks">
In my style sheet, I then write a rule for the specific class of links like this:
a:link.navLinks {color: white;}
Note the structure of the rule above. The anchor selector has an extra bit in it (its aspect) because the anchor has three states: unvisited (aka link), visited, and active (when the cursor is over the linked text and the user has depressed the mouse button but not yet released it -- a very ephemeral state in most cases). The aspect of the anchor is then followed by a period ( . ) and then by the name of the class to which the rule is to apply, in this case "navLinks." As with the "name" attribute we worked with a couple of weeks ago, the class name is case sensitive. You have to be sure to spell and capitalize it the same way each time you use it in your HTML document and when you write rules for it in your style sheet.
Fun with Spans
The <span> element is a very handy little tool for styling chunks of text at the phrase or inline level. Strictly speaking, it kind of
violates the principle that all HTML should be structural indicators. Spans really aren't. But we can't get along without them. Generally, they are used
to create special classes of phrases, perhaps book titles you want to "call out" in some specific way. So they are usually coupled with a class attribute.
Announcements and Coming Attractions
Make sure you get the third assignment, a Word document you need to begin working with this week and through spring break.
Also, please note that we will be meeting in BC 015 on March 26, NOT in our regular lab. I've put the same information on our syllabus page. If you know people who aren't in class tonight, please let them know. I'll post it on the blog just before the end of spring break.
Have a great week off: don't worry, be happy.