The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value} |
selector: a string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (e.g. 'H1') or a contextual selector (e.g. 'H1 B') which consists of several simple selectors
simple selector: a selector that matches elements based on the element
type and/or attributes, and not the element's position in the document structure.
E.g., 'H1.initial' is a simple selector.
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:
body {color: black} |
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"} |
Use a semi-colon to separate each property, if more than one property are specified. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red} |
To make the style definitions more readable, you can describe one property on each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
}
|
Click C1_BasicConcept_Ex1.htm to see examples.
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. Each header element will be green:
h1,h2,h3,h4,h5,h6
{
color: green
}
|
Click C1_BasicConcept_Ex1.htm to see examples.
To increase the granularity of control over elements, a new attribute has been added to HTML: 'CLASS'. All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet.
With the class attribute you can define different styles for the same HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}
p.center {text-align: center}
|
You have to use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> |
Note: Only one class can be specified per HTML element!
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class.
Netscape does not support generic class. Internet Explorer 5.0 supports generic class.
In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align: center}
|
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> |
Click C1_BasicConcept_Ex1.htm to see examples.
HTML introduces the 'ID' attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding '#'.
Netscape does not support ID Attribute. Internet Explorer 5.0 supports ID Attribute.
The id attribute can be defined in two ways. It can be defined to match all HTML elements with a particular id, or to match only one HTML element with a particular id.
In this example the id attribute will match all HTML elements with id="intro":
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
|
In this example the id attribute will match only p elements with id="intro":
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
|
In the code below the p element has id="intro".
<p id="intro"> This paragraph will be right-aligned. </p> |
Click C1_BasicConcept_Ex1.htm to see examples.
Contextual selector: a selector that matches elements based on their
position in the document structure. A contextual selector consists of several
simple selectors. E.g., the contextual selector 'H1.initial B' consists of two
simple selectors, 'H1.initial' and 'B'.
Inheritance saves CSS designers typing. Instead of setting all style properties,
one can create defaults and then list the exceptions. To give 'EM' elements
within 'H1' a different color, one may specify:
H1 { color: blue }
|
When this style sheet is in effect, all emphasized sections within or outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to turn red and this can be specified with:
H1 EM { color: red }
|
The selector is now a search pattern on the stack of open elements, and this type of selector is referred to as a contextual selector. Contextual selectors consist of several simple selectors separated by whitespace (all selectors described up to now have been simple selectors). Only elements that match the last simple selector (in this case the 'EM' element) are addressed, and only if the search pattern matches. Contextual selectors in CSS1 look for ancestor relationships, but other relationships (e.g. parent-child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
UL LI { font-size: small }
|
Here, the first selector matches 'LI' elements with at least one 'UL' ancestor. The second selector matches a subset of the first, i.e. 'LI' elements with at least two 'UL' ancestors. The conflict is resolved by the second selector being more specific because of the longer search pattern.
Contextual selectors can look for element types, CLASS attributes, ID attributes or combinations of these:
DIV P { font: small sans-serif }
|
The first selector matches all 'P' elements that have a 'DIV' among the ancestors. The second selector matches all 'H1' elements that have an ancestor of class 'reddish'. The third selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. The fourth selector matches all 'H1' elements that have a 'DIV' ancestor with class 'sidenote'.
Several contextual selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red }
|
Which is equivalent to:
H1 B { color: red }
|
Click C1_BasicConcept_Ex1.htm to see examples.
In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn't cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process.
Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the User Agent (UA, often a web browser or web client ) under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence.
Pseudo-Class: pseudo-classes are used in CSS selectors to allow information external to the HTML source (e.g. the fact that an anchor has been visited or not) to classify elements.
Pseudo-Element: pseudo-elements are used in CSS selectors to address
typographical items (e.g. the first line of an element) rather than structural
elements.
Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:
A:link { color: red } /* unvisited link, text color red */
|
Netscape 4.7 does not support A:hover. Netscape 7.0 and Internet Explorer 5.0 supports A:hover..
All 'A' elements with an 'HREF' attribute will be put into one and only one of these groups (i.e. target anchors are not affected). UAs may choose to move an element from 'visited' to 'link' after a certain time. An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.
The formatting of an anchor pseudo-class is as if the class had been inserted manually. A UA is not required to reformat a currently displayed document due to anchor pseudo-class transitions. E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
Pseudo-class selectors do not match normal classes, and vice versa. The style rule in the example below will therefore not have any influence:
A:link { color: red }
|
In CSS1, anchor pseudo-classes have no effect on elements other than 'A'. Therefore, the element type can be omitted from the selector:
A:link { color: red }
|
The two selectors above will select the same elements in CSS1.
Pseudo-class names are case-insensitive.
Pseudo-classes can be used in contextual selectors:
A:link IMG { border: solid blue }
|
Also, pseudo-classes can be combined with normal classes:
A.external:visited { color: blue }
|
If the link in the above example has been visited, it will be rendered in blue. Note that normal class names precede pseudo-classes in the selector.
Click C1_BasicConcept_Ex1.htm to see examples.
Some common typographical effects are associated not with structural elements but rather with typographical items as formatted on the canvas. In CSS1, two such typographical items can be addressed through pseudo-elements: the first line of an element, and the first letter.
CSS1 core: UAs may ignore all rules with ':first-line' or ':first-letter' in the selector, or, alternatively, only support a subset of the properties on these pseudo-elements.
The 'first-line' pseudo-element is used to apply special styles to the first line as formatted on the canvas:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
|
On a text-based UA, this could be formatted as:
| THE FIRST LINE OF AN article in Newsweek. |
The fictional tag sequence in the above example is:
<P> <P:first-line> The first line of an </P:first-line> article in Newsweek. </P> |
The 'first-line' end tag is inserted at the end of the first line as formatted on the canvas.
The 'first-line' pseudo-element can only be attached to a block-level element.
The 'first-line' pseudo-element is similar to an inline element, but with certain restrictions. Only the following properties apply to a 'first-line' element: font properties, color and background properties , 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'clear'.
Click C1_BasicConcept_Ex1.htm to see examples.
The 'first-letter' pseudo-element is used for "initial caps" and "drop caps", which are common typographical effects. It is similar to an inline element if its 'float' property is 'none', otherwise it is similar to a floating element. These are the properties that apply to 'first-letter' pseudo-elements: font properties, color and background properties, 'text-decoration', 'vertical-align' (only if 'float' is 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'clear'.
This is how you could make a dropcap initial letter span two lines:
<HTML> |
If a text-based UA supports the 'first-letter' pseudo-element (they probably will not), the above could be formatted as:
___ |
The fictional tag sequence is:
<P> |
Note that the 'first-letter' pseudo-element tags abut the content (i.e. the initial character), while the 'first-line' pseudo-element start tag is inserted right after the start tag of the element it is attached to.
The UA defines what characters are inside the 'first-letter' element. Normally, quotes that precede the first letter should be included:
|| /\ bird in |
When the paragraph starts with other punctuation (e.g. parenthesis and ellipsis points) or other characters that are normally not considered letters (e.g. digits and mathematical symbols), 'first-letter' pseudo-elements are usually ignored.
Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, they should both be considered within the 'first-letter' pseudo-element.
The 'first-letter' pseudo-element can only be attached to a block-level element.
Click C1_BasicConcept_Ex1.htm to see examples.
In a contextual selector, pseudo-elements are only allowed at the end of the selector:
BODY P:first-letter { color: purple }
|
Pseudo-elements can be combined with classes in selectors:
P.initial:first-letter { color: red }
|
The above example would make the first letter of all 'P' elements with 'CLASS=initial' red. When combined with classes or pseudo-classes, pseudo-elements must be specified at the end of the selector. Only one pseudo-element can be specified per selector.
Click C1_BasicConcept_Ex1.htm to see examples.
Several pseudo elements can be combined:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
|
In this example, the first letter of each 'P' element would be green with a font size of 24pt. The rest of the first line (as formatted on the canvas) would be blue while the rest of the paragraph would be red. Assuming that a line break will occur before the word "ends", the fictional tag sequence is:
<P> |
Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.
If a pseudo-element breaks up a real element the necessary extra tags must be regenerated in the fictional tag sequence. For example, if a SPAN element spans over a </P:first-line> tag, a set of SPAN end and start tags must be regenerated and the fictional tag sequence becomes:
<P> |
Click C1_BasicConcept_Ex1.htm to see examples.
You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
|
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
The browser will read the style definitions from the file mystyle.css, and format the document according to it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
|
Click C1_BasicConcept_Ex1.htm to see examples.
An imported style sheet using the CSS '@import' notation
<STYLE TYPE="text/css"> |
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
|
The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
|
Click C1_BasicConcept_Ex1.htm to see examples.
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p> |
Click C1_BasicConcept_Ex1.htm to see examples.
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
|
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
|
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: red; text-align: right; font-size: 20pt |
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:
So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).
Click C1_BasicConcept_Ex1.htm to see examples.