Style Sheet Basics

Setting Style in HTML

There are four ways to specify style sheet information. For more information, see the HTML guides...

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);
      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.

by using the STYLE attribute within HTML tags:

    <P STYLE="color: green">paragraph is green.</P>

Basics of specifying CSS information

When style information is specified in the <STYLE> tags, 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 2001-2008, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.