There are plenty of CSS tutorials out there that are aimed to increase your knowledge of CSS so you can cut down on mistakes. This tutorial is going to point out some obvious mistakes that beginners to CSS coding make, with the intention of helping you stop doing these techniques.
1. DO NOT overuse Classes and ID’s
Beginners seem to add classes and ID’s to almost every element on the page. This is not necessary and can defeat the whole purpose of using CSS. The overuse of classes/ ID’s can not only clutter up your style sheet, but are unnecessary. There are some examples below of what I am referring to.
Incorrect Example:
<div id="container" class="container">
<p class="heading"><strong class="extrastrong">Welcome</strong></p>
<p class="link1"><a href="#" class="link">Home</a></p>
<p class="link2"><a href="#" class="link">About</a></p>
<p class="link3"><a href="#"> class="link"Services</a></p>
<p class="link4"><a href="#"> class="link"Contact</a></p>
</div>
Here is how to correct the code above
Correct Example:
<h1>This is a heading</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
2. DO NOT use inline styles
Please do not use inline styles in your HTML markup. The great advantage of CSS is being able to store style markup externally, and allowing it to be distributed to multiple pages. Inline styles are a bad habit of the 90’s. There are certainly circumstances that inline styles can be useful but certainly not in a final product of a website.
Incorrect Example:
Here is how to correct the code above
Correct Example:
p { color: #fff; font-size: 2em; }
3. DO NOT abuse absolute positioning
Learn how to correctly use absolute positioning. Every element on the page should not be absolutely positioned. Learn how absolute positioning can be used effectively, because it is an important tool. Visit W3Schools to learn more about absolute postioning.
4. DO NOT have messy invalid CSS
There is nothing I hate more than a messy CSS file. Keep it clean and validated to make it easier for other developers to debug. You can use the W3C validator to validate your CSS. Some programs such as TextMate for Mac and of course Dreamweaver for both Mac and PC have the validate feature built in.
5. DO NOT contract DIVITIS
Divitis is a condition that beginners to CSS contract by putting everything on the page inside a DIV. This partly comes from the transition from tables to divs. Don’t get me wrong you should never use tables, unless it is for data purposes but you should not wrap every element on the page with a div. For example do not replace a paragraph tag with a div tag. View some examples below.
Incorrect Example:
<div id="nav">
<ul id="navlist">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="heading"></div>
<div id="news">News</div>
<div id="stories">Stories</div>
</div>
Here is how to correct the code above
Correct Example:
<ul id="navlist">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<h1>Heading</h1>
<p id="news">News</p>
<p id="stories">Stories</p>
</div>
Technorati Tags: CSS Tutorial, CSS dont’s, beginners CSS techniques, Semantic code
Loading ...
August 21st, 2009 at 10:08 pm
I know that invalid HTML markup can affect SEO, but can CSS really affect SEO, too?
August 21st, 2009 at 11:41 pm
This is a pretty decent article. Thanks for taking the time to write it
That being said:
I’ve seen this “valid CSS is important for SEO” assertion before. Can you please cite some sort of reference to back this statement up? I don’t believe it, and think that telling people it’s important for SEO reasons is misleading. After some searching, I can’t find anyone credible making a statement to this affect. Don’t get me wrong: I think validation is an important tool in creating a website, but it doesn’t have any measurable effect on your SERP rankings.
The idea that a spider would take the time/overhead to validate even the HTML is a bit absurd. Although some spiders are *rumored* to peak inside your CSS file to check for ‘visibility: hidden’ or ‘display: none’ spam techniques, the idea that Google et al are going to rank one site higher than another because ‘Site A’ has valid CSS, while ‘Site B’ doesn’t is impossible to prove in any meaningful way.
Valid HTML could be *somewhat* beneficial because a horribly broken site *could* take longer for the spider to parse properly. But there is little (no) evidence that could prove this definitively, and most public statements by Google people (e.g. Matt Cutts) would run counter to the notion (check out some of the videos on http://www.youtube.com/user/GoogleWebmasterHelp).
Besides, there are ‘valid’ reasons to have invalid code, *especially* when it comes to CSS. These reasons are becoming fewer in a world where IE6 is slowly going away, but they exist nonetheless. For example, many CSS frameworks (e.g. YUI CSS) don’t validate because they are using hacks in the process of normalizing browsers. It’s regrettable, but it’s necessary.
Again, don’t get me wrong: validation is an important tool. I simply take issue with people spreading unsubstantiated–very likely untrue–things as solid facts. Given that this particular article is targeted at beginners, I think it’s especially important to not make this sort of statement.
While I’m picking you apart: in #2, I’d say that your ‘correct’ example is worded pretty poorly. The concept of not using inline styles (though they are quite reasonable in some places) is solid, but using the word “heading” there is quite wrong. A heading should never be marked up as a paragraph with CSS to make it big and bold; it’s bad semantics. A heading should use h1, h2 etc … changing your wording slightly would improve that bit.
Anyhow, as I said at the beginning: this is generally a good article that I appreciate you publishing. I wish more beginners would care about this sort of thing, so it’s great that there are good folks like you out here setting them straight. Thanks, and I’m sorry if I’ve come across as pedantic or mean; that’s certainly not my intent.
August 22nd, 2009 at 12:22 am
I really enjoyed these tips. You really are helpful in simplifying CSS. Yet, I’m wondering, shouldn’t the end tags for News and stories be .
August 22nd, 2009 at 12:23 am
Oops I meant p instead of div for the end tags. sorry I didn’t know the tags wouldn’t appear in the post.
August 22nd, 2009 at 9:48 pm
@Allan
Let me clarify. I wasn’t strictly referring to CSS, I was referring to your code in general. Along with you I have done some research also and it mainly applies to your HTML Markup. I will clarify that in my post. Thanks for the comments.
@Elena
Oops thanks for that catch! Fixed it.
August 23rd, 2009 at 12:13 am
Who cares about CSS validation? It just tells the browser how the page may look like. And I do not believe that CSS can be good or bad for SEO purposes. If you start inserting elements on the website to help CSS styling then you can say it’s not a good practice.
August 23rd, 2009 at 1:08 am
Nice Work.
August 24th, 2009 at 10:44 am
Nice post – I like to read through these beginner guides every so often to refresh myself and make sure there’s nothing I’ve forgotten in my day to day programming.
A general good round up of some basic rules there, thanks.
August 24th, 2009 at 1:15 pm
@Dave Sparks – Thanks Dave! I appreciate your kind words and support. I’m hoping to build three styles to become a highly informative blog!
August 26th, 2009 at 12:04 am
Nice article.I agree with every point you make here. But I don’t think you explained the first point well enough. Sure you showed the correct html, but you didn’t explain how the same styles could be achieved without the overhead of all those classes and ids.
August 29th, 2009 at 1:40 pm
[...] 5 CSS Dont’s for Beginners [...]
September 1st, 2009 at 12:45 pm
[...] 5 CSS Dont’s for Beginners [...]
September 3rd, 2009 at 11:32 am
[...] 5 CSS Dont’s for Beginners – Read [...]
September 4th, 2009 at 10:01 am
This is a perfect guide for beginners. Cool!
September 9th, 2009 at 7:02 pm
Ah, in regards to inline styles. They can really be invaluable when testing things. Therefore, they should be discouraged from a final page design, but not necessarily during development. It’s a useful skill to learn and implement, but not to abuse.
September 28th, 2009 at 2:39 pm
[...] 5 CSS Dont’s for Beginners [...]
March 5th, 2010 at 7:02 pm
Dreamweaver has been lately my goto application for a long time. I truly do not know what I would undoubtedly do without it. There were moments when I initially begun utilizing the program, and I thought it was way too difficult. Now I fly around it, and it has grown to be an asset in my personal tool box. Anyways thanks for the write-up.
April 7th, 2010 at 1:48 pm
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.
April 15th, 2010 at 3:08 pm
Awesome! I’m glad you could take something away from this article. Good luck with your new design.