BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
This is the first of a series of 3 tutorials showing how to create and use CSS style sheets for HTML web pages. This first part explains how CSS works, a second part shows how to create styles for HTML tags and a final part gives a full worked example of creating a style sheet.
- An Introduction to CSS Style Sheets
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance (this blog)
- Margins and Padding in CSS
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets
- Float Styles
Posted by Andy Brown on 16 May 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
CSS Style Inheritance
How Style Inheritance Works
The power of CSS comes from the ability to nest one type of style within another. For example, consider the following style:
margin: 0px 0 20px 0;
This states that any level 1 heading within an id container will appear in a larger font, and in blue.
Note that h1 tags which are not contained within a level 1 heading will not be affected by this style.
Multiple Levels of Inheritance
It is common to create several levels of inheritance. Consider the following style:
#container p a
This states that hyperlink elements (ie with a tags) within paragraph elements (ie those with p tags) within elements called container will appear in red and bold. Once more, note that no other hyperlink tags will be affected by this style.
Here's another example:
.gv th a
This specifies that hyperlinks within table heading cells within a class called gv will appear in white, with no underlining. No other hyperlinks will be affected by this style.