CSS Common Mistakes for Beginners

I frequently encounter  people doing mistakes when they write CSS and here I will try to point out some of them.




1.  Duplicate properties when possible


When you want to style particular element let's say with border -

• border-left:1px solid #000;
• border-right:1px solid #000;
• border-top:1px solid #000;
• border-bottom:1px solid #FFF;

you can duplicate properties this way -

• border:1px solid #000;
• border-bottom:1px solid #FFF;

first, your browser will apply first property where all sides of the border will be same color - #f00, and then second property. But browser does these operations so fast that you can't notice these changes, in result you get the same style but you write less code.




2. Redundant parameters and units


Let's look at the following code -

• margin:10px 5px 10px 5px;

it could be written like this -

• margin: 10px 5px;

Many people write units next to 0 parameters like this -

• margin: 10px 0px 5px 0px:

when they could write it this way -

• margin: 10px 0 5px 0;

3. Hash symbol missing


When you assign a colour to  parameter don't forget about hash symbol -

• color:ffffff;

It should be:

• color:#ffffff;

      Or even:

• color:rgb(111,111,111);

4. Don't repeat unnecessary parameters 

• border-top:1px solid #00f;
• border-right:1px solid #00f;
• border-bottom:1px solid #00f;
• border-left:1px solid #00f;

Why not just write this?

• border:1px solid #00f;

5. Don't repeat styles


If you find yourself writing code like this -

• p {color:#FFF;}

• h1 {color:#FFF;}

• h4 {clolor:#FFF;}

You can save your time just by grouping these elements -

• p, h1, h4 {color:#FFF;} 

6. Use short color declarations


Hex numbers that repeat like -

•  color:#ffffff;
•  background-color:#000000;
•  border:1px solid #ee66aa;

can be condensed to -

• color:#fff;
• background-color:#000;
• border:1px solid #e6a;

But it doesn't work this though

• color:#ac34b5;

This is another way to condense your code and keep things short and easy to look at.




7. Don't use height parameter unless it's necessary


Once I worked on my friends stylesheet and found that he used height parameter on all <divs>  This was a nightmare to fix just a tiny bit.
Use margin: and padding: parameters instead, that gives you much more flexibility what you can do with an element



8. Don't use inline CSS

Always and always separate HTML and CSS otherwise when it comes to changes you wanna make to design, you will regret that you even started that thing.

So remember!

• wrong: <a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a>
• right:    <a href="somewhere.html" class="link_style">link</a>

Need more? Read my other CSS articles