.... Internet marketing resources, ecommerce web site design tutorials
  Taming the Beast - quality web marketing and ecommerce development services .... .

 

Return to web marketing and ecommerce articles index

Beginners Guide to Cascading Stylesheets - CSS

 

Cascading Style Sheets (CSS) standards were originally introduced in 1996, but like so many technologies introduced by the W3C, the way the information was presented confused many non-geeks. Consequently, even 12 years later, many webmasters still haven't taken advantage of this *huge* time-saving technology. If you're one of the many confused about CSS, this guide to Cascading Style Sheets may help!

A cascading style sheet is a set of instructions in a linked external file or within the source code of a page that tells a browser how to render page elements - text, tables etc. 

Advantages of using CSS

How can implementing CSS help you? Let's say you have a 50 page web site and the main body text you use is 10pt. Times New Roman. This would entail numerous instances of repetition in your coding:

<p><font face="Times New Roman" size="2">This is a line of text</font></p>

If you wanted to change the font to Arial, you would need to edit every page to make the changes. By using a *linked* style sheet (we'll cover the differences between different kinds of CSS a little later in this tutorial) you only need to change one file and then the entire site would be updated. 

Using CSS also makes your coding a lot trimmer through making the repetition of formatting instructions obsolete. Trimmer code = faster download times and less bandwidth usage.

CSS manual - free chapters Need a comprehensive manual on using CSS? This book contains all you'll need, including an exhaustive CSS Property Reference Guide and tips which can serve as a excellent desk reference. Chapters available for free download

Types of Cascading Style Sheets

There are three types of CSS

  1. Inline
  2. Embedded
  3. Linked (external)

The term Cascading Style Sheets is a little misleading; only one type could be really considered a "sheet", i.e. a separate page - that is the "linked" or "external" style sheet type - and this is where the real power of using CSS lies. 

The "cascading" refers to the hierarchy of control:

- Inline styles takes precedence 
- Then Embedded styles rules follow 
- The Linked external style sheet instructions will be used if In line or Embedded instructions are not present present.

How to use CSS:

Let's start with the most useful kind : 

Linked External Style Sheets 

Control an entire site from one file! This is just a text file, saved with the tail extension of .css that contains a series of instructions. When a page links to this file, the browser references the CSS instructions to render the page.

Exercise - using an external style sheet

The easiest way to understand CSS is to see it in action.

Create a text file and save it in the root directory of your folder where you store your web pages as test.css. In the text file, add these instructions only:

BODY     {
                font-family: Arial;
                font-size: 10pt;
              }

Now start a new web page and save it as testcss.htm

Place the following line between the <head> and </head> tags

<link rel="stylesheet" type="text/css" href="test.css">

This line "attaches" the sample.css file. It instructs the browser to refer to the CSS file for element rendering instructions.

After you've ensured that both files are saved, close the page and then open it again. Try typing some text on the new page and then previewing it. You'll notice that the text is now in Arial 10pt. 

Try changing the font name in the test.css file to Verdana and the size to 14pt in sample.css, save it, also close testcss.htm and open it again. Type some text - it should be displaying in 14 pt. Verdana 

Style sheets can be as simple or as complex as you like - there are so many elements that can be included in your CSS. 

Let's try a few more things - open the test.css file and replace the BODY statement with this:

BODY     {
                background-color: #ffffff ;
                margin-top: 0%;
                font-family: Arial, Verdana;
                font-size: 10pt;
                color: #64A6BC;
            }

  • The background-color sets the background color for the page in hex values
  • The margin-x sets the size of the margins around the page (you can also use bottom, left and right statements).
  • The multiple fonts are listed in case a person doesn't have a particular font on their computer-  in that case the next font type will be used. You can add as many fonts as you want, but it's recommended that you only used similar font types.
  • The font-size is ummmm... ;)
  • The font-color is the color that the font will be displayed using hex values.

In the above examples, we've only applied styles to the basic body element; but this isn't even scratching the surface of CSS controls. 

Let's say you want to use 12pt. Arial as body text, but you also use tables where you wish to use 10pt Arial, and in a different color:

BODY     {
                background-color: #ffffff ;
                margin-top: 0%;
                font-family: Arial, Verdana;
                font-size: 12pt;
                color: #64A6BC;
            }

TD       {
                font-family: Arial, Verdana;
                font-size: 10pt;
                color: #000000;
            }

The "TD" stands for Table Data - the cells within a table.

CSS gives you incredible flexibility. Here's another example. Your main body text is in 12 pt. Arial, table text is in 10pt.; but you have other tables that use 8pt. 

