|
|
Article : An Introduction to Cascading
Style Sheets (CSS)
By Elizabeth McNowley
CSS is an abbreviation of Cascading Style Sheets, a
technology or mechanism used for adding style such
as colors, spacing, and fonts to the documents on
the web. It is with the help of CSS that web
developers can design the layout and typography of a
web page. Using CSS allows you to have total control
over the style of a Hyper Text Document (HTML
document) and with the help of CSS technology you
can optimize the lay out of a webpage.
Both CSS and HTML can be used in conjunction with
each other, with HTML being easier to write and CSS
renowned for the ease in which you can change the
design and style of your html documents. Using both
together can save the average website developer a
number of hours.
CSS provides easy accessibility to a site by fully
optimizing the HTML code. Style sheets can be made
quicker to access by using abbreviations, short hand
and grouping. To a casual user of the net, a web
page might seem to be virtual and a substance
without weight. But, web designers are aware of the
weight of a website, which is made heavier by the
usage of codes. Using CSS helps to eliminate the
need for enormous amounts of HTML code and by using
simple style codes you can make the loading time of
your website a lot faster.
CSS code is placed in the HEAD tags of an HTML
document and the tag used is:
In between the style tags is where you will control
the layout of your document. To add background color
you will use the following code:
This CSS code will give your document a black
background and if you wish to change this all you
need to do is change that color code. You can also
control add what are known as elements to your CSS.
These can include how links will look in your
document. These are added in the example below:
The name of the color can also be used instead of
the code for the color. You can also choose the
color of your headings by placing them in the style
links also. For example, if you want all your H3
heading to be blue you would just put:
H3 { color:blue; }You can also assign font size,
style, and alignment. Once you have placed this once
in your style tags, it will never need to be
retyped. All the H3 headings that appear on your
webpage will be in this style, unlike HTML where you
have to format each header individually.
You can determine the font size and color of your
paragraphs using P in your style tag:
P { font-size: 12pt; color: black; text-align:center;
}As you can see by using CSS in your website design,
you can indeed save a lot of time. CSS allows you to
set a template for all the colors, fonts and spacing
properties of your documents and also reduces the
monotony of website building. And finally, it keeps
your HTML code clean. This code "cleanliness"
provides two benefits. First, it makes your HTML
available to a wider range of client devices (PDAs,
Smart phones, Speech services, etc). Second, it
allows search engine spiders to get to the real
content at your site instead of parsing through an
extraordinary amount of table based HTML structure
code.
| |
| |
|
