How to create styles for HTML tags using CSS
Part one of an eight-part series of blogs

This is the second of a three-part online training series of blogs on CSS style sheets.  This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).

  1. CSS Styles for Specific HTML Tags (this blog)
  2. Block Elements (Heading, Div and Paragraph Tags)
  3. Inline Tags - Span, Em and Strong
  4. Styling Images - the IMG Tag
  5. Styles for Ordered and Unordered Lists  - ul, ol and li
  6. Hyperlinks (the A Tag)
  7. Table Styles
  8. Setting CSS for Other Tags in HTML

This blog is part of a larger online ASP.NET online tutorial series.  We also run classroom-based ASP.NET training 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.

CSS Styles for Specific HTML Tags

A previous blog has given an introduction to the theory of CSS style sheets.  This blog shows how to create styles to apply formatting for specific HTML tags, while a final blog gives a full worked example of using CSS to format a website.

To understand this blog, you should be familiar with the main tags in HTML.

The BODY Tag

Styles applied to the BODY tag will affect every page of your website, since every page is contained within a BODY section:

Example BODY tag

You can't really create an HTML page without putting it in a BODY section!

Here's a typical style for the BODY tag:

/* general styles*/

body

{

background-color: #def;

font:13px Verdana, Arial, Helvetica, sans-serif;

margin:0;

padding:0;

text-align: left;

}

What this specifies is that:

  • The background colour of the page will be #DEF (pale blue);
  • The standard font size will be 14 pixels, and the typeface will be Verdana (or the closest font your browser can find);
  • There will be no margin round the page, and no padding within it;
  • Text on the page will be left-aligned by default.

You can see more about colours in HTML and margins/padding in separate blogs.

This blog has 0 threads Add post