Hi all!

 

Though I've been desiging for a while, I have ZERO experience with CSS but am dying to learn all about it. Any links, thoughts, tutuorials would be appreciated. Thank you!

That's the good thing about widely used languages such as CSS; even if you do not know anything about it, there's always millions of tutorial waiting for you

There's SO much to learn out there and never enough time. I really need a clone more than anything else!

A good place to start, I think is w3schools - they have basic tutorials on everything web development. CSSzengarden is a good place for inspiration.

Yep w3schools is quite good, I've been only recently introduced to it, but already saw some articles posted here, seems like a good start

Ah, a project for this evening! Thanks so much for the links!

Hi there

 

When I first started to code with CSS I had no idea what I was doing and really found it difficult reading the resources online as there are so many ways of doing one thing so initially it's very easy to get confused and wonder whether you are doing things right or not.

 

What I did was find a site that had the kind of layout I needed - eg a 2 column site with a header and a footer and then downloaded the CSS for it and tried to figure out from that how to build my own 2 column layout. Once I go that sorted, I moved onto a 3 column layout and did the same thing by finding a site that looked and functioned the way I wanted mine to and deconstructed it in order to learn how to build my own. It took me ages to feel confident in what I was doing, but I got there in the end.

 

Whenever you see a site you like and you know it's a CSS site - have a look at the source code and find out the link to the stylesheets - then load those in your browser and see how they've gone about building the site - This is the best way to learn.

 

Alternatively you could buy 'Bulletproff Web Desing' by Dan Cederholm as it's brillinat - I bought it a year ago and it really helped iron out some of the problems I was having and has helped me streamline my coding.

 

Here are some links you might find useful:

 

> Simple 2 Column CSS Layout

> CSS from the Ground Up

> Css Help Pile

> CSS Tests and Experiments

> Cascading Style Sheets, level 2 CSS2 Specification

> Full CSS Property Compatibility Chart

> Links that will save you from an anuerism

> Css Crib Sheet

> Css Selectors

> Css Play

> Box Model Hack

> Raw CSS Examples

> A CSS Framework

> Liquid CSS Layouts

 

And after all of that you should be a CSS guru!

 

E

I'd like to think that i knwo a thing or two about css based design. My only flaw (i think) is that i struggle with fluid like design. I'm going to do a little research into that link you provided eskymo!

 

Dave

Eskymo you rock!

 

Thank you so much for sharing your method...I usually do things exactly the same way but haven't tried it with css yet. I've found I learn the most by monkeying with the code and seeing what happens...it's nice to know someone else works that way too.

 

Would it be completely unethical to call in sick to my real job to play with CSS all day?

Definitely not - call in sick right now! tee hee.

 

I was lucky last year as I got employed by a company part-time, but they didn't really have any work for me and so I sat there 7 hours every day on quite a decent hourly rate teaching myself CSS for three months. I forever grateful to them for the time and the money.

 

Dave - I had problems with liquid layouts too as I generally always go for fixed width designs, but one day I had to do a liquid layout for a client and found that link and used some of the examples to get a layout that worked - it didn't take too long either.

 

That is perhaps the best part time job I've ever heard of. I am fortunate as well...my boss is away nearly half the year at trade shows so I can play quite often. She's back now until January, though and I'm trapped doing real, actual work.

Well what you should do is push yourself with each new job.

 

At the company I worked for before I got 'the best part time job ever', I strived to do something different with each job that came along and so developed my CSS knowledge as I went along. I'd think, OK I've not done a 3 column layout, so the next site is going be three columns etc etc

 

It's easier to do that when you work for a company as you're getting paid a flat rate. When freelancing now, I find myself doing similar things over and over again so I can maximaise my time and costs accordingly. I don't want to be spending hours trying to figure something out and not get paid for that time, so I generally do development like that on my own work and test it out before I offer it to clients.

Now that is what i was looking for.

Thank you again Eskymo for pointing me here.

I have a question and was wondering if someone could help me out. I have a line of copy and within that line, there is an English subtitle. The line in the other language is blue, .85 em and I made the English subtitle a light green .85 em..with the same specs. The body tag is set at 100%. It looks fine on the page, but not in Safari..the light green English subtitle’s baseline drops! It doesn’t drop however, in Explorer. What is wrong here? Also, someone once told me NOT to put any type specs in the body copy area..just use the background function to add a background. Answers?

