Library tutorials & articles
Using Cascading Style Sheets (CSS)
Pseudo Classes
A pseduo class provides a means of defining properties for elements that are not available through HTML tags. For example, should you want to change the colour of a link when the mouse is moved over it, there is a hover pseudo class that may be associated with the anchor tag. The following example would set the link colour to teal if the mouse is moved over the link.
a:hover
{
color: #008080;
}
Priority of Pseudo Classes with the Anchor Tag
When specifying styles for the anchor element's psuedo classes, the order is important. When you define styles for the same elements, the styles for that element are combined. When there are conflicting styles, the latest one overrides previous definitions of the style (which is inkeeping with the cascading concept, and true for all elements). The least significant style should be written first, and the most significant style written last. With the anchor element, this would be link, visited, hover, then active. If you define a basic style for the anchor element, it should be positioned before the pseudo classes.
Correctly Ordered Pseudo Classes
a:link
{
text-decoration: none;
color: #fc0;
background: transparent;
}
a:visited
{
text-decoration: none;
color: #999;
background: transparent;
}
a:hover
{
text-decoration: underline;
color: #fc0;
background: transparent;
}
a:active
{
text-decoration: underline;
color: #603;
background: transparent;
}
The following table shows the basic CSS Pseudo classes you may use.
| Pseudo Class | Description |
|---|---|
| active | The active element in the document |
| after | Position content after an element |
| before | Position content before an element |
| focus | The element that has focus |
| first-child | The first child of an element |
| first-letter | First letter in a paragraph |
| first-line | First line in a paragraph |
| hover | Element the cursor is over |
| lang | Defines the language |
| link | Links not yet visited |
| visited | Links that have been visited |
The following example uses the first-leter and first-line pseudo classes to define a font size to start a new paragraph.
p.waffle:first-letter
{
font-size:xx-large;
}
p.waffle:first-line
{
font-size:large;
}
As an example, this paragraph has been formatted using the style outlined above. The style may either be isolated to a specific region within your HTML document, like this one, or applied to all documents. Applying the style to all of your documents ensures you have a consistent style. At a later date, should you decide to change the formatting, it's simply a case of changing one style sheet rather than editing all HTML documents containing that style. Yes I am rambling on a bit, but I wanted to make this a decent size paragraph.
Related articles
Related discussion
-
Create this kind of website
by maidentv (1 replies)
-
$200 Website Design and Development
by manypeopledesign (1 replies)
-
Dallas Interactive Marketing & Internet SEO SEM October Meetup
by dsafmx (4 replies)
-
Contract: ActionScript/FlashBuilder Developer
by mattmeigs (2 replies)
-
Can I design web site by using ASP.net
by pradeepfusion (1 replies)
Related podcasts
-
Despise the listener
We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.
Events coming up
-
Nov
23
Dan Cederholm Workshop
London, United Kingdom
Handcrafted Bulletproof CSSwith Dan Cederholm of "Simplebits"Learn how craftsmanship can apply to the intangibility of web design. Dan Cederholm will guide you though a case study, pointing out the details that matter most when designing fle...
This is a good tutorial as it covers the basics.
Nevertheless, readers should know that CSS can be taken to the extreme and should know the other side of the story in regards to fully integrated CSS.
One of the points to always remember in any technology is the K.I.S.S. principle.
Tables versus fully CSS (i.e. replacing all table tags with div tags)
http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx
This thread is for discussions of Using Cascading Style Sheets (CSS).