Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
First posted :
03/19/2008
Times viewed :
8664
CSS Introduction
A CSS (Cascading Style Sheet) can be used to apply a style to HTML elements.
CSS (Cascading Style Sheets) is a W3C Recommendation. Stylesheets are
attached to documents and they describe how the document is displayed or
printed. For example a CSS stylesheet can be attached to an HTML document
and when that HTML document is displayed in a browser, the descriptions (bold,
italic, border) contained in the CSS stylesheet are applied to the HTML
document. In this way, one CSS file can control the look and feel of an
entire website (if it is included into all the pages on the website).
This can be very useful if you want the design of a website to be defined
from one file. For example you can define the default font for your complete
website to be in “Verdana” – or you could define how the table border
should look whether it will be normal, dashed or anything else. You can even
create a border around some text, which usually doesn’t have a border.
Using a CSS file
There are two ways to use CSS in HTML files:
Using CSS in a single HTML file
Storing CSS information in a central file which is included in all the
HTML files
Using CSS in a single HTML file
If your CSS information is stored in each HTML file, to change the look and
feel of the whole website means changing the CSS information contained in all of
those files. In a website of 1,000 pages you will be changing all 1,000
pages. To insert a link to the CSS information into any HTML file, you
simply place the CSS information
inside the <HEAD></HEAD> section of the HTML page:
<head>
<style type="text/css">
Font
{
font-family: verdana;
}
</head>
Storing CSS information in a central file which is included in all the HTML
files
There is an easier way to change the look and feel of a 1,000 page
website. Rather than store the CSS information in each file individually
and then change it in all the files, just store the CSS information in one file
(the CSS file) and include that file into all the pages. By storing your CSS information outside of your HTML
files is that when you change the external CSS file, then the changes occur
everywhere the CSS file is included.
To include a link to an external CSS file, you place the link inside the
<HEAD></HEAD> section of the HTML page:
Here is a sample file that could be included into all the HTML files:
Font
{
font-family: verdana;
}
If you decide to place you style sheet in an external file, then this file
has usually a .CSS extension. This file can be then linked to each HTML page via
the <link> tag.
This CSS reference will teach you exactly how you can apply such styles to
HTML elements. You will see each property in detail along with an example and a
screenshot. All examples can be also downloaded for your personal tests. To
understand the CSS properties I assume that you have a basic knowledge of HTML.
Basic Syntax
Here are some quick rules to follow if you work with style sheets.
However they are very simple and can be memorized quickly. You can apply the
style directly to a HTML element, which is also called a selector. For
more information please look through our online reference.
Selector Example
In this example “Font” is the selector. This will apply the style to all
fonts.
Font
{
font-family: verdana;
}
Class Example
If you want that the style to be applied only to specific font elements, then
you can make use of the attribute “class”. In this example the class
.Header is defined and then used.
A Pseudo class is a specific class, which is used to define the behavior of
HTML elements. For example the pseudo classes link, visited, active, left,
right, first etc. can be used to change the style. A Pseudo element can be used
to define the sub-parts of an element. For example, you can define the style of
the first-letter of a sentence or you can use the before element to define an
image which looks starts a quotation and in combination you could use the after
element which closes the quotation. Please see the appropriate section to see
how these classes and elements can be used.
