The Basics

What is the great thing about CSS? Selectors. The fact that you can change the appearance of ALL paragraphs, links or any other element without having to retype the code everytime you want to do so. This is made possible by selectors. Here is an example of a Selector being used to change the colour of all paragraphs(<p>) to red:



Easy, right? Although most people limit themselves to this simple kind of selector, there are so many more you can use to make your life easier. Take for example multiple selectors, like this one:



This selector will give those properties to ALL <b> and <strong> tags in the whole page. But why write the code twice? You can just replace it by something like this:



Saves time and space, doesn�t it? Now what if you want to add a link color ONLY to links that are contained within a certain element, id or class. The here is your saviour:



This will only give links the colour white which are within the #mainContent id. Of course you can replace #mainContent with whatever you like to. This also works for classes (.mainContent a) or also with other elements (blockquote a)


THE MORE ADVANCED SELECTORS

One of the more advanced selectors is the attribute selector. This works by applying a style only to elements which match a certain criteria. Example: Applying a style only to links that have a title, eg <a href=�#� title=�clicky�>. The way to do this would be



Now all the links that contain a title will displayed dark red. But lets take this a step further. Lets say you wanted to apply dark red only to links with a SPECIFIC title.



Now all the links with the title set to �clicky� would be painted dark red. Pretty Amazing, isn�t it? Next Step. What if you wan to apply a certain style to every link whose hreflang attribute was en (English). The problem: there are different versions. There is en-US, en-GB etc. So here is your rescue:



Perfect. Now all the English links are a dark red color. Lastly there is one type of selector left. The pseudo selector. You use it all the time. The most commonly used are :hover, :active and :visited, mainly used for links. But there are more. There is :first-letter, :first-line, :before and :after. You can apply them like this



This would increace the font size to 16px, which is useful for drop-caps. The same style can be applied to the :first-line of course.

The :before and :after are a bit special. They allow you to place text AFTER or BEFORE an element. For example: Behind every link, you want to show the text �Click Here!�.



You can replace :after with :before of course. You can also apply styles like color and size aswell.