I was just told by a CSS expert that unless I know and can navigate around CSS and resolve problems..then I should stick with tables. I was going to use a template but his third party software menu wouldn’t insert properly because of bad CSS symantics on the template! So now I am without a simple template..All I wanted was a header, a sidebar, content and a footer. Anyone know of a good one with impeccable code so that I don’t have to go back to tables? Then again, after seeing a chart of everything that can go wrong with CSS, well..maybe I should stick with tables for now until I learn more or until they standardize CSS even more to avoid cross browser conflicts! Thoughts?

Here's a nice simple two column layout - it has a header, a side bar, a place for content and a footer.

 

2 column layout

It's not XHTML but HTML 4.01 Strict and I've tested it in all the PC browsers and it looks Ok in all of them. I haven't got my Mac connected the the internet at the moment so I can't see how it looks in safari.

 

You can also find some good 2 column layouts at this site:

A CSS framework just scroll down to 'Back to our five main layouts' and you'll find some links there, plus the article is a good read too.

Hi

 

I've been playing with CSS for a while now. Initially it is a pain but stick with it and it is worth it. I now try to develop ALL my sites that way. (Although my own site remains tables based Grafnic.com. Must get round to that one)

 

A very good book I came across on another forum was CSS mastery by Andy Budd (here's the book on Amazon CSS Mastery.

 

Bought the book and it helped enourmously.

 

Anyway keep on with the CSS, it is worth it in the end.

 

 

Nic

 

(BTW I dont get anything for pushing the book )

Thank you so much everyone! Eskymo, I will try both and see if the Project 7 menu works on there..If the first one is strict with respect to the Semantics, I will use that. But I will also try the other one ..will let you know what happens and if the menu fits in properly! BRB I will look into getting that book Nic.

 

I don’t really see a problem with using a simple layout with good semantics. If the semantics of the code was off again, and it wasn’t tested, then I would think twice again and stick to tables. But how is one going to progress if one doesn’t take risks? The programmer I am working with told me to use a template because it would be easier to make changes. I hate the colors in the first example, but that can be changed, thankfully!

A quick question Eskymo about the first layout which is the one that worked the best for me...I tried to ad padding to the main content div and the sidebar (50 to be exact)..but in this particular code, there appeared in the html, two bars that were about 1/4" high by the width of both the content and the sidebar. I deleted them because everytime I went to add padding to the content and sidebar sections, I would get this big gap at the top above the header!! It was driving me crazy. I did a test on Safari, IE and Netscape 6 and it seemed to be ok. I made the background white anyway..can you tell me why they were there? I hope I didn’t delete a fix for one of the browsers! I inserted a photo/masthead where the header type was anyway.

It's difficult to say without looking at the code to be honest...plus it's late...I'll get back to you tomorrow.

A little bit off topic, but there is 2 books that demonstrates CSS knowledge, and they are incredibly useful, and I for one have them on my bookshelf.

 

Eric Meyer on CSS

 

Designing Web Standards with Jeffrey Zeldman

 

The latter is most utmostly recommended if you want to develop your CSS more. I'm not trying to sell the books here, but sharing my fortune of knowing CSS better than I did before I got those books!

 

Not bad for a first post yey.

I've tried using CSS for a site, now. I think I like it! It looks good in IE and Firefox; I haven't any other browsers in which to check it.

Thank you sooo much James. Zeldman also has a useful website. Although, I got the Layout Gala website designs from that page, I was told that the code was not semantically correct on the one I was using so I had to abandon it..and this was from a CSS expert!

what was incorrect about it?

what was incorrect about it?

 

Not that anything was incorrect..but there were two blocks above the header that were part of the content and sidebar. I didn’t know what they were doing there because they seemed separate entities from the main sidebar and content block. Everytime I tried to give padding to the main content block and sidebar, these two little bars would expand as well, leaving a big gap above the header with more space than I wanted up there. Try adding padding to the content block and sidebar and watch what happens to see what I mean.