Introduction to Cascading Style Sheets Spring 2000
CSS part 2:
Syntax:
With css, you use “rules”, which are made up of selectors, properties, and values. The property and value together are called a “declaration”
selector {property:value}
The selector is the element that will be affected. The declaration can contain several properties and values, and it specifies how the selector is to be modified.
The declarations can be grouped to save space.
H1 {color: red}H2 {color: red}can also be written as:H1, H2 {color:red}
Why are style sheets called cascading style sheets?
Cascading style sheets conform to “inheritance”, which means that modifications to a selector will be passed down in a “cascading” way. Consider the following example:
This is an H1 heading with a teletype tag within it
<H1>This is an H1 heading with a <strong>strong tag</strong>within it</H1>
This H1 heading tag has a strong tag nested within it. Because the strong tag is a child of the H1, it will take on it's parents attributes.
If I want to make the H1 tag red by adding a style to it, what do you think will happen to the strong tag?
This is an H1 heading with a teletype tag within it
The H1 is the parent element, and what is within the H1 tags is the child. The child is nested within the parent, so it will take on the characteristics of the parent.
What if the tag itself has a default style attached to it? The anchor tag will by default display a link in a different color, and underlined:This is an H1 heading with a link within it
The code looks like this:
<H1>This is an H1 heading with a <a href = “link.htm”>link</a>within it</H1>
What about adding a style tag? If I add a style to the H1 that makes the text red, what do you think will happen to the link?
This is an H1 heading with a link within it
Why is the link the color that it is?
How can I make the word “link” red?
This is an H1 heading with a link within it
How do you know what takes precedence where?
First, always check the W3c's site for the latest information, and test often on various browsers and platforms.
Reminder:settings the user has set up can override your code. Sorry, that's the way it is. They can turn off style sheets, or use their own (another good reason to make sure you use the correct tags, and good structure).
Okay, with that aside, here's how the hierarchy is set (in order of importance/weight):
inline
embedded
imported (we aren't covering this)
linked
The first CSS specification defines the cascade in this way:
Conflict resolution is based on each style rule having a weight. Bydefault, the weights of the reader's rules are less than the weights of rules in the author's documents. I.e., if there are conflicts between the style sheets ofan incoming document and the reader's personal sheets, the author's rules will be used. Both reader and author rules override the UA's default values. The imported style sheets also cascade with each other, in the order they are imported, according to the cascading rules defined below. Any rulesspecified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in thestyle sheet itself. Imported style sheets can themselves import and override other style sheets, recursively. In CSS1, all '@import' statements must occur at the start of a style sheet, before any declarations. This makes it easy to see that rules in the style sheetitself override rules in the imported style sheets.
While CSS2 defines it this way:
To find the value for an element/property combination, user agents must apply the following sorting order: 1.Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question. 2.The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. For "!important" declarations, user style sheets override author style sheets which override the default style sheet. "!important" declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it. 3.The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. 4.Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
I am listing both because even though CSS2 is the current recommended specification, many browser versions in use do not support CSS2.
Okay, at this point you know the 3 types of style sheets we will be using in class, you know what a selector, declaration, property and value is, and you know about inheritance. Next we will look at selectors in more depth.