Creating CSS cascading style sheets for HTML
Part one 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 (this blog)
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance
  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.

An Introduction to CSS Style Sheets

In a previous blog, I introduced the concept of the perfect ASP.NET website, and as part of this blog explained about how to create and apply style sheets in Visual Studio - so I'm going to take this as read.  This blog explains how to use style sheets.

I've included a worked example in a separate blog which you may find useful to work through, as well as a separate blog on creating styles for specific HTML tags.

Commenting Style Sheets

If you're going to be creating CSS style sheets, it will be helpful to add comments (explanatory text which will be ignored by any browser):

body

{

/* give all pages a coloured background */

background-color: #def;

}

As the above section shows, comments are enclosed between /* and */ markers.  Here's another example:

/*

the following styles control

how all pages appear

*/

body

{

background-color: #def;

}

Avoiding Embedded Styles

You can embed styles within HTML in a few different ways.  One of them is shown here:

Embedded style example

This level 2 heading font will be large and green.

 

You should avoid this approach wherever possible.  If you want a particular heading to appear in large green font as above, you should create a class or id style instead, as explained on the next page of this blog.

You should aim to avoid including any formatting at all within your HTML (web developers call it separating formatting and content).

This blog has 0 threads Add post