What CSS tips should every beginning developer know about?I'm compiling a list of the most important things beginning web developers should know about Cascading Style Sheets.
I'm looking for good practices, commonly misused or misunderstood concepts or other simply useful tips for newbies. For example:
What other important advice should my list contain?
ACCEPTED]
I did not understand the box model (or even the DOM) properly until I took a look at Firebug's box model diagram. It's very useful to know what's going on with an element.
It's not nice going over code again to find that actually, you can't remember what this particular class does, or where it's used.
I import stylesheets all the time. A good way of doing things is to make a stylesheet for a specific type of layout, that imports a reset, a global typography sheet, etc.
@mediaWhile you can specify different stylesheets for different mediums (using media="screen" in the link) @media can be useful for short declarations.
The tricks we all end up using to get something right. These can include:
Probably not recommended for beginners but for intermediate-advanced programmers looking at other people's code can be very useful. Most are grid related, but I'd recommend YUI and 960.
[1] http://www.quirksmode.org/css/clearing.html@import if you don't have to, and for the love of god do not use CSS frameworks - Jason
Always use a doctype that triggers standards mode. This will make your page behave more consistently across browsers. Some doctypes you can use are:
<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Always validate your markup, because if it has errors, browsers will switch to "quirksmode" even if you use a standards mode doctype. You can validate your markup with the w3c validator [1] or the wdg validator [2].
Use a set of CSS rules to reset cross browser inconsistencies. Each browser may have different default values for some settings, like margins and fonts sizes. I usually put this on the beginning of my main stylesheet to avoid unwanted "holes" in my layout:
html * {
margin: 0;
padding: 0;
}
It's a very simple CSS reset that will save you from a lot of troubles, but you might need a more complete solution like yahoo!'s [3].
Always use external stylesheets for performance and maintainability issues.
Know the priority of selectors and rules. This will save you many headaches. More specific selectors have greater priority. This means their rules cannot be overridden by selectors with lesser priority.
Id selectors (#someId {...}) have priority over class selectors (.someClass {...}), which in turn have priority over tag selectors (p {...}). Then, nested selectors (div p {...}) have greater priority over simple selectors (p {...}). And finally, if you're dealing with two different selectors of the same type (ex. two class selectors), the one that appears last has greater priority.
After you've mastered these, look out for "classitis" and "divitis".
[1] http://validator.w3.org/I didn't know about this fact until today, and I was thinking exactly the opposite!
That, Browsers evaluate the selector rules from right to left.
Quote from Steve Souders's blog [1].
[1] http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/Here’s a much more expensive selector: A.class0007 * { }. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.
Understand the layers of the box-model [1].
Note that paddings are cumulative, while margins collapse (i.e. the distance between two adjacent boxes is the largest of the two margins - not the sum of both margins.)
Remember to use a doctype [2] that triggers standards mode. Note that the doctype must be the first tag - a comment or XML-declaration before the doctype may (or may not, depending on the browser) trigger quirks mode.
Make sure your HTML is valid before you ask yourself why your CSS isn't working in every browser.
There are certainly hundreds of tips that could go here, but the biggest one I can write is to be prepared to deal with Internet Explorer 6. IE6 has roughly 20% market share, so it can't be ignored. However, it also is probably one of the biggest problems for web developers.
I develop first for Firefox, Safari, Opera, and Chrome (which are all standards-compliant browsers). Once it's working with them, I move on to IE7, and finally IE6. Here are some specific tips that might help you:
This for IE6, which incorrectly interprets height as min-height:
.classNameHere {height:300px;}
This for for everything else:
div>div .classNameHere {min-height:300px; height:auto;}
Other general tips would include:
Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. CSS HTML selectors are simply the names of HTML tags and are used to change the style of a specific tag:
td {
font-size: 0.8em;
color: green;
}
For each selector there are properties inside curly brackets, which simply take the form of words such as color, font-weight or background-color.
A value is given to the property following a colon ":" and semi-colons ";" separate the properties.
There are three different ways to apply CSS to HTML.
In-line styles can be assigned straight into the HTML tags using the style attribute:
<p style="color: blue">example</p>
Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
...
<html>
<head>
<title>Example Page</title>
<style type="text/css">
h1 { color: green }
h2 { color: red }
</style>
...
External styles are used for the whole, multiple-page website. There is a separate CSS file:
...
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
The best-practice approach though is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
Do tests in all relevant browsers at short intervals right from the beginning. Ironing things out afterwards is a lot harder and more time-consuming.
Don't create a class for every element. Create one for each type.
I have an application I've inherited at work, and rather than style all the buttons with a class, each one has its own descriptive class, which means I have to change 20+ classes to change what the buttons look like.
Also, name your classes independently of their actual style, e.g. .leftcolumn rather than .greenleftcolumn etc.
You could get some answers from this post: http://stackoverflow.com/questions/249357/are-there-any-css-standards-that-i-should-follow-while-writing-my-first-styleshee
Definitely validate your HTML before moving forward with your CSS.
Use direct links (http://example.com/css/style.css) instead of local links when importing your CSS.
