CSS Q&A 1: Answers To Your CSS Questions

Last week I asked you to ask me some of your css related question. You did and now it’s my turn. Please feel free to ask more questions in the comments below and I’ll respond in kind. I’ll be happy to turn this CSS Q&A into a regular post if enough questions keep coming in.

If you scan this post you’ll see there is quite a lot so let’s get to your questions

I’m alright with CSS, but it’s still one of those things I’m not 100% comfortable with at all times. Can you recommend any good reads or resources that work as a good primer to CSS?

MIke, there are lots of resources as you might imagine. Which is best depends a little on your current skill. I usually point people first to W3Schools.

The tutorials at W3Schools are the basics so you may find you already know much there, but the tutorials are good and quick to get through. Look at one or two and you should know whether or not the rest will be valuable to you. Even if you find it too basic, the reference is still good.

Most of my CSS learning came via Eric Meyer. I read a couple of his books when I first started out and after that it was mostly practice. The first book I read was Eric Meyer on CSS. It looks at different web pages that were coded with a table-based layout and slowly works through the code to change them to a css based layout.

You’ll find it most useful download the sample code and then type the changes in the book into that sample code. Along the way experiment a bit to give you a better understanding of what was going on.

There’s a follow up book More Eric Meyer on CSS, which I didn’t read. By the time this book was published I was coding css pretty well, but I assume it’s as good as the first. One of the other is probably enough.

The second book I read was the CSS Programmers Reference. Don’t let the title scare you. It’s a reference book for everything css and the intro chapters do a good job explaining quite a lot about how css works.

One other piece of advice is when you come across a web page and wonder how they achieved something grab the source code and see if you can figure it out. The time spent understand how others code is invaluable.

Should I compress my CSS files?

Good question Christopher. The idea behind css compression and really compression of any of your files is that whitespace adds weight to files. Extra spaces and line breaks add bytes to the size of your files and added up they cause your site to load slower. Compression is one way to reduce server load times.

Compare the following:

{code type=css}
.box {
border-width: 1px;
border-style: solid;
border-color: #ff0000;
color: #000000;
font-size: 12px;
}

.box {border: 1px solid #f00; color:#000; font-size:12px;}
{/code}

Both of the above do the exact same thing, but the second line uses a lot less bytes and so reduces the overall file size through the use of css shortcuts and writing the code on one line instead of separate lines.

The question, of course, is how much does it help? How much smaller will the file size be?

Steve Souders recently posted a test he ran on the performance impact of css selectors and came to the conclusion that the improvement in performance wasn’t much.

I have seen it shave off a significant amount of time on very large css files. By significant I’m talking fractions of a second so it’s not really noticeable to the end user, but you can still measure the saving.

Should you compress your files through compact coding or through tools that will take out all the whitespace then? Depends on how important is it shave off those fractions of seconds.

Generally there are other things like optimizing images and reducing http requests that will have a much greater impact. You should start with those to improve download times, but know that down the priority list you can compress css and javascript and html.

Once upon a time I might have spend more effort in compressing css. Now I simply write the code to be on one line and use shortcuts by habit. To me it’s easier to read that way anyway since there’s less scrolling, though I’m still happy to take care of any compression benefit.

I’ve come across a lot of websites where the body of the web page is not centered and is instead left aligned, and this is one of my pet peeves. I know centering can be a pain and was wondering if there was a foolproof method that works on all browsers?

Kathy, it’s really not that hard and when you see pages aligned to the left it’s either a design choice or probably a developer who thinks every person shares the same monitor resolution they use.

I’ve actually written a post on centering with css so I’ll point you there for more details, but here is the basic idea.

You want to start with a proper doctype. You can choose any, but you need to use one in order to get older versions of IE to behave.

Then to center any element within it’s parent container you need to do two things. Give it a width and set the left and right margins to auto. To center a full page I usually wrap a container div around all my html

{code type=html}

{/code}

Then in your css you might have:

{code type=css}
#wrapper {width:960px; margin: 0 auto}
{/code}

The width is up to you, but you need to specify something. It can be px or % or any other measurement. margin: 0 auto is saying give the top and bottom a margin of 0 and let the browser set the left and right margin automatically. You don’t have to use 0 for the top and bottom. That’s completely up to your design.

In this case the wrapper div will be centered within the parent which is the body element and so the entire page will now be centered within the body.

Vertical centering is a bit trickier though not that hard. While it wasn’t your question, here’s a good post explaining how to center elements vertically if you’re curious.

CSS3, what can we safely use? What is not accepted yet?

Bryan, at the moment you really can’t use css3. The spec isn’t complete and hasn’t been released yet. Some browsers may be including some of the specs. Safari 4..0 beta, for example, has incorporated things like css 3 web fonts and other effects, but let’s face it, until IE decides to implement css 3 we won’t be using it much in development.

Update: Chris Coyier of CSS-Tricks posted a screencast yesterday on Using CSS3. He demonstrates a number of things which work in Safari 4 and to a lesser degree in the current version of Firefox (FF 1.5 will supposedly support more). I think Opera will support some as well.

As Chris mentions technically some of the things he demonstrates are css2 and you really can’t use them in general, but have to see them as progressive enhancements for those browsers that do support them.

The video is close to an hour, but I recommend watching if you’re interested in css3. Chris goes into detail about what you can use and how you can use it.

Here are some links if you want to keep up with css 3.

• CSS3.info
• CSS3 Previews
• CSS3 Current Work
• Rijk’s Panelizer
• CSS 3 Roadmap
• Browser Support

I dont quite understand why people do “div#divname”. What is the purpose of the “div” in front?

Bryan the real answer for most is probably style or a quick fix. Odds are a lot of people don’t realize the difference between using div#divname and #divname, but there is a difference and it’s in the cascading part of css and specificity rules.

From the W3.org site the rules are:

A selector’s specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

There are some examples on the page linked to above, but here’s one specific to your question

#divname: (a = 1 for the id and b and c both equal 0. The specificity is then 100)
div#divname: (a = 1, b = 0, c = 1 (for the div element) The specificity is then 101)

So if you have:

{code type=css}
#divname {color: blue}
div#divname {color: red}
{/code}

the second is more specific. If in your html you have

{code type=html}

{/code}

the color of the text inside should be red and not blue. If however you have

{code type=html}

{/code}

the text should be blue since only the divname comes into play and not the div element itself.

Read through the examples at the w3.org page I linked to above for more details on how specificity works. Hopefully that answers your question.

Ask More CSS Questions

Thanks for the questions and hopefully the answers above did indeed answer your question. Please feel free to ask more in the comments below for more on the above or new questions if you have them. Depending on how may questions you ask I’ll put together another post trying to answer them.

Also do you like this format of answering all the questions in one post or would you find it easier if each question and answer was given it’s own post? I’m inclined to think a separate post for each would make more sense as long as people don’t mind waiting a little longer for answers to their questions.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.