HTML Code Tutorial

Tutor Ebook Download

Style Sheets

The use of Style Sheets can save a lot of time in the process of building HTML pages. This is the main advantage of using them since actual page attributes are determined by the visiting browser.

Also, the old inline method of assigning fonts to paragraphs and other page structures added a considerable amount of extra code to a page. Extra code means larger pages and greater bandwidth consumption.

Faster building and smaller pages make the time invested in learning to use style sheets worthwhile.

Methods

There are 3 methods of using style sheets in HTML documents. They are, linked , embedded and inline.

Linked style sheets are placed in a separate text file and accessed each time a web page is opened.

Embedded style sheets are placed in the head section of the HTML page and can over ride linked settings.

Inline style sheets are much like the old method of assigning font attributes.

They are placed in the actual lines of code and can over ride both linked and embedded style sheet settings. There are some HTML tags that require the inline method to work properly.

Style Sheet Construction

No matter what method is used, the basic structure of an individual style sheet setting is the same.

Each line of a style sheet is made up of 2 parts: selector and declaration
selector { declaration }
Selectors are placed to the left of the curly brackets and refer to the HTML tag which is to be defined by the declaration. All declarations are enclosed in curly brackets.
Selectors take the form of the html tag without its enclosing brackets.
Examples:

• <p> p{ declaration }
• <h2> h2{ declaration }
• <a href> a{ declaration }

The declaration also contains 2 parts separated by a colon which acts as an equal sign.
attribute: value
Simply put it reads attribute equals value. You can assign more than one declaration per selector. Each individual declaration is separated by a semi-colon.
selector { attribute: value; attribute: value; attribute: value }

A few attributes with values which can be set using Style Sheets are:

font-family

arial

arial black

courier

times

tahoma

verdana

Always include a generic - example: serif

font-size

xx-small

x-small

small

medium

large

x-large

xx-large

points - example: 10pt

pixels - example: 12px

font-style

normal

oblique

italic

font-weight

normal

bold

bolder

lighter

weight in numbers 100 - 900

text-alignment (text-align: )

left

right

center

justify

color

name - example: red

hexidecimal code - example: #ff0000 - Recommended

rgb - example: #f00

background-color

name - example: red

hexidecimal code - example: #ff0000 - Recommended

rgb - example: #f00

indentation (text-indent: )

set width in pixels, ems or %

padding (also: -left, -top, -top, -bottom)

set width in pixels, ems or %

An example of each setting is shown in the style sheet shown below. Notice that each individual declaration is separated by a semi-colon.

Contents

Page Structure

Text Controls

Tables

Forms

Frames

Miscellaneous

NOTE: Color can be specified by name (blue), hexidecimal code (#0000ff) or RGB code (#00f).

To keep your Style Sheets CSS2 compliant follow 2 simple rules.

1. When declaring font families, specify a minimum of 2. The last should always be a generic family.
2. When specifying color, if you specify a forecolor, you must also specify a background color even if it is white.

Generic Font Families

• serif
• sans-serif
• fantasy
• cursive
• monospace

The browser defaults to the generic choice when a declared font is not available on a surfer's machine.

Once you develop a desired look for your pages using the style tag, save it in Notepad and paste it into each document that you build. Or include the style sheet settings in your templates. This will also help to produce consistency in your pages.

Linked Style Sheets

Linked style sheets are placed in a separate text file and saved in the root directory. The file is saved with a css extension. The link to the file is placed in the head section of each document.

Code in Head Section:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
Example of lines in text file:
body {text-align :center}
p {font-family: Arial, sans-serif ;font-size : 10pt }
h2 {font-family: Arial Black, serif ;font-size : 16pt }

Inline Style Sheets

Inline style sheets will over ride both linked and embedded settings. Certain tags like the span tag work best with Inline settings. Code placement is similar to the old method.

<p STYLE="font-family: Arial, sans-serif ; font-style: normal; font-weight: normal; font-size : 10pt; text-align: left">Style settings can be set using the inline method. It should be used sparingly because of the extra amount of code it adds to the web page.</p>

<span STYLE="font-family: Arial, sans-serif ;font-size : 10pt">See Page 1</span>

Embedded Style Sheets

Embedded style sheets are placed in the head section within a set of style tags.

Example Code:

<head>
<style type="text/css">
body {text-align :center}
p{font-family: Arial, sans-serif ;font-size : 10pt }
h2 {font-family: Arial Black, serif ;font-size : 16pt }
</style>
</head>

For more information on style sheet techniques, study the source code of the documents in our free web template gallery.

You can Test Code online in this: HTML editor
Exercise
Try building paragraphs using the inline style sheet code for a paragraph shown above. Experiment with font size, style, weight and alignment.

Take a Quiz on this Information.

CGI Online
How to Create a Website -Tutorial
Create a Website - Home