CSS Tutorial: An Introduction to Cascading Style Sheets
Cascading Style Sheets, better known as CSS, enable
you to control the style and layout of a web page. They will enable you
to specify link styles, fonts, margins, tables, colors, sizes, alignments
and much more throughout your entire web page.
They can also be used to create a template like style sheet (stored within
a separate file) that can be used throughout your web site. You can simply
link to your style sheet within each of your web pages and have the ability
to update the styles for your entire web site with just one file.
The Benefits of Using Cascading Style Sheets (CSS)
CSS will save you a great deal of time. When it
comes to the Internet, there are really only two elements: Content and
the way that content is presented. With HTML, we provide content, and
define how that content will be presented within the HTML code. However,
we are very limited as to what we can do with HTML.
Each browser is different and they see things differently. This is why
webmasters are instructed from the very beginning to view their web pages
in many different browsers, such as Internet Explorer, Netscape, Firefox,
and Opera (among many others), to make sure that their web pages appear
as they intended and expected them to from one browser to another.
Overall, the HTML code on the web page polices the content, and the CSS
polices the HTML. This allows you to create web pages that are suitable
for all browsers.
One of the best benefits of using CSS within your web pages is the ease
of updating your web pages. If you'd like to make a change to your design,
instead of having to change hundreds of web pages on your site, you can
make one simple change to the CSS file, and it will automatically update
all of the pages on your web site. CSS enables you to do in seconds what
would take hours to do in HTML.
Creating Cascading Style Sheets (CSS)
Learning, creating, and working with CSS doesn't
require much. You do not need any type of editor, as Cascading Style Sheets
can be created using a plain text editor, such as Note Pad.
However, you will need a web browser. Internet Explorer and Firefox are
the most popular ones, but there are many others. Once you create your
pages and are using CSS, you must ensure that you view your web pages
through multiple browsers to ensure they are displaying just as you had
intended. Visit Any
Browser to view your pages through different browsers.
You may also need a way to upload your pages to your web server. This
is typically done with an FTP client, and there are many nice free one's
available. You may also upload your files through the control panel of
your web hosting service.
Internal and External Cascading Style Sheets (CSS)
CSS can be used in two ways. It can be used internally, which may be
referred to as embedded or inline, or it can be used externally, which
is often referred to as a linked style sheet. Ideally, you will be using
linked styled sheets when you finish this tutorial.
The only time you may be using embedded CSS is if
you would like to change an individual link or text, or have a one or
two page web site. If you will have more than that, however, a linked
style sheet is definitely the way to go.
CSS can be used in three different ways:
Inline CSS
Added to your standard HTML tags.
Embedded CSS
An embedded CSS is exactly as it sounds. The CSS
code is actually placed within the HTML web page between the <HEAD>
and </HEAD> tags.
Linked CSS
A linked style sheet, on the other hand, is a completely
separate document that is linked to within a web page.
Prioritizing CSS and HTML tags
When using CSS, certain tags take precedence over
others. Here's how the tags are prioritized:
- HTML tags override all other tags.
- CSS inline tags override embedded and linked
tags.
- CSS embedded tags override linked tags.
- CSS linked tags won't override any other tags.
Formatting CSS Tags
CSS tags are formatted like this:
selector {property:
value;}
The selector is a browser command and
is followed by a property. The property
is a word describing the selector, which
further instructs the browser. The value specifies the value of
the property.
Although this may sound a little confusing, CSS is formatted much like
standard HTML. Let's compare the two formats:
HTML
  
CSS
 
As you can see in the comparison diagram above, the
Element is equivalent to the Selector, the Attribute
is equivalent to the Property and the Values are the same.
Inline Cascading Style Tags
Inline cascading style tags are used within standard
HTML code using the STYLE parameter. The following example will
remove the underline of an individual link:
| <A HREF="http://www.yourdomain.com" STYLE="TEXT-DECORATION:
NONE">Your Link</A> |
Browser View:
Your
Link
The STYLE parameter is added directly to your
original HTML link code.
Inline style tags enable you to specify how each individual link will
look.
Embedded Cascading Style Sheets
Embedded cascading style sheets (CSS) can perform
the same tasks as the inline style tags. However, the coding is placed
between the <HEAD> and </HEAD> tags within your HTML. You
can specify how your entire page will appear including links, fonts, text
and more, simply by using embedded style tags.
The following example will display your active text
links (after a link has been clicked on) in a specific color. The hover
color (when the mouse is placed over the link) will be displayed in an
alternate color and the underline will disappear.
<STYLE>
<!--
A:active { color:#0000FF; text-decoration; }
A:hover { color:#FF0000; text-decoration: none; }
//-->
</STYLE> |
Browser View:
Example Link (Place your
mouse over the link to view this example.)
The above code will display all of your links in a
specific style.
Notice the code is placed within the comment tags? Comment tags look like
this:
<!--your text-->
The comment tags are used to prevent older browsers that don't support
style tags from displaying the CSS codes within their page.
The great thing about embedding style codes is that you can create your
own classes of code. What this means is that you can specify different
styles throughout your page and then call them within your page.
For example, you can add a class of code to a paragraph selector
like this:
<STYLE>
<!--
p.padding {padding-left: 5px;
padding-right: 5px;
font-family: Arial;
font-size: 10px;}
//-->
</STYLE> |
Notice the text highlighted in bold? This is
a class name I made up. You can call it whatever you'd like. Simply add
.yourtext following your selector.
To put this style into action or call it, simply place the following
code within your HTML where you would like the style to be used:
Keep in mind, the text you place after your CSS
selector (.yourtext) must be the same name as the code you place
to call the style.
For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
<p class="text">
See how that works?
Linking CSS
The linking CSS method involves creating a file
that defines specific styles. This CSS file can be used throughout your
entire web site to specify everything from body styles and headings to
paragraphs and HTML tables.
This file might look something like this:
BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;
font-weight: bold; color: blue}
P { font-weight: normal;
color: blue} |
This file should be saved as style.css and uploaded
to your server where you store your HTML files.
When using a style sheet, you must place a link to your style.css file
within your HTML between your <HEAD> and </HEAD> tags like
this:
<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css"
type="text/css">
</head>
<body>
Page Content
</body>
</html> |
You can link to your style sheet within as many of
your pages as you would like. This will give you the ability to update
all of your pages at one time, simply by changing the styles within your
style.css file.
An Introduction to Cascading Style Sheets
Creating
a Basic HTML Page
Embedding
Cascading Style Sheets
Using
Cascading Style Sheets (CSS) to Specify Web Page Formatting
Manipulating
Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
Formatting
Hyperlinks with Cascading Style Sheets (CSS)
Creating
Tables within a Web Page with Cascading Style Sheets (CSS)
Cascading
Style Sheets (CSS) Classes and ID's
Cascading
Style Sheet Codes Chart - Property Index
 
|
