EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > CSS > Introduction


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  CSS TUTORIAL :
INTRODUCTION








CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.

How it works:

A style is a definition of fonts, colors, etc.

Each style has a unique name: a selector.

The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

For example:

Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:

Classic HTML
<table>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr>

</table>


With CSS (assuming that a selector called subtext is defined)
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>


While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML.




 << BACK TO MENU
READ MORE >>  
















DEVELOPER TIP!
FACT:
Pages may align fine in one screen resolution while it's a mess when viewed on another.
TIP:
Use our Screen Resolution Tool to check your own pages.

It even shows bigger resolutions than your screen can handle!





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho