I've followed tons of tutorials but none of them have given me concrete examples used in real world applications. I can learn about class styles and id attributes till I'm blue in the face. But, until I follow a tutorial that actaully builds a webpage using those examples I cant learn a thing. Sad

I know what a property is, I know what a selector is, I know what a value is. Great! but its no use to me until I actually learn to do something useful to do with them. Rolling Eyes

So does anyone have any tips they used to learn CSS. Or better yet tutorials that actually build full fledged complex websites using CSS. Thats what I'm really after. Wink

go here

Hey thats alot of information there. Some of those sites I've alrady visited but most I haven't.

If you want to learn CSS i would say the best is to visit the Zengarden, pick up the content template and give a few tries. Even if yours is not officially chosen the practise you will pick up will be great. You have the opertunity to download the others stylesheets and see how they dealt with it and be sure its to a good standard.

I did a tutorial a few months back that covers using css. It takes a simple example layout and then demonstrates how it can be improved apone using some css. http://www.splodgy.com/modules/news/....php?storyid=4

Hey BradJ,

What I did to learn was convert my older html sites to css. This was helpful because I already had a clear idea what I wanted everything to look like and I was able to take a practical application approach to my education.

The most important thing is practice, so I would suggest diving in and start making pages. Also if you see a page you like, look at the source, find there css page, learn how it works and you will learn how to apply a variety of tecniques to your own sites. I am not suggesting you steal but investigate.

An important thing to remember is there is nothing you can do in your css that will cause any ireversible damge to anything.

If you get stuck on something post it here, even if it feels like a stupid question no one here will laugh at you, we all get stuck sometimes.

Have fun,

Great, but when trying to save webpages to study from. The browsers arent saving the background images. Say I try saving http://www.csszengarden.com/ as a complete webpage. All the images dont show up nor does it save it to my PC.

When you save the webpage you are only saving the HTML and all of the image elements are in the stylesheet. If you want to locate the images you have to download the stylesheet for that page which there is a link for on each CSS Zen example. Cant guarantee it but its normall on the same root the css sheet is saved to aswell.

There is a setting in IE where by you can tell it to save the entire page. That is save the html and the css and all the images. I'm not sure how you turn it on, I think my IE did this behaviour form the start. Alternativly you can get some site graber software that pulls all the files for a site to allow reading offline. Though some webmaster block such programs cause they eat allot of bandwidth.

Another way to do this would be manually, I think this might be a good way for you as it will help sink in some basic principals. If you find there is a link to the css like;

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

just type the sites url into the browser and add the href from our css link

http://www.theexamplesite.com/css/style.css

This will take you directly to the css page copy the file to your hard drive in a directory that emmulates the directory structure of the website you are examining. Visually search the css file for any inserted images and you will be able to grab these the same way.

For all the the regular html images you can just right click to save them.

The relative path images work a little a differently than absolute paths. They both began from the source of the file that calls them, but they can be structured differently. For example, if you find a path that looks like;

background-image: url(../images/bg.gif);

than you will need to go back one directory and look in the images folder.

http://www.theexamplesite.com/images/bg.gif

If instead you find;

background-image: url(images/bg.gif);

Than you will find that image at

http://www.theexamplesite.com/css/images/bg.gif

Once you manually recreate the site locally on your hard drive, you will already have an intimate understanding of it's heiarchy, this should help you understand what is going on.

Tools like Rincewind suggested are very useful, but I think while you are learning they might limit your exposure to a websites structure.

I hope I haven't made things more confusing. Please feel free to ask any other questions that occur to you.

Cheers,