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 (this blog)
- CSS Style Inheritance
- 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.
The 3 Types of Style: Element, Class and Tag
Whenever you choose to add a style in Visual Studio, you have 3 types you can choose from:
The 3 types of style are:
You can use element styles to control the default appearance of HTML tags throughout a website. Here are a couple of examples of element styles:
/* controlling how all pages appear */
/* controlling how level 1 and 2 headings appear */
margin: 0px 0 20px 0;
A separate blog considers specific styles that you might set for particular HTML elements, such as headings, images, table cells and hyperlinks.
If you don't know what the BODY and H1/H2 tags mean in HTML, now's a good time to stop reading and brush up on your HTML!
The sign of an element style is that it has no prefix (as opposed to class and id styles, which are prefixed respectively with a . and a #, as shown below).
A class style is denoted by the . prefix. In the following example, you can apply formatting to any heading by settings its class:
/* used wherever a clear heading is required */
border: 1px solid #000;
margin: 10px auto 10px auto;
You could then refer to this class in your HTML:
The result will be very different from how it would have been without the class:
The heading appears in a box, with bold type.
The beauty of classes is that you can refer to them throughout your website. Don't confuse CSS classes with VB or C# classes, as these are very different things (although sadly - and confusingly - they share the same name).
Element Id Styles
These are probably the least used type of style - they work like classes, but can only be used once. In the following example, the container id is used once only, on the master page of an ASP.NET website:
Every page is based on this one, whose contents appear in a div tag with id container.
The CSS for the above container tag might look like this:
/* applies to the container of every page */
border: 1px solid Navy;
margin: 0px auto;
padding: 10px 20px;
As this example shows, all id styles start with a #. It is this class which makes all the pages in our worked example appear in a box:
The white box with a black border is set by the container id style.
Having had a look at the 3 types of style that you can use within CSS, it's time to look at the concept of style inheritance.