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 (this blog)
- 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
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.
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):
/* give all pages a coloured background */
As the above section shows, comments are enclosed between /* and */ markers. Here's another example:
the following styles control
how all pages appear
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).