Sample of the pdf document :
Cascading
Style Sheets (CSS)
Cascading Style Sheets. The
name alone is enough to frighten many people away, conjuring up images of
cryptic code and syntax, too difficult for the layperson to grasp. In reality, however, CSS is one of the
simplest and most convenient tools available to Web developers. In this guide you will cover the basics of
CSS, and see how it can be applied to simplify the task of managing a
consistently formatted Web site with minimal headaches.
The Problem
with HTML
CSS is a language for defining the formatting used in a Web
site. This includes things like colours,
background images, fonts, margins, and indentation. But you can do all that now with HTML tags,
you might think. So, why do we need
CSS? A very good question, and the best
way to answer it is with an example of what is wrong with defining such styles
using HTML.
A common design choice at present is to use a sans-serif font
(like Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif
font like Times New Roman, creating a complex Web page layout using a
sans-serif font will often involve a lot of <font> tags. With the nested
table layouts that have become commonplace on the Web, it would not be uncommon
to see ten or twenty <font> tags simply dedicated to applying the same font to all of the
text on the page. Multiply this by 5
pages for a modest site and you could have around one hundred tags. A bigger site might have 50 pages or more, in
which case you are looking at a thousand <font> tags, all dedicated to applying that one basic, consistent style
to the text of your document.
Just think how it would be if you had designed a site for a client
and the client calls you late one Friday afternoon to say, “Arial is alright,
but everyone uses it. Let’s use Verdana
instead.” Fancy search-and-replace tools
aside, you are now faced with the task of adjusting one hundred, one thousand,
or even more <font>
tags to make what, from your client’s perspective, may seem like a very simple
change. You can pretty much kiss the
weekend you had planned goodbye. Try not
to groan out loud – it doesn’t go over well with most customers.
If you know your HTML, you may be thinking that the <basefont> tag, which lets you set
the default font to be used throughout a page, provides a nice solution to this
problem. Even then, you’d have to adjust
one tag for each page of your site. Add
another font style to the equation (maybe a different font for the menu bar),
and the problem returns in full.
To this problem and others, Cascading Style Sheets are the
solution.
Defining
Styles with CSS
The basic principle of
CSS is to allow the designer to define a style (a list of formatting details
like fonts, sizes, and colours) and then apply it to one or more portions of
one or more HTML pages using a selector.
Let’s look at a basic example to see how this is done.
Try out the following
HTML code and view the results.
Certain aspects of the code need to
be written as continuous, i.e. no paragraph breaks. If using Notepad set the format for Word Wrap
so as you do not have to keep scrolling left and right to read the code. Notice that the code has been displayed in
double line spacing EXCEPT where the code should be continuous (on a
single line) this is displayed in normal or single line spacing.
<html>
<head>
<title> A simple page </title>
</head>
<body>
<h1><font face=”sans-serif” color=”#3366cc”>First
Title</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366cc”>Second
Title</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366cc”>Third
Title</font></h1>
<p>...</p>
</body>
</html>
Save the file as css1.html
This document contains three headings, created using <h1> tags. To make these headings stand out more, we
have used <font>
tags to make them light blue in a sans-serif font (Windows browsers will
display them in Arial, for example).
Notice the repetition involved, even at this basic level. We have had to specify the details of the
font we wanted three separate times.
Wouldn’t it make sense to define the font just once and then apply it to
all the headings?
Now try out the following
page, this time using CSS, then view the results:
<html><head><title> A simple page </title><style type=”text/css”><!--h1 {font-family: sans-serif;color: #3366cc;}--></style></head><body><h1>First Title</h1><p>...</p><h1>Second Title</h1><p>...</p><h1>Third Title</h1><p>...</p></body></html> Save the file as css2.html
<style type=”text/css”>
CSS Styles here
</style> <style type=”text/css”>
<!--
CSS Styles here
-->
</style>
h1 {font-family: sans-serif;color: #3366cc;font-size: 72pt;} Remember to save the file as styles.css
All of the magic is between the <style> tags in the <head> of the document, where we define our light blue, sans-serif font
and apply it to the <h1> tags in the document. At
this point don’t worry about the syntax; it will be explained in detail as we
go on.
Meanwhile, the <font> tags have completely disappeared from the <body>, leaving our document
looking a lot less cluttered.
Changes to the style definition at the top of the page affect all
three headings, and any other headings added to the page will also take on the
style.
Now that we’ve got some idea of what CSS does, let’s look at the
different ways of using CSS styles in our HTML documents.
Adding CSS Styles to HTML Documents
The simplest way of putting CSS styles in your Web pages is to use
the <style> tag, as we did in the
example above. This lets you declare any
number of CSS styles by placing them between the opening <style> tag and the closing </style> tag, as follows:
The TYPE attribute specifies the language that you’re using to define your
styles. CSS is the language we are going
to use to define our pages and is indicated with the value text/css. Another language you may come across is
JavaScript Style Sheets (JSS), and is specified by text/javascript.
Since Web browsers are designed to ignore any tags they do not
recognise, older browsers that don’t support CSS would normally output the CSS
style definitions as plain text in the document. To guard against this, it is common practice
to enclose the style definitions within an HTML comment tag:
While nice and simple, the <style> tag has one major disadvantage.
Specifically, if you want to use a particular set of styles throughout
your site, you’ll have to repeat those style definitions in a <style> tag at the top of every
one of your site’s pages.
A more sensible alternative is to put those definitions in a plain
text file (usually given a .css filename), and then link your documents to that one file. Any changes to the style definitions in that
one file will affect all pages that link to it.
This enables us to design our site with site-wide style definitions, our
original objective.
To link a document to a CSS text file (say, styles.css), place a <link> tag in the document’s
header:
<link
rel=”stylesheet” type=”text/css” href=”styles.css”>
The next example calls upon a plain text file to define the documents
style. The code for the Web page is
given below.
<html>
<head>
<title> A simple page </title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1>First Title</h1>
<p>I can place my first subject here.</p>
<h1>Second Title</h1>
<p>Information relating to my second heading goes
here.</p>
<h1>Third Title</h1>
<p>This is where my third title text will be
placed.</p>
<BR>
<a href = “http://www.itn.co.uk”>ITN</a>
<BR>
<a href = “http://www.bbc.co.uk”>BBC
Home Page</a>
</body>
</html>
Save
the file as css3.html
And the code for the styles.css file contains the style
definition below:
Like an image file, you can reuse this styles.css file in as many pages as
you need. Not only will it save you
typing, but it also ensures a consistent look to the headings across your
entire site.......
Click here for Download PDF / FREE