Since you've already used the TD element in your CSS file, you'll need to create a new "class". Here's an example of this scenario:

BODY     {
                background-color: #ffffff ;
                margin-top: 0%;
                font-family: Arial, Verdana;
                font-size: 12pt;
                color: #64A6BC;
            }

TD       {
                font-family: Arial, Verdana;
                font-size: 10pt;
                color: #000000;
            }

.smallblack    {
                font-family: Arial, Verdana;
                font-size: 8pt;
                color: #000000;
                   }

When creating your own classes, they can be called whatever you like, as long as it is a single word and is preceded by a "." as shown above. If you're coding with a text editor, you'll need to add a class="smallblack" (without the preceding ".")to the element e.g:

<table border="0" cellpadding="5" cellspacing="0" class="smallblack">

If you're using as WYSIWYG editor such as FrontPage or Dreamweaver, applying the new class is simple - just highlight the element; then select the class from the dropdown selector on the menu bar - it's usually on the left hand side in FrontPage. 

These examples are just to whet your appetite. With CSS you can customize just about any element on your web pages; from headings to scrollbars and form background colors to classy image borders.

This is just a small taste of what can be achieved with CSS - for more resources and references, see the end of this article.

CSS manual - free chapters Want to learn more about using Cascading Style Sheets? HTML Utopia has over 480 page of tutorials and exercises, including an exhaustive CSS Property Reference Guide. Chapters available for free download

Other CSS types

Inline Style
Inline styles can be added individual html tag in a page by using the "style" attribute - e.g.

<p><font style="color: blue">This is a line of text </font></p>

If you have an external style sheet that states all your regular body text should be black, but you want to use blue for one block of text, the inline style can be introduced to override the linked style sheet statement for that text block.

Embedded Style Sheets 
Embedded style sheets are used for controlling the display of elements on an individual page by adding formatting instructions between the <head> and </head> tags. Embedded styles will also override instructions contained in a linked style sheet for that page only.

<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--

H1 { font-family: Arial, Verdana;}
P  { color: #64A6BC }
 
-->
</STYLE>
</HEAD>

CSS Compatibility issues

CSS, like many other coding technologies, is constantly being developed. CSS1 was released in 1996 and CSS2 was launched in 1998. Even though it's nearly 6 years since the second set of standards was developed, some browsers are still not compatible with all those standards. 

This means that some CSS2 instructions you may implement won't be correctly translated by versions of web browsers more than a couple of years old - so for this reason, even now, sometimes it's best to play it safe and stick with CSS1 standards. 

Related learning resources:

If you’ve never created a CSS compliant site this book, "HTML Utopia" will get you up and running quickly. It also contains an extensive CSS Property Reference Guide and tips which can serve as a excellent desk reference. Chapters available for free download

W3schools has some excellent tutorials and references for CSS - well worth checking out.

Forget about frames - try Includes! - Still stuck using a framed site because you feel it makes web site administration and updates easier? Perhaps you don't realize the number of disadvantages of frames. Read this article for the lowdown on framed sites and suggestions on alternatives.

Michael Bloch
Taming the Beast
http://www.tamingthebeast.net 
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources
____________________________

Copyright information.... This article is free for reproduction but must be reproduced in its entirety, including live links & this copyright statement must be included. Visit http://www.tamingthebeast.net  for free Internet marketing and web development articles, tutorials and tools! Subscribe to our popular ecommerce/web design ezine!

Click here to view article index 

Online meeting & webinar software review
Powerful, easy to use collaboration tools that can help improve your marketing sales and training efforts. Learn more about these services in this review & try a free trial!

The best shopping cart software
Our reviews of some of the best shopping carts around - free ecommerce solutions  through to premium services offering affiliate programs, marketing modules & online soft goods delivery.  Shopping cart software guide 

Autoresponder software/mailing list manager
 Read our beginners guide and reviews of all-in-one autoresponder & email marketing software solutions.

Credit card transaction fraud screening!  Effective fraud screening is an essential part of running an online businesses. Fraud transactions cost you money and can threaten your merchant account. Pick up a stack of transaction screening tips in this free guide! 

Need some advice/tools for writing/creating a web design, development or marketing proposal?

 

 

 

Home

 

Get paid cash taking online surveys - free to join online 
survey companies that will pay you cash for your opinion!

In Loving Memory - Mignon Ann Bloch

copyright (c) 1999-2011  Taming the Beast  Adelaide - South Australia 

Profile - Contact - Privacy - Consultants Portfolio 

Search Site - Terms of Service - Social/environmental