Style Sheet Basics

Setting Style in HTML

There are three ways to specify style sheet information...

by placing <LINK REL=STYLESHEET TYPE="text/css" HREF="sheetaddress" TITLE="Sheetname"> in the <HEAD> section

by using the <STYLE> tags in the head section :

 <STYLE TYPE="text/css">  <!--
      @import url(sheetaddress) mediatype;
      H1 { color: blue }  
 --> </STYLE>
      ......... 
  <H1>This headline becomes blue</H1>

by using @import url(sheetaddress) in the STYLE section to use sheets specified in other files, as seen above. mediatype is an optional, comma seperated, list of media that the sheet supports. See the HTML guides for a list of these.
by using the STYLE attribute within HTML tags, but this should be avoided:
```
    <P STYLE="color: green">paragraph is green.</P>
```

Setting style from another file

There are three ways in which you can specify an external style sheet :

The preferred sheet : The style sheet which you would prefer people to use. Add a link of the following format to the <HEAD> section of the document :
<LINK href="stylesheetname.css" title="(your title or description)" rel="stylesheet" type="text/css2">
An Alternative : This allows people to select a format that best suits them. Add a link of the following format to the <HEAD> section of the document :
<LINK href="stylesheetname.css" title="(your title or description)" rel="alternate stylesheet" type="text/css2">
No alternatives :When you only have one available style sheet, do not specify a title :
<LINK href="stylesheetname.css" rel="stylesheet" type="text/css">

Media Dependant Defaults

You can set a different default for different types of media, by seperate <LINK href="stylesheetname.css" title="(your title or description)" rel="stylesheet" type="text/css2" media="mediatype"> links for each media type. The LINK that applies to all other media types should be placed last, without the media= attribute.

See the media page of this guide for allowable values of mediatype.

Basics of specifying CSS information

When style information is specified in the <STYLE> tags or external files, it is given in the following format :

  selector1,selector2,...,selectorn 
	{ 
	property1: value ;
	property2: value ;
	}

That is, a list of HTML elements to which the style information is to be applied, followed by a list of that information, seperated by semi colons (;) and enclosed in curly braces.

e.g. H1,H5 { color: blue}

Comments

These are denoted by the /* ... */ comments pair used in C.
e.g. H1 { color: red } /* comments go here */

Inheritance of Style Information

If one type of HTML tag has no property assigned to it, and it is contained within another tag pair which does have a value assigned to that property, then it "inherits" the value of the tag in which it is contained.

  <H1 style="color:green"> text <EM>moretext</EM> end of heading</H1>

Assuming that the <EM> has had no color specified elsewhere, "moretext" will be displayed in green, since it is within the green <H1> </H1> tags. In this way, you can set defaults by assigning them to the BODY element.

Some values can be given as a percentage of what the inherited value would be. e.g. P { line-height: 120% }. It is important to remember that elements that inherit this value will inherit the numerical value, not the specified percentage.

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.