Basic CSS Tutorial, part 2.
Tuesday, December 16th, 2008In my previous post I gave you the brief tutorial on CSS and promissed to go on with it. Well, as promissed, here is some usefull info on Pseudo-classes and Pseudo-elements and Cascading Order.
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are specific “classes” and “elements” that are automatically recognized by CSS-compatible browsers. Pseudo-classes distinguish among different element types. Pseudo-elements refer to sub-parts of elements, for example the first letter of a paragraph.
Rules with pseudo-classes or pseudo-elements take the form:
selector:pseudo-class { property: value }
or
selector:pseudo-element { property: value }
It’s better not specify Pseudo-classes and pseudo-elements with HTML’s CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:
selector.class:pseudo-class { property: value }
or
selector.class:pseudo-element { property: value }
Anchor Pseudo-classes
Pseudo-classes may be set to the A element to display links, visited links and active links differently. A visited link could be defined to render in a different color and even a different font size and style.
There can be an interesting effect - an “active” link displayed in a slightly larger font size with a different color. And when the page is re-selected the visited link can be displayed in a smaller font size with a different color. The sample style sheet looks like this:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
First Line Pseudo-element
The first line of text in a newspaper article is often displayed in bold lettering and all capitals. CSS1 has this capability as a pseudo-element.
You can use a first-line pseudo-element in any block-level element (such as P, H1, etc.).
An example of a first-line pseudo-element:
P:first-line {
font-variant: small-caps;
font-weight: bold }
First Letter Pseudo-element
To create drop caps and other effects use first-letter pseudo-element.
The first letter of text in an assigned selector will be reflected according to the value assigned. A first-letter pseudo-element can be used in any block-level element.
Example:
P:first-letter { font-size: 300%; float: left }
creates a drop cap three times the normal font size.
(more…)
