CSS Selectors
Selectors, Classes and ID's
So far you have only used type selectors which affect every single occurrence of an element. There are in fact a few ways of selecting (targeting) which tags to effect There are 3 main methods to specify which HTML elements are styled:
Type Selectors
ID Selectors
Class Selectors
Type Selectors
This is what we have already covered where all instances of a particular element are styled such as in the example below:
Is exactly the same as
We have a problem…
If you look at the example webpage shown you to the right will see that each heading is required to be a different colour.
This means we cannot use type selectors and need to use a different method
The two uses of H1 headings are different colours…
so a Type Selector cannot be used
Classes
A CSS class selector can be used when you want to reuse characteristics across multiple elements.
These tags don’t all need to be the same as long as the property applies to them - a good example would be the color property.
There are two parts to this one is the CSS Rule itself:
The second is assigning the class inside the HTML code.
Use of a class to style two instances of an h1 element
ID Selectors
An ID selector would be used when you want specific occurrences of a tag to be treated differently from others. They can also be used for named anchors so that you can navigate to a particular section in a page. An ID will always over-rule a class or type selector (more on this later). An ID
Example ID Selector rule - ID's always start with a # Symbol
The above code makes use of ID’s and Classes. Classes are denoted with a full stop and ID’s with a # symbol
Why the Cascading part?
The term cascading is due to the fact that there can be multiple style rules affecting the presentation of HTML.
And the fact that they cascade and can affect all other pages in a site.
Inline Style
Internal Style Sheet
External Style Sheet
Browser default
Specificity
Specificity is a term used to describe how specific a CSS selector is. As a general rule of thumb the more specific a CSS selector the higher the priority.
So an External Stylesheet will get over-ridden in the following order:
Internal Style Sheet (if there is one)
Classes
ID’s
Inline Style
What about classes and ID’s
As ID’s are more specific than classes and type selectors they will have the highest priority. See the example below:
Although the selector in the CSS formatted all paragraph tags as Size 12, DarkGreen and left aligned, the class has a higher priority so has over-ruled the font to have size 10, italic and Red.
Why not just use classes all of the time?
You can use the same class again and again such as:
Think of a class as a barcode and an ID as a serial number. Every TV of the same model will have an identical barcode. But each TV has a unique serial number.
Think of an ID as a serial number.
Should only be used once
Whereas classes are like barcodes
Can be used more than once
ID’s can act as anchors within a page too…
We have discussed how ID’s are more specific than classes but if we have an ID called Contact Us such as below:
We can use a URL of #contactus as a hyperlink to automatically scroll the page down to the point in the page where the element with an ID of "contact us."