| Cascading
Style Sheets (CSS) is an extension
to HTML to allow styles, e.g. colour, font,
size to be specified for certain elements
of a hypertext document. Style information
can be included in-line in the HTML file
or in a separate CSS file (which can then
be easily shared by multiple HTML files).
Multiple levels of CSS can be used to allow
selective overriding of styles.
As said above CSS can be included in-line
the HTML file or in a separate CSS file.
The latter usually has the preference of
most designers, due to mutliple reasons:
You are able to use the defined styles
across multiple pages, in stead of limiting
the styles to only one page. Updating
the lay-out takes a lot less work. It
saves you bandwith, although a tiny amount,
it might make a use difference with traffic-high
sites.
|
Linking to
an external CSS needs to be done in
the following form
<head> <title> Linking
to an external stylesheet </title>
<link rel="stylesheet"
type="text/css"="url_here"></head>
|
Home (http://www.w3.org/Style/CSS/).
With CSS you are able to format your text,
form elements and almost every HTML-tag
out there. CSS is always written in a special
format, which resembles this form:
|
Linking to
an external CSS needs to be done in
the following form
Tag.class { attributes }
|
The tag reflects the HTML-tag you want
to apply the style on, for example <p>
or <H1>. You can also assign styles
to <td> and <table>, as well
as all the form elements from <input>
to <textarea>. The class reflects
the id of the class. A class is a specific
style, and this nifty feature allows you
to use several styles with the same tag.
In theory this means you are able to use
<p> to make a text black, and <p
class=green> to make a text green>
To take a closer look at the exact syntax,
and at the same time some basic text formatting
attributes and classes, take a look at the
following code sample:
| P
{ Text-align: left; Font-family: Verdana,
Arial, sans-serif; Font-size: 12px;
Font-weight: bold; Color: #000000; }
P { Text-align: center; Font-family:
Times New Roman; Font-size: 12px; Font-weight:
bold; Color: #00FF00; } <p> This
will produce left-aligned, black text
in Verdana with a size of 12px</p><p
class=green> This will produce centered
green text in Times New Roman.</p>
|
What It Really Is
Cascading style sheets are the graphic designer's
dream. The finite control that most designers
desire can be achieved to a greater extent
by using CSS. Offering desktop publishing
style control over content, the future of
cascading style sheets is bright, allowing
the type of control and freedom over web
pages that graphic designers have over print
based media. It opens doors to typographical
layout and manipulation, page formatting,
document structure, colour conformity and
uniformity. All in all, CSS provides consistency.
One of the fundamental features of CSS
is that style sheets cascade; authors can
attach a preferred style sheet, while the
reader may have a personal style sheet to
adjust for human or technological handicaps.
Style sheets help documents to become media
independent; documents can be presented
in a similar fashion whether they are printed,
displayed on a conventional monitor, or
interpreted by a special screen reader for
partially sighted or blind people.
Style sheets separate markup language, typically
HTML from the markup style attributes, allowing
authors to make document wide changes from
one central document- a real time saver
for developers. The benefits don't just
stop there though; because content is kept
with minimal markup and styles can be applied
using an external style sheet, page download
time is also reduced- speeding up the browsing
experience for site visitors, and also reducing
network traffic.
Advantages
The amount code that needs to be written
/ checked / edited is significantly smaller
then with just HTML, due to the repeated
use of styles throughout the documents.
The control over the the documents presentation
is much greater. There is no need to dive
into all of the pages, and edit them one
by one. Changing a few lines in the styles
section of your page, or in your external
stylesheet is sufficient to change the
look of an entire page or in the
case of an external stylesheet all the
pages.
By using CSS you are certain that the
presentation of the document is the same,
all pages are alike, because of the styles
being defined seperately from the HTML
code. CSS is also guaranteed to allow
rapid conversion of offline material to
online material without losing style.
CSS even allows you to change the look
of your entire website by uploading on
external stylesheet and replacing the
old one with it.
CSS is by far one of the most easier languages
to learn of the new media and the Internet
these days. There are no difficult syntax
rules, the amount of attributes is (compared
to other languages) relatively small.
Yet, being able to work with CSS means
a great difference in terms of document
creation and presenation.
Disadvantages
CSS is relatively new, and therefore
it is not yet widely supported. Although
the current browsers are doing their best
to support as much CSS as they can, the
use of CSS might lead to somewhat cluttered
designs, due to the visitors browsers
not supporting some of the styles used.
Without sufficient workarounds to take
care of the above described problem, older
browsers (who do not support CSS or do
not support it completely) fail to display
the content correctly.
Examples
Linking
to an external stylesheet
<head> <title> Linking to
an external stylesheet </title>
<link rel="stylesheet" type="text/css"
href="url_here"> </head>
|
|
Formatting
text using CSS
Code in CSS file:
p { text-align: center; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #000099;
} Code in HTML file: <p>This text
will be formatted as described in
the CSS code above </p>
|
|
Changing the
colors of links
Code in CSS file:
a { text-align: left; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #0000FF;
} a:active { text-align: left; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #00FF00;
} a:visited { text-align: left; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #FF0000;
} a:hover { text-align: left; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #000000;
}
Code in HTML file: <a href="foo.html"
title="Link">Foo</a>
The above link will show up blue as
default, green when active, red when
visited and when the mouse cursor
is hovered over the link it will show
up black.
|
|
Applying
classes
Code in CSS file:
p { text-align: center; font-family:
Verdana, Arial, sans-serif font-size:
12 px; font-weight: bold; color: #000099;
} p.red { text-align: left; font-family:
Times New Roman; font-size: 20px color:
#FF0000; } Code in HTML file: *p>Some
centered, 12 px, bold text in Verdana</p>
<p class=red>Some left-aligned, red
text in Times New Roman</p>
|
CSS
on form elements
Code in CSS file:
input.text { background-color: #CCCCCC;
border-top: 1px solid #000000; border-bottom:
1px solid #000000; border-right: 1px
solid #000000; border-left: 1px solid
#000000; font-family: Verdana, Arial,
sans-serif; font-size: 10px; color:
#000099; } input.submit{ background-color:
#FFFFFF; border-top: 1px solid #000000;
border-bottom: 1px solid #000000; border-right:
1px solid #000000; border-left: 1px
solid #000000; } textarea { background-color:
#CCCCCC border-top: 1px solid #000000;
border-bottom: 1px solid #000000; border-right:
1px solid #000000; border-left: 1px
solid #000000; font-family: Courier;
font-size: 12px color: #FF0000; } Code
in HTML file: <p>Name: <input
type="text" class=text size="25"><br>
Message: <textarea cols="40" rows="20"></textarea>
<input type="submit" class=submit
value="Send"></p> |
The code above will generate 1 textfield
with a grey background, which will contain
darkblue characters. The textarea will also
have a grey background, and have red letters
in Courier. The submit-button will have
a white background. All these form elements
will have a 1px black border.
|