HTML 4 Kids: Lesson Week 11

Cascading Style Sheets

Use HTML to create the structure for your web page; use CSS to format your web page. That means, use the H1 - H6 tags to create an outline of your topic, not to control the size of your text. Use CSS to control the appearance of text.

Here is a partial list of CSS properties you can use.

3 Methods to Apply CSS Styles
  • inline style
  • style block
  • external style sheet

The "cascade" refers to the priority of the different ways to issue style commands. When more than one method is used, the closer the style command is to the text, the more importance it has.

The Cascade
  1. inline style
  2. style block
  3. external style sheet

The Inline Style

The style command applies to that instance of the tag. Note the punctuation.

<p STYLE="text-indent:10pt;font-size:10pt;font-family: Arial" >

The Block Style

The style command applies to that HTML document. The following example would be placed in the head section. Note the punctuation.

<p STYLE type="text/css">
<!-- 

BODY	{margin-top:0px;
	padding-top: 0px;
	background-color:#5efb6e;
	color:#f63817;}
H2 	{background:#4cc552;
	font:14pt Arial;
	font-weight:bold;
	text-indent:.25in;
	color:#f63817;}
P	{text-indent:10pt;
	font-size:10pt;
	font-family: Arial}
-->
</style>

The External Style Sheet

This method uses a separate document for the style codes. The style codes document contains only style codes, and no other tags. It is saved as type Text and given the extension CSS. A linking statement is included in HTML document to link the style sheet document to it. A group of HTML pages can all link to the same style sheet document. This makes it quick and easy to control the text formatting of an entire web site.

The Style Sheet File: somename.css

BODY	{margin-top:0px;
	padding-top: 0px;
	background-color:#5efb6e;
	color:#f63817;}
H2 	{background:#4cc552;
	font:14pt Arial;
	font-weight:bold;
	text-indent:.25in;
	color:#f63817;}
P	{text-indent:10pt;
	font-size:10pt;
	font-family: Arial}

The Linking Statement to somename.css:

<LINK REL=stylesheet HREF="somename.css" TYPE="text/css">
 
Place this link in the head.


Return