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.

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:

Element Styles

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 */

body

{

background-color: #def;

}

/* controlling how level 1 and 2 headings appear */

h1

{

display: block;

margin: 0px 0 20px 0;

padding: 0;

color: #000080;

font-size: 1.4em;

}

h2

{

display: block;

margin-top: 10px;

padding: 0;

color: #000080;

font-size: 1.2em;

}

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).

Class Styles

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 */

.heading

{

background-color: Navy;

border: 1px solid #000;

text-align: center;

font-size: 1em;

font-weight: bold;

color: #fff;

width: 200px;

margin: 10px auto 10px auto;

padding: 5px;

}

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:

#container

{

/* applies to the container of every page */

width: 320px;

border: 1px solid Navy;

overflow:hidden;

margin: 0px auto;

padding: 10px 20px;

background-color: #fff;

text-align: left;

}

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.