PDA

View Full Version : What exactly are CSS pages?


doodleman
04-20-2005, 01:19 PM
I read posts with lots of people talking about them but what are they and how are they different to HTML.
HTML pages are all i've used so far (me new) and i wanna see if CSS are any better for my site, but i dont wanna screw it up by... trying to find it all out by myself. :unsure:

domedia
04-20-2005, 01:56 PM
CSS files does not replace HTML pages in any way.

Look at it this way:
HTML - defines the data structure of your webpage
CSS - defines how this data should be presented.

Basically it is a seperation of style and content. HTML was originally meant for structure, a universal way of sharing data. But early 90's came with the introduction of tags like IMG, FONT etc, where tags no longer were semantic, but also presentational. This was actually one of the main reasons the use of the web exploded among students, because the medium got more flexible in ways of presenting the pages.

Nowadays we're going back to basic and try to seperate the style stuff (CSS) from the data stuff (HTML)

Examples:

Old type of code:
<div align="center"><font color="#FF0000"><b><font face="Arial, Helvetica, sans-serif" size="4">Page Header </font></b></font> </div>

The above is often called tag soup.


New kind of code:
<h1 style="text-align: center; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 18px;">Page Header</h1>

The above is called inline style, we're putting the CSS style information inside the tag. Not much difference. In my mind, the power in CSS is in the possibility of reusing the same style over. so another example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<style type="text/css">
<!--
h1 {text-align: center; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 18px; color: red;}
-->
</style>
</head>
<body>
<h1>Page Header</h1>
</body>
</html>

In the example above you can clearly see the seperation of structure and presentation. The H1 tag is left alone, only giving us the semantic information that this is a top header of the page, and in the HEAD section we put all the style info.

But what if we have several pages on our website? In order not to retype this style information in the HEAD section of every page, we create a seperate CSS file and use it on all our pages.

The CSS page (in our example) will look like this:
h1 {text-align: center; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 18px; color: red;}

Now we insert a link to the CSS file on all our HTML pages like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<link href="yourfilename.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Page Header</h1>
</body>
</html>

Now let's say you have 100 pages on your website, and one day you wanted to change all the headers to blue. Now all you do is open the CSS file, change the color property, and when you save the CSS file, all your page headers on your website has changed color!

I strongly encourage you do read CSS tutorials and use them ( and experiment with them) as much as you can. Your code will be cleaner, more valid, and easier to maintain :)

Jim_Shady
04-20-2005, 05:07 PM
As an 'add-on' to Domedia - CSS is great.

Up until a few months ago I didn't use it, then in order to do some work I HAD to use it. Now I use it alot.

Once you've had a play around with it you'll start to find more and more ways of using it.

For example the heading at the top of this page with the DreamweaverClub logo in is CSS.

Jim Shady.

doodleman
04-22-2005, 03:47 PM
Wow, thanks a lot. I'll try experimenting with it a bit.

PS. sorry i posted this in the wrong forum page.