website security Quick Reference to HTML coding

Biega Home Page
Index to lots of useful information.

use sponsor request

CASCADING STYLE SHEETS - HOW TO USE.

CSS - A quick reference guide

CSS Cascading Style Sheets make design of web sites much easier, reduce the amount of coding required on each page. An external style sheet allows the appearance of numerous pages to be uniform and consistent without the need for repetitive coding. It is easy to change the appearance of a page and automatically apply the change to all older pages using the same style sheet.
CSS provides for a very large number of different effects and most Tutorials are complicated and confusing. This Guide provides the basic essentials to enable you to apply CSS quickly to your web pages.

Every document on the World Wide Web is written in HTML (HyperText Markup Language) using plain text code to describe the various elements of the page and to assign attributes to them, such as font style and spacing. If you are not familiar wuth the basics of HTML, please go first to HTML QUICK REFERENCE and familiarize yourself with the most important elements, such as <p> which marks the beginning of a paragraph, or <h1> which starts the heading of an article's title.

A Style sheet greatly simplifies the preparation of a new web page. It is a plain text document with the extension   .css, which contains a list of HTML elements with the properties and values to be assigned to each. The HTML element is called a Selector, to it is attached a Declaration consisting of a list of Properties (attributes) and the Values to be assigned to each of them.
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets, with a colon between the Property and the assigned Value.
For example:
h1
{
color:red;
text-align:center;
font-size:140%;
}
 Specifies that, in the web page the header h1 will always be red, centered on the page and the font size will be 140% larger than the Browser's default font size.
To save space this could be written on one line, thus:
h1    {color:red; text-align:center; font-size: 140%;}
Note that without Style sheets, every time the element h1 was used, tags would have to be typed specifying its properties, IF they were different than the default values assigned by the browser. In most Browsers the default values for h1 are color:black; alignment:left; font-size different for each Browser.
So it is clear that Style sheets allow greater, but simplified, control over the appearance of the web page.

The style sheet is usually written using a straight text editor, such as Microsoft "Notepad" (included in every Microsoft Windows operating system) or any of the available text editing programs, such as Ultraedit, or the FREE Notepad++ . Save the completed file with the extension .css in the same folder as your web page files.
The Style sheet is inserted into the HTML document within the Header, as shown in the following examples:
In this example the Style is spelled out in detail in the document itself:
<html> <head>
<title>Sample document</title>
<style type="text/css">
body {width:600px;background:#9ccff3;font-size:12pt;}
h1 {text-align:center;color:red;font-size:150%;}
p {font-size:10pt; font-family:arial,sans-serif;}
</style>
</head> <body>
<h1>SAMPLE DOCUMENT</h1>
<p>This is an example of HTML document using CSS Styles.</p>
</body></html> 		In this example there is a link to an external Style sheet:
<html> <head>
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="sample.css" media="screen"/> </head>
<body>
<h1>SAMPLE DOCUMENT</h1>
<p>This is an example of HTML document using CSS Styles.</p>
</body></html>
As long as the content of "sample.css" is the same as the detailed style on the left side, both examples will yield the following result:

Sample document

Sample document

This is an example of HTML document using CSS Styles.


It is advantageous to use external Style sheets, particularly if you prepare web pages frequently. It enables all your pages to have a uniform appearance with a minimal amount of coding.
Sometimes you want to write a paragraph, a sentence, or even a couple of words with a different font or color to provide emphasis. This is easy to do using "span style", for example:

<p span style="color:green; text-align: center; font-size:110%; font-style:italic; font-weight:bold">This is a special paragraph to <span style="background-color:violet; color:white;">wake you up</span>now!</p>		 This is the end result
Sometimes you want to write a paragraph, a sentence, or even a couple of words with a different font or color to provide emphasis. This is easy to do using "span style", for example:

This is a special paragraph to wake you up now!

NOTE: One span style nested in another; The paragraph has the usual termination </p>, the short span has the termination </span>

NOTES

Adding notes (that are not visible to the reader of your page) helps other designers to understand your write-up, and reminds you, yourself, why you did something. However, be aware that notes are written differently in Style sheets than in HTML write-up.
In HTML an explanatory note is written thus: <!--  text of note  -->.
In the Style sheet a note is written thus: /*  text of note  */.

Continue to Part 2 of the Quick Guide to CSS.

Last revision May 10, 2012.

Return to top of page.
Go to Quick Reference to HTML.