- Dedicated trainers
- Maximum 6 per class
- Superb courseware
Phone (01457) 858877 or email
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.
- An Introduction to CSS Style Sheets (this article)
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance
- Margins and Padding in CSS
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets
- 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.
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:
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).
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.
- An Introduction to CSS Style Sheets (this article)
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance
- Margins and Padding in CSS
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets
- 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.
Comments on this blog
This blog currently has no comments.