Creating CSS cascading style sheets for HTML
Part three of a seven-part series of blogs

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.

  1. An Introduction to CSS Style Sheets
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance (this blog)
  4. Margins and Padding in CSS
  5. Measurement Units for CSS Styles
  6. Colours in CSS Style Sheets
  7. Float Styles

This blog is part of a larger online ASP.NET online tutorial series.  For training courses for businesses, see our ASP.NET training pages, or have a look at our Visual Basic or Visual C# courses.

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:

#container h1

{

display: block;

margin: 0px 0 20px 0;

padding: 0;

color: #000080;

font-size: 1.4em;

}

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

{

color:#c30;

font-weight:bold;

}

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

{

color: White;

font-weight: bold;

text-decoration:none;

}

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.

This blog has 0 threads Add post