[ieggsist]

Hi!
I was working as a professional web designer back in 2000-2001. I am now getting back to it a bit but now everyone is talking about CSS and I have no idea what the hell everyone is talking about.

I explored some online tutorials and get the idea (i think). But what are the true advantages of using CSS as opposed to not using it. I am used to working with Dreamweaver and working directly in the html code to have more control. Am I missing out on something if I don't use CSS?

Thanks
Julie

[finbarr]

you can use css with DW no problem. As for your question 'why should you use CSS?':

search on google

[3lance]

Originally Posted by ieggsist

Hi!
I was working as a professional web designer back in 2000-2001. I am now getting back to it a bit but now everyone is talking about CSS and I have no idea what the hell everyone is talking about.

I explored some online tutorials and get the idea (i think). But what are the true advantages of using CSS as opposed to not using it. I am used to working with Dreamweaver and working directly in the html code to have more control. Am I missing out on something if I don't use CSS?

Thanks
Julie

the power of CSS can be best seen here

www.csszengarden.com

select the links on the right, same HTML, different CSS

[mike_m]

Just go through this for a good starting point:

http://www.cssbasics.com/

[LadynRed]

You might consider a subscription to Community MX - www.communitymx.com. They have TONS of tutorials on CSS, you can get their Jumpstart templates for free (as a subscriber) and lots of help from CSS gurus like Holly Bergevin, Zoe Gillenwater and Big John.

I tried the subscription on a monthly basis to see if it was really worth it.. it's worth EVERY penny. You should also join css-discuss.org and their list, run by THE css guru Eric Meyer. If you ever get stuck, there are so many people there that can help you.

[pgo]

I wouldn't pay for it.

Also a ton of references:

http://www.howtocreate.co.uk/
http://www.dezwozhere.com/links.html
http://www.timvansas.nl/bookmarks/
http://www.alvit.de/handbook/
http://www.alvit.de/web-dev/

[Nudoo]

well you been given tutorials so i'll give a little idea of what i like about css.

CSS (Cascading Style Sheets) have become very popular along with layers (divs) when xhtml was released.

This i feel is because the people can now style/align there site in such a way its almost hidden.
2001 tables would have been a big aspect with alot of designers and using tables you know how messy the code looks and comments in html didnt help much either.

Layers allow us to create a structure for a webpage in 20/30 lines where are using table can look at 100+ easy.

CSS goes hand in hand with html making editing color's, fonts and widths alot easier.

I would suggest you download a css template and mess around with small things like links and fonts.

a: - Defines link ( <a href="#">Your link</a> )
a:hover, a:visited - you can define how your links look when hovered or visited before.

#id - This defines a id. <div id="example"></div>
.class - this defines a class <div class="example"></div>

Just a little few things you should learn thing.

Hope i helped :P

[pgo]

Originally Posted by Nudoo

CSS (Cascading Style Sheets) have become very popular along with layers (divs) when xhtml was released.

This i feel is because the people can now style/align there site in such a way its almost hidden.

Layers allow us to create a structure for a webpage in 20/30 lines where are using table can look at 100+ easy.

Ignore this. Don't start thinking div = layer. A div is merely a non-semantic block element. Div = division. Nothing more. You can do "layering" with CSS - via the z-index property - but you won't need it 9/10 times.

a: - Defines link ( <a href="#">Your link</a> )
a:hover, a:visited - you can define how your links look when hovered or visited before.

#id - This defines a id. <div id="example"></div>
.class - this defines a class <div class="example"></div>

It's just "a" - the colon is unnecessary. Use a colon to invoke a pseudo class such as hover, visited, link, active, after, etc, etc.

FYI: It's usually a good idea to "LoVe-HAte" your links.

a:link
a:visited
a:hover
a:active

CSS is one of the three client side (rendered by the browser, not the server) technologies that make up the web toolkit.

HTML (or XHTML) = Structured content. This is the framework of a document. Ideally, it contains no information related to layout or design.

CSS = Presentation. This is what makes our document attractive. All layout, text effects, etc, should be controlled here.

JavaScript/Document Object Model (DOM) = Behavior. This changes our document, adds elements, creates more rich interactivity, and so on. It alters the behavior of HTML pages.

Hope that's clear. Have a look at the CSS Zen Garden mentioned above and, using Firefox, select View -> Page Style -> No Style. This removes the CSS and leaves you with just the HTML. Quite a difference, eh? You'll note that, although it lacks all design without the CSS, it remains structured and readable.

Also, don't look to the CSS Zen Garden for how to write good (X)HTML - its author himself would tell you that it's bloated so that there are a much higher number of elements that could be styled, giving the participants many possibilities for style choices.

[Nudoo]

I would argue about div not being a layer.

A (x)html page is made up of layers, be it tables or div's which in my case i was referring to the div.

<html>
  <head>
     <title>Example</title>
  </head>
<body>

<!--- Layer -->
<div id="header">you header</div>
<!--- End layer -->

<di... >
</body>
</html>

Breaking the page into layers using either tables (bloated code) or div's for me is to make it easier to edit and view what i actually done.

thats just my views

[pgo]

A layer, as it is in Photoshop, for example, implies a stacking relationship along the spatial Z axis.

Describing a web page as being made up of layers is misleading unless you've applied a z-index to everything and are actually stacking everything along the z axis.