Hi there, Sohil!
I have a lot of experience of CSS and have nearly completed the study
of CSS Level 2 Specification from the World Wide Web Consortium [
http://www.w3.org/TR/REC-CSS2/ ].
I'll explain this by using lots of examples so you can understand how
it works.
So what is "CSS"?
==================
According to the document linked to above, CSS "... is a style sheet
language that allows authors and users to attach style (e.g., fonts,
spacing, and aural cues) to structured documents (e.g., HTML documents
and XML applications) ..."
Basically, this means that CSS is a set of commands included in the
page that tell the browser how to display any part of the HTML markup
such as heading in green, or a link without the underline.
In CSS, you would write the above as this:
- a green <h1> heading:
h1 { color: green; }
- and for the links with no underline or other "text decoration":
a { text-decoration: none; }
Now, whenever you use a <h1> tag in the HTML then it will be a green
colour any links will have no underline.
You can save lots of time by using CSS to format a document.
The language is very easy to learn if you have a small amount of HTML
experience and typically follows the same syntax:
HTML TAG { PROPERTY: VALUE; }
For example, this would make the background of a HTML page have a blue
colour with links that have underlines only when the mouse is hovered
over them:
body { background: blue; }
a { text-decoration: none;}
a:hover { text-decoration: underline;}
CSS is still a fairly new "language" and the majority of web
developers do not use CSS to its full potential or even for the reason
why it was created in the first place which was to separate content
from style.
People struggle to understand its quirks at first, although this is
partially due to the different levels of support in popular web
browsers, which I will go into later.
CSS is becoming very popular though and is typically used by
"bloggers" with an interest in web design.
You will find some links to "blogs" like this in the "Further Reading"
section below.
Inserting CSS
==============
So now that we know what CSS does, where do we put the commands?
They can be put in three places like Javascript can be; within the
HTML tags, within the HTML <head> or as an external file.
The Style attribute
--------------------
To embed CSS in HTML tags, we simply use the STYLE attribute within
the tag like this example which makes all text in the paragraph be
aligned to the right of the page:
<p style="text-align: right;">
Style is basically an "attribute" like "color" in a font tag and is
written like this:
<INSERT HTML TAG HERE style="INSERT CSS HERE">
A CSS compliant alternative to setting a heading colour would be
written like this:
<h1 style="color: red;">Heading</h1>
Instead of the traditional way:
<font color="red">
<h1>Heading</h1>
</font>
In the <head>
--------------
In the document head we would insert the CSS like this:
<head>
<style type="text/css"
body { background: blue; }
a { text-decoration: none;}
a:hover { text-decoration: underline;}
</style>
</head>
This is similar to the way that you would include Javascript in a HTML
page and will work globally so in the above example, every link would
be underlined when you hold the mouse pointer over it as opposed to
the STYLE attribute which will only affect the particular tag that it
is placed in.
External file
--------------
As an external file, we use this command which is also in the <head>
of the page:
<head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
</head>
In this case, the browser will request the CSS file from the server
when getting the HTML file and then apply any styles to the HTML page.
Again, this works like an external Javascript file and affects the
entire page globally.
Which is best?
---------------
The external file method is by far the best solution and by using
this, the page weight will be reduced and bandwidth will be saved due
to the browser caching the CSS file.
You will also be able to alter this file to make changes instantly to
every page throughout the site which uses it.
Have a look in your Temporary Internet Files and you should see a few
.css files in there from various websites.
Using the STYLE attribute is not a very good solution and while it is
indeed using CSS instead of old tags such as <font>, you have to use
it for each item that you want to style so you will not see many of
the benefits such as smaller file sizes and quick rendering time.
"Inlining style loses many of the advantages of style sheets by mixing
content with presentation. As well, inlined styles implicitly apply to
all media, since there is no mechanism for specifying the intended
medium for an inlined style. This method should be used sparingly,
such as when a style is to be applied on all media to a single
occurrence of an element"
Quote from: HTML Help [
http://www.htmlhelp.com/reference/css/style-html.html ]
CSS written in the <head> does have the advantage of making global
changes thoughout the HTML but it has to be included in each page so
making a small change still means that you must go through every HTML
file and make alterations.
Separating content from presentation
=====================================
The main purpose of CSS is to separate content (HTML structure tags
and actual text) from the presentation (colours, layout etc).
It makes a lot of sense when you think about it; if you have a
traditional HTML page with lots of tags such as <font> which describe
the colours and layout to the browser, then it will be very difficult
and time consuming to make any alterations to the page and if you have
a large website with hundreds of pages then the time and cost required
to make any changes will be enormous.
With CSS though, we can use one single CSS file which controls the
presentation of the entire website.
Using this method, your HTML files will have nothing more than basic
tags such as <h1> and <p>, similar to when the web was in its early
days and the CSS file will be loaded by the browser which then applies
the styles to the HTML tags.
So, if you need to change the colour of your links then you make just
one alteration to the CSS file and the changes will be applied
instantly.
As well as the benefits of the above, you will also notice a pleasant
side effect which is a massive reduction of bandwidth used by the
site.
This reduction happens in two ways.
Firstly, the page weight can be decreased tenfold due to the absence
of traditional HTML tags such as <font> and the associated markup.
Even popular sites have markup which is not required, such as the
following: "<font color="#007700" face="Arial"></font>".
This type of markup serves no purpose at all, there is no content
between the tags to be styled and the browser will take extra time to
render this before the page is completed.
As an example, here are two short HTML pages, one using traditional
methods and the last using CSS.
Try saving these as .html pages in a text editor then opening them in
a browser to see the difference and maybe try altering the CSS to see
what happens.
Traditional
------------
<html>
<head>
<title>Traditional Page</title>
</head>
<body bgcolor="#ffffff" text="#004400" link="#000088">
<font color="#440000" face="Arial">
<h1>A Heading</h1>
</font>
<font face="Arial">
<p>A paragraph.<br>
Lots of text...<br>
More text</p>
</font>
<font color="#440000" face="Arial">
<h1>Another Heading</h1>
</font>
<font face="Arial">
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
</font>
<font color="#440000" face="Arial">
<h1>Another Heading</h1>
</font>
<font face="Arial">
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
</font>
<font color="#440000" face="Arial">
<h1>Another Heading</h1>
</font>
<font face="Arial">
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
</font>
</body>
</html>
With CSS
---------
<html>
<head>
<title>CSS Page</title>
<style type="text/css">
body { background: #ffffff; color: #004400; font-family: Arial; }
a { color: #000088; }
</style>
</head>
<body>
<h1>A Heading</h1>
<p>A paragraph.<br>
Lots of text...<br>
More text</p>
<h1>Another Heading</h1>
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
<h1>Another Heading</h1>
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
<h1>Another Heading</h1>
<p>Another paragraph.<br>
Lots of text...<br>
More text</p>
</body>
</html>
As you can see, the second example is much smaller and it is also much
easier to read if you are viewing the markup.
If the CSS is held in an external file, the individual page size will
be much smaller compared to the traditional page.
With large sites the difference in page size can be huge.
Another advantage is that many traditionally written websites are very
difficult to view on different devices such as a mobile phone or a
text browser and sometimes confuse them but using CSS, a simple
browser will ignore the style and just use the standard HTML markup so
the page will be readable in any situation.
Obviously, on a mobile device such as a PDA or a laptop, bandwidth and
page weight are very important and you will be saving your users time
and money by using CSS.
In summary, CSS will:
- Reduce your outgoing bandwidth.
- Save time for you and your users.
- Make your site easy to manage.
- Make your pages render more quickly.
Other benefits
===============
That's not all CSS is good for though, there are two other useful
benefits.
The first is alternate stylesheets which can only be used with
external CSS files.
To insert an alternate stylesheet you use another <link> tag but with
a slight difference.
Instead of <link rel="stylesheet" href="style.css" type="text/css"> we
use <link rel="alternate stylesheet" href="style2.css" type="text/css"
title="Stylesheet 2">.
In the page, this would appear like this:
<head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="alternate stylesheet" href="style2.css" type="text/css"
title="Stylesheet 2" media="screen">
</head>
Then, your users will be able to switch between styles when using a
browser which supports it (see next section).
You could use this for providing a different layout or maybe different
fonts and colours.
You may have noticed the media="screen" declaration in the <link> tag.
This "media" setting basically tells the browser what the stylesheet
is for, possible uses include a different stylesheet for printers,
televisions and PC screens.
This is very useful because by using a separate stylesheet for
printers means that you no longer need to have a "printer friendly"
duplicate of each web page, the CSS will take care of it for you and
the browser will automatically select it when told to print a page.
To use this method, just use the media="print" declaration like this:
<head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="print.css" type="text/css"
media="print">
</head>
For a more in-depth look at this, visit the excellent article from A
List Apart:
http://www.alistapart.com/stories/goingtoprint/
A list of the possible media types is provided by the W3C:
http://www.w3.org/TR/REC-CSS2/media.html#media-types
The second other benefit is the power of pure CSS.
It can be used to make any item on the page have almost any property.
For example, a link could have a dotted border around it or form
buttons could have different font styles.
I found a couple of good sites which demonstrate how powerful CSS can
be, these use CSS for everything except the "switch stylesheet" code
which uses Javascript to allow Internet Explorer users to join in,
Mozilla can do this natively.
If you don't have Mozilla (or Netscape 6+), download it from the
Mozilla Organization [ http://www.mozilla.org ] then play around with
the various features of these pages.
"The Power of CSS"
http://www.dzr-web.com/demos/css/
"css/edge"
http://www.meyerweb.com/eric/css/edge/
"Eric Meyer: CSS"
http://www.meyerweb.com/eric/css/
"Glish - CSS Layout Techniques"
http://www.glish.com/css/
Browser support
================
Browser support is quite an important issue but thankfully most modern
browsers have very good support of CSS Level 1 and some even support
parts of Level 2.
If a browser does not support CSS it will ignore it so all your
documents will still be readable and if you use heading and paragraph
tags correctly then it will also be structured very well with a highly
organized layout.
This is why it is important to use heading and paragraph tags within
CSS pages.
Some browsers are very buggy in their handling of CSS, Netscape 4.x in
particular which sometimes renders the background colours in the
opposite of what you wanted.
One way around this is to use server side scripting to detect the
browser and maybe give it a different stylesheet although this
shouldn't really be done for more modern browsers, the developer
should spend more time writing CSS which works well in all
environments.
Here is a summary of popular browsers:
Poor or no CSS support:
IE 3 or below
Netscape 4.x or below
Opera 3 or below
Good support:
IE 5.5+
Opera 4+
Excellent support:
Mozilla 1.x
Netscape 6.x+
Opera 6+
IE Mac 5
There are quite a few good browser support pages around, two of these
are below:
"browser support for css1 & css2"
http://www.jessett.com/web_sites/css/css_browser_support.shtml
"CSS Support Table"
http://www.richinstyle.com/bugs/table.html
"CSS Bugs and Workarounds"
http://css.nu/pointers/bugs.html
Further reading
================
W3C - CSS Level 1 Spec
http://www.w3.org/TR/REC-CSS1
W3C - CSS Level 2 Spec
http://www.w3.org/TR/REC-CSS2
HTML Help - guide to CSS
http://www.htmlhelp.com/reference/css/
W3.org - CSS
http://www.w3.org/Style/CSS/
Complete CSS Guide
http://www.westciv.com/style_master/academy/css_tutorial/
CSS Articles
http://css.nu/articles/index.html
CSS Mailing List
http://www.css-discuss.org
CSS COlouring Book
http://www.wannabegirl.org/css/
CSS Frequently Asked Questions
http://www.hwg.org/resources/faqs/cssFAQ.html
Book Of Styles
http://www.bookofstyles.org
A List Apart
http://www.alistapart.com
Evolt
http://www.evolt.org
Blue Robot
http://www.bluerobot.com
---
I have only explained the basics of CSS here, there is much more to
learn such as "@import" rules, Classes and Child Selectors but this
should get you started, you may also wish to read another related
question I answered last week about CSS:
http://answers.google.com/answers/main?cmd=threadview&id=211931.
The learning process is half the fun though so I advise that you maybe
visit W3 Schools [ http://www.w3schools.com/css/ ] to play around with
the superb examples there.
Have fun!
errol-ga.
Google searches
================
"css"
://www.google.co.uk/search?q=css
"css demo"
://www.google.co.uk/search?q=css+demo |
