One of the many advantages of CSS is the ability to select parts of your web page based on a stylesheet, which means when adding content to a website you need not worry about how it is formatted. Headers will be the right size and font, links will be the colour specified. It is all taken care of and you don’t need a manual or reference guide on how to format a page (great for Content Management Systems!)
Advanced selectors can select specific parts of the page and alter them. For example, you can select the first letter of a new paragraph and make it big (for a drop cap) or select the all email links and format them a different way.
Some examples below.
Example 1
The stylesheet:
p:first-letter { font: 3em/.6em Impact, "Arial Black", sans-serif; float: left; padding: 8px 5px 0 0; text-shadow: #ccc 5px 5px 5px } p {font-size:1.2em;}
The website code:
<p>Drop cap paragraph without any extra markup in the HTML. This is all done with a stylesheet so users have no problem adding their own content to the website!</p>
Result:
Drop cap paragraph without any extra markup in the HTML. This is all done with a stylesheet so users have no problem adding their own content to the website!
Example 2
The stylesheet:
a[href^=mailto] { padding-left:20px; background: url(email.png) left center no-repeat; }
The website code:
<a href="mailto:shaun@springbud.co.uk">Email me</a>
Result:
Email me
There are many more selectors and they can be used to great effect! We use these techniques when building all of our websites.
You can find out more about CSS selectors at W3C
