The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Perhaps you would like them more if you were familiar with stylesheets in a page design program such as those from Adobe.

Have you ever created a web page that you had to maintain afterwards? Can we see some of your web pages?

I find CSS to be really, really great. However that's only because it is so very much more powerful than standard HTML markup and because it comes in handy when modifying and updating a web site.

It's very easy to learn - all you have to do is stick a style="" tag into your HTML element. Also you're not changing the HTML elements themselves (that's not the purpose of HTML - if you want to create tags IE has technology to do that or you could jsut go to XML).

Do you use the default font on every single web page that you create or do you specify a font? If you specify a font it's immediately easier to link to a single stylesheet file from every web page that you create rather than having to implement multiple <font> tags on the page.

There are a plethora of things that CSS is useful for, not the least of which is making you more efficient and productive.

Let's say that you lay out a site that you plan on changing fairly often. Maybe it's a commerce site that needs to reflect the seasons. You decide that you want the text in the header to be green in the Spring, Red in the Summer, brown in the Fall and Blue in the Winter.

Of course you could go in and change that all manually. But if your site starts getting larger and larger, your page count could get into the hundreds. That would take you hours to change it all.

Enter stylesheets...With one change to your linked stylesheet all of your headers are the new color. 5 minutes MAYBE. How does it work?

Simply define a style like so:

<style type="text/css">
<!--

.header {font-family: verdana; font-size: 15pt; color:#ff0000; }

-->
</style>

Then, in every place you wanted your header you said:

<span class="header">Sweaters</span>

How does it work? By defining the "class" header you are setting up a "style". You can then call that style from ANY HTML tag.

<td class="header">some content</td>

Would render the contents of that particular TD the same style as the SPAN tag.

I agree with you that if you style a tag itself that you lose the usefulness of that tag. That is the beauty of "classes". If I wanted the header style to ONLY be accessible to a B tag then I could do this:

b.header {font-family: verdana; font-size: 15pt; color:#ff0000; }

Now, ONLY a B tag could use that style, but the B tag itself remains unchanged.

Does that help? That's only a small portion of the power of CSS. Other things that it can do are:

Position elements on a page outside of the flow of normal HTML

Divorce content from presentation, allowing you to use the same content for PDA devices, WAP devices, web browsers and future devices that we don't know about yet.

dHTML would not dHTML without the use of stylesheet. All those funky dropdown menus? Unusable without CSS

ok...right now we (the design community) have created these elaborate methods of designing pages with TABLES and clear GIF's and marginwidth hacks.

While I am guilty of this too, it's not what HTML was intended for. HTML was to be used to markup text documents so that they would have a clearly defined structure.

H1
H2
H3
H4

and so on. Tables merely make it more complicated because they were not meant for layout, they were meant to be used for displaying tabular data. Now, using CSS you can position elements exactly where you want them on the page like so:

div.center {position:absolute; top:100px; left:50%; width: 200px; }

Then call it like so:

<div class="center">some content</div>

That would absolutely position a DIV 100 pixels from the top of the window and 50% from the left side. It works in both Netscape and IE. Just as an example, the same code sing tables would look like this:

So, not only are creating smaller files, you are seperating your content from your markup as the DIV tag was MEANT to be used as a container for content. Now, when you add in the @media feature you can set up a superset of styles for different devices. It alows you to specify a set of styles for PDA's, one for normal browers and yet another for a cellphone.

I just set up one style for al devides and another for a handlheld such as a phone or a PDA.

Now are you starting to see the value of CSS?

As for using a header and footer, sure, that works. I use that method on every site I work on, BUT I merely include the styles declarations themselves. I STILL have to reference the styles on a staic page. That is where the power starts to come in. I can set up a slew of styles, changing color, font face, size borders and with one change to the stylesheet my ENTIRE site is changed. Something that would have taken days or even weeks just took me 1 hour, maybe less.

I'm posting here as a complete newbie to CSS. I've just started to learn it and have only grasped the basics so far, but still find it to be an immense help.

When I created the Postfive website, I had all fonts, colours, links etc. etc. defined individually within each page and it took me two, maybe 3 days to go in and remove all these tags so that my style sheet (even though a basic one) would take over - and my site is not that big yet. Now though, if I decide that I want to change it so that, for example, my headers are all one size bigger, or a slightly different colour, I just go into the style sheet, make the appropriate change, and the whole site is updated in minutes. If the style sheet wasn't there, I'd be looking at 2 to 3 days work to just make 1 or 2 changes. This is what Creole was getting at. Trust him. He knows what he's talking about.

If you want to read up about it a little more, and haven't already been here, you could try W3 Schools Online This is what I used for my introduction to CSS, and I also ordered myself a book...... Cascading Style Sheets - Designing For The Web. It's published by Addison Wesley and is written by Hakon Wium Lie and Bert Bos....the creators of CSS. From a beginners point of view, I find the book comprehensive and easy to follow.

At the end of the day, whether or not you decide to work with CSS or not is up to you, but if you make the break, I can guarantee you won't look back.

Personally I've never used CSS and DIVs as a replacement for tables. And with the page I'm working on now I think it'd be warranted. Where's a tutorial that'd teach me how to do it or a good example? I don't want to use absolute positioning for the DIVs, I want everything to be relative.

Currently I have a complex table layout (without any spacers) for my page. I would like to replace it with CSS and have every cell become a DIV that 'floats' against the one to its left. However I have no idea how to do this. Any examples?

In Dreamweaver the 'turn tables to DIVs' function seems to turn everything to an absolutly positioned DIV for me.

I know that everything will be done with CSS in the near future, so on that basis I guess I will need to learn it.

Maybe if I still coded my HTML by hand I could see things more clearly.

Since using Dreamweaver, I feel I have it pretty easy already.

If I want to change every page on a site, all I do is open the Dreamweaver template, make the changes, and presto, every other page is automatically updated. Then I just FTP them to my server. Five minutes MAX.

Or, if I am using header and footer files, I just change the header and footer files and upload them, again, five minutes MAX.

It just seems that I would be increasing the amount of planning and work that goes into a site because I would need to manage yet another page of code and come up with ways to use it.

Having never used CSS, I probably have a lack of perspective. I'm sure with so many advocates it must be more than what I've seen explained by various websites and articles, or I'd see where I need it.

Yeah CSS is in the future and in alot of cases it is now. The problem is that not all the browsers, read older ones here, support css and of the browsers that do they don't support all of the tages or codes. This can make it a little fustrating.

As for learning CSS it doesn't have to be much harder then learning html in the first place. Plus there are a few programs to help ya out there when you need to code that css sheet.

I had to agree with ya a few years ago when CSS first appeared, I kept thinking that's cool but what is it good for. Now I think "thank God I can get rid of all these damn font tags"

And creole is right in that tables where never really designed to do layout, some nut figured out that you could use tables as a hack to do layout. Really CSS will be the only way to do layout in the near future. And tables will become what they are ment to be.

Yeah....layout with CSS is the next thing I have to learn. There just aren't enough hours in a day to do all that I need to, what with kids, husband, house etc etc! Arrggghhhh! I need to shut myself away somewhere with just a computer, a phone line and my books for company. Might get on a bit quicker then!

Heavy - I can totally see your point if you're using Dreamweaver. But bear in mind that for most of us (I would guess), if we suddenly decide "hey, my text would look better in Verdana" for example, without CSS we would have to change god knows how many font tags in each page. If we use a linked stylesheet however, we only have to change it once.

I use Dreamwevaer, and I've never found the feature that you describe, heavy, very useful. I don't duplicate any code on my pages - everything is assembled on the fly from idsparate pages/databases through PHP scripts. CSS is *still* useful even then.

Well the new site I'm working on is completely CSS-abled, except tables are still used for layout (so sue me). For non-CSS browsers, the site has a Yahoo! effect, which is pretty cool too.

Anyway, getting to my point, when I started the client did not have a logo yet. Now that we've seen the logo we had to change the temporary colour scheme completely, and that was easily done because I used CSS, I think it took only 3-4 hours. If CSS was not used I would probably have needed days.

Originally posted by duckie Well the new site I'm working on is completely CSS-abled, except tables are still used for layout (so sue me). For non-CSS browsers, the site has a Yahoo! effect, which is pretty cool too.

A quick point on one of the most basic uses of CSS, setting the style, size, colour etc. of text.

It seems no one has mentioned this so far, but the FONT tag, and other simmilar text altering tags, which you are most likely currently using for the above purposes have been deprecated in HTML 4. This means they are no longer part of HTML and the W3C wants us to stop using them.

CSS can be used to do everything these old tags could do. You can make it as easy or hard for yourself as you like. If you want to take full advantage of the power of CSS, use External style sheets to specify the style of all your text in one file for all your pages. If you can't get away from the old way where you used the FONT tag wherever you wanted a change, use Local style sheets. But remember, you can use all three types of CSS External, Internal and Local together. Internal overriding External and Local overriding both (Another powerful feature of CSS).

While it is unlikely browser vendors will stop supporting the FONT and simmilar tags, they have been deprecated from HTML 4 for a reason. Plus, you are severly limiting youself by sticking to the old ways.

I'm making a new site and I've decided to use Microsoft's DirectX transforms that are accessed via stylesheets. Not because they add anything to the layout (they don't) but simply because they look cool, technical and advanced.

maybe you already heard this but ...

hi wmk86!
you may be already heard this but i'll take this risk...
css allows you freedom in webdesign and webdeveloping. you can position elements the way you want, hide them or display them as you wish and play around them the way you like. of course, it's just the top of the iceberg. the main advantage of css is that now you can easily made platform/browser and resolution independent site(s). for a past two months i intensive use css just because of things i mentioned above. great resorces are: a list apart (you heard about it before, don't you), also, here at wdvl.com and many others (webmonkey, glisho /or glicho, i can't remeber/, ...). the test page of my site are avaliable here .

Now, CSS isn't the only way you can make design independent from content. A more backwards-compliant way to do it is in PHP(I bet you can do it in ASP too, as well as most any language). You do something like this..

Define the $fontface1, $fontcolor1 in a header php file(assuming you're using PHP for templates...why wouldn't you? ) which is included in all of your pages. Granted, the filesize is enlarged, but this enables two things:

1. Your page will work properly in any browser.
2. The ability to change these universal attributes through HTTP(without use of a Web-FTP script). For example, you can change the variables through a form. Not so with CSS.

And of course, this isn't a replacement for CSS. As much as I wish you could, it's impossible to make links change colors when you hover over them with PHP, or add style to buttons and forms with PHP, or any other things you can do in CSS but not HTML.

What about bloat?

One thing that needs to be addressed is the ridiculous overhead all those FONT tags add to your file size.

I have shrunk pages from 30k+ down to under 10k by replacing the font tags with a style sheet.

Mr. Heavy, I like Dreamweaver too, and the templates are great. But that's a whole other issue. DW makes it super easy to link to an external style sheet, and it makes editing the style sheets a piece of cake too. No need to learn the CSS syntax, DW does it for you.

Personally, I've had too many browser headaches with layers and DHTML. I still hide behind my tables. But the CSS font stuff causes no problems and it's SO much better, and it's pretty easy, just try it!

The only issue with dropping fonts and stuff is that "older" browsers (how many people use these older browsers we're so worried about?) won't see what you want them to see. However, by the same token they won't throw up errors (as in the case of non-standard js) so the question really is: do your users use css-ready browsers? If not, what do they see?

Hmm..Good Question. Since others have already answered..
First off, head over to www.w3.org and take a look at the 'future'.

Now, using CSS, you cut down on tons of redundent coding.
For example, you have a heading text on all of your pages. They share a common style, which could be bold, black in colour, font size...font family...etc.

<font face="Verdana, Arial, sans-serif" size="2" color="#000000"><b>Heading Text</b></font>
to all of your pages.
what if you have to modify one element. say....changing colour to white, cause your backgorund's going black.

now..you have to open eveyr file and make the modifications. with css, just open the style sheet, change color : #FFFFFF and you're done! look at all the bytes you save too.

css is the answer to header and footers of templates. =)

the above example is just the more fundamental usage of css.
how about page layout? if you look at css2 and css3, it also accounts towards accessibility.

if you're worried about compatibility and its role, start with using font styles and colours.

implement it on your site and as time goes, you'll realise how useful it is.

Last edited by lynlimz; Jun 18, 2001 at 06:45.

"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein