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, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.