CSS is a language that is used by

every theme, and I use the same name each

nearly every developer at some point. While it's a

time. For example, I use ".caption-right" to float

language that we sometimes take for granted, it

images which contain a caption to the right.

is powerful and has many nuances that can help

(or hurt) our designs. Here are thirty of the best
CSS practices that will keep you writing solid CSS
and avoiding some costly mistakes.

Think about things like whether or not you'll use

underscores or dashes in your ID's and class
names, and in what cases you'll use them. When
you start creating your own standards for CSS,

1. Make it Readable

you'll become much more proficient.

The readability of your CSS is incredibly

3. Start with a Framework

important, though most people overlookwhy it's

important. Great readability of your CSS makes it
much easier to maintain in the future, as you'll be
able to find elements quicker. Also, you'll never
know who might need to look at your code later

Some design purists scoff at the thought of using

a CSS framework with each design, but I believe
that if someone else has taken the time to
maintain a tool that speeds up production, why
reinvent the wheel? I know frameworks shouldn't

on.

be used in every instance, but most of the time

<editors-note> When writing CSS, most

they can help.

developers fall into one of two groups.

Many designers have their own framework that
Group 1: All on one line
1

they have created over time, and that's a great

.someDiv { background: red; padding: 2em; border: 1px

idea too. It helps keep consistency within the
projects.

Group 2: Each style gets its own line

1

.someDiv {

background: red;

padding: 2em;

border: 1px solid black;

Both practices are perfectly acceptable, though

you'll generally find that group two despises
group one! Just remember - choose the method
that looks best TO YOU. That's all that
matters. </editors-note>
2. Keep it Consistent

<editors-note> I disagree. CSS frameworks are

fantastic tools...for those who know how to use
them.
It's less a matter of reinventing the wheel, and
more a matter of understanding how the wheel

Along the lines of keeping your code readable is

works.

making sure that the CSS is consistent. You

should start to develop your own "sub-language"
of CSS that allows you to quickly name things.
There are certain classes that I create in nearly

If you're just getting started with CSS, I'd

personally recommend that you stay away from
these frameworks for at least a year. Otherwise,

you'll only confuse yourself.Learn CSS...then

take shortcuts! </editors-note>
4. Use a Reset

6. Combine Elements
Elements in a stylesheet sometimes share
properties. Instead of re-writing previous code,
why not just combine them? For example, your

Most CSS frameworks have a reset built-in, but if

h1, h2, and h3 elements might all share the same

you're not going to use one then at least consider

font and color:

using a reset. Resets essentially eliminate

h1, h2, h3 {font-family: tahoma, color: #333}

browser inconsistencies such as heights, font

sizes, margins, headings, etc. The reset allows
your layout look consistent in all browsers.
The MeyerWeb is a popular reset, along
with Yahoo's developer reset. Or you could
always roll your own reset, if that tickles your
fancy.
5. Organize the Stylesheet with a Top-down
Structure

We could add unique characteristics to each of

these header styles if we wanted (ie. h1 {size:
2.1em}) later in the stylesheet.
7. Create Your HTML First
Many designers create their CSS at the same
time they create the HTML. It seems logical to
create both at the same time, but actually you'll
save even more time if you create

It always makes sense to lay your stylesheet out

the entire HTML mockup first. The reasoning

in a way that allows you to quickly find parts of

behind this method is that you know all the

your code. I recommend a top-down format that

elements of your site layout, but you don't know

tackles styles as they appear in the source code.

what CSS you'll need with your design. Creating

So, an example stylesheet might be ordered like

the HTML layout first allows you to visualize the

this:

entire page as a whole, and allows you to think of

your CSS in a more holistic, top-down manner.

1. Generic classes (body, a, p, h1, etc.)

2. #header
3. #nav-menu
4. #main-content

8. Use Multiple Classes

Sometimes it's beneficial to add multiple classes
to an element. Let's say that you have a <div>
"box" that you want to float right, and you've
already got a class .right in your CSS that floats

<editors-note> Don't forget to comment each

everything to the right. You can simply add an

section! </editors-note>

extra class in the declaration, like so:

/****** main content *********/

styles goes here...

You can add as many classes as you'd like

<div class="box right"></div>

2
3

(space separated) to any declaration.

4
5

/****** footer *********/

and class-names like "left" and "right." I will use

6
7

<editors-note> Be very careful when using ids

styles go here...

them, but only for things such as blog posts. How

come? Let's imagine that, down the road, you
decide that you'd rather see the box floated to

the LEFT. In this case, you'd have to return to

</editors-note>

your HTML and change the class-name - all in

order to adjust the presentation of the page. This
is unsemantic. Remember - HTML is for markup
and content. CSS is for presentation.

10. Use Shorthand

You can shrink your code considerably by using
shorthand when crafting your CSS. For elements

If you must return to your HTML to change the

like padding, margin, font and some others, you

presentation (or styling) of the page, you're doing

can combine styles in one line. For example, a div

it wrong!

might have these styles:

1

</editors-note>
9. Use the Right Doctype
The doctype declaration matters a whole lot on
whether or not your markup and CSS will

#crayon {

margin-left:

margin-right: 7px;

margin-top: 8px;

5px;

validate. In fact, the entire look and feel of your

site can change greatly depending on the

You could combine those styles in one line, like

DOCTYPE that you declare.

so:

Learn more about which DOCTYPE to use at A List

Apart.

#crayon {

2
3

margin: 8px 7px 0px 5px; // top, right, bottom, and

}

If you need more help, here's a comprehensive

guide on CSS shorthand properties.
11. Comment your CSS
Just like any other language, it's a great idea to
comment your code in sections. To add a
<editors-note>

comment, simply add /* behind the comment,

and */ to close it, like so:

I use HTML5's doctype for all of my projects.

1
1

/* Here's how you comment CSS */

<!DOCTYPE html>

"What's nice about this new DOCTYPE, especially,

12. Understand the Difference Between

Block vs. Inline Elements

is that all current browsers (IE, FF, Opera, Safari)

will look at it and switch the content into

Block elements are elements that naturally clear

standards mode - even though they don't

each line after they're declared, spanning the

implement HTML5. This means that you could

whole width of the available space. Inline

start writing your web pages using HTML5 today

elements take only as much space as they need,

and have them last for a very, very, long time."

and don't force a new line after they're used.

- John Resig

Here are the lists of elements that are either

inline or block:

span, a, strong, em, img, br, input, abbr, acronym

And the block elements:

1

div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Alphabetize your Properties

While this is more of a frivolous tip, it can come in
handy for quick scanning.
1

#cotton-candy {

color: #fff;

float: left;

You'll find that there are certain styles that you're

font-weight:

applying over and over. Instead of adding that

height: 200px;

margin: 0;

padding: 0;

width: 150px;

15. Make Use of Generic Classes

particular style to each ID, you can create generic

classes and add them to the IDs or other CSS
classes (using tip #8).
For example, I find myself using float:right and
float:left over an over in my designs. So I simply
add the classes .left and .right to my stylesheet,
and reference it in the elements.

<editors-note> Ehh... sacrifice speed for

slightly improved readability? I'd pass - but
decide for yourself! </editors-note>

.left {float:left}

.right {float:right}

3
14. Use CSS Compressors

<div id="coolbox" class="left">...</div>

CSS compressors help shrink CSS file size by

removing line breaks, white spaces, and

This way you don't have to constantly add

combining elements. This combination can

"float:left" to all the elements that need to be

greatly reduce the the file size, which speeds up

floated.

browser loading. CSS Optimizer and CSS

Compressor are two excellent online tools that
can shrink CSS.
It should be noted that shrinking your CSS can
provide gains in performance, but you lose some
of the readability of your CSS.

<editors-note> Please refer to editor's notes for

#8. </editors-note>
16. Use "Margin: 0 auto" to Center Layouts
Many beginners to CSS can't figure out why you
can't simply use float: center to achieve that
centered effect on block-level elements. If only it
were that easy! Unfortunately, you'll need to use
1

margin: 0 auto; // top, bottom - and left, right values,

to center divs, paragraphs or other elements in

your layout.

<editors-note> By declaring that both the left

AND the right margins of an element must be
identical, the have no choice but to center the
element within its containing
element. </editors-note>
17. Don't Just Wrap a DIV Around It

19. Hack Less

Avoid using as little browser-specific hacks if at all
possible. There is a tremendous pressure to make
sure that designs look consistent across all
browsers, but using hacks only makes your
designs harder to maintain in the future. Plus,
using a reset file (see #4) can eliminate nearly all

When starting out, there's a temptation to wrap a

of the rendering irregularities between browsers.

div with an ID or class around an element and

create a style for it.
1

20. Use Absolute Positioning Sparingly

<div class="header-text"><h1>Header Text</h1></div>

Absolute positioning is a handy aspect of CSS
that allows you to define whereexactly an

Sometimes it might seem easier to just create

element should be positioned on a page to the

unique element styles like the above example,

exact pixel. However, because of absolute

but you'll start to clutter your stylesheet. This

positioning's disregard for other elements on the

would have worked just fine:

page, the layouts can get quite hairy if there are

<h1>Header Text</h1>

Then you can easily add a style to the h1 instead

multiple absolutely positioned elements running

around the layout.
21. Use Text-transform

of a parent div.
Text-transform is a highly-useful CSS property
18. Use Firebug

that allows you to "standardize" how text is

formatted on your site. For example, say you're

If you haven't downloaded Firebug yet, stop and

go do it. Seriously. This little tool is a must
have for any web developer. Among the many

wanting to create some headers that only have

lowercase letters. Just add the text-transform
property to the header style like so:

features that come bundled with the Firefox

extension (debug JavaScript, inspect HTML, find

text-transform: lowercase;

errors), you can also visually inspect, modify, and

edit CSS in real-time. You can learn more about

Now all of the letters in the header will be

what Firebug does on the official Firebug website.

lowercase by default. Text-transform allows you

to modify your text (first letter capitalized, all
letters capitalized, or all lowercase) with a simple
property.
22. Don't use Negative Margins to Hide Your
h1
Oftentimes people will use an image for their
header text, and then either use display:none or a
negative margin to float the h1 off the page. Matt
Cutts, the head of Google's Webspam team, has
officially said that this is a bad idea, as Google
might think it's spam.

As Mr. Cutts explicitly says, avoid hiding your

just use the list as a text attribute. Lists are also

logo's text with CSS. Just use the alt tag. While

great for creating navigation menus and things of

many claim that you can still use CSS to hide a h1

the sort.

tag as long as the h1 is the same as the logo text,

I prefer to err on the safe side.

Many beginners use divs to make each element

in the list because they don't understand how to

23. Validate Your CSS and XHTML

properly utilize them. It's well worth the effort to

use brush up on learning list elements to

Validating your CSS and XHTML does more than

structure data in the future.

give a sense of pride: it helps you quickly spot

errors in your code. If you're working on a design

<editors-note>

and for some reason things just aren't looking

right, try running the markup and CSS

You'll often see navigation links like so:

validator and see what errors pop up. Usually

<a href="#">Home</a>

you'll find that you forgot to close a div

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Contact</a>

somewhere, or a missed semi-colon in a CSS

property.
24. Ems vs. Pixels
There's always been a strong debate as to
whether it's better to use pixels (px) or ems (em)
when defining font sizes. Pixels are a more static
way to define font sizes, and ems are more

Though, technically, this will work just fine after a

bit of CSS, it's sloppy. If you're adding a list of
links, use an unordered list, silly goose!
</editors-note>

scalable with different browser sizes and mobile

devices. With the advent of many different types

26. Avoid Extra Selectors

of web browsing (laptop, mobile, etc.), ems are

increasingly becoming the default for font size
measurements as they allow the greatest form of
flexibility. You can read more about why you
should use ems for font sizes in this thoughtful

It's easy to unknowingly add extra selectors to

our CSS that clutters the stylesheet. One common
example of adding extra selectors is with lists.
1

body #container .someclass ul li {....}

forum thread. About.com also has a great article

on thedifferences between the measurement

In this instance, just the .someclass li would have

sizes.

worked just fine.

<editors-note>Don't take me to the farm on

.someclass li {...}

this one - but I'd be willing to bet that, thanks to

browser zooming, the majority of designers are

Adding extra selectors won't bring Armageddon

defaulting to pixel based layouts. What do you

or anything of the sort, but they do keep your

think? </editors-note>

CSS from being as simple and clean as possible.

25. Don't Underestimate the List

27. Add Margins and Padding to All

Lists are a great way to present data in a

Different browsers render elements differently. IE

structured format that's easy to modify the style.

renders certain elements differently than Firefox.

Thanks to the display property, you don't have to

IE 6 renders elements differently than IE 7 and IE

29. Use Multiple Stylesheets

8. While the browsers are starting to adhere more

closely to W3C standards, they're still not perfect

Depending on the complexity of the design and

(*cough IE cough*).

the size of the site, it's sometimes easier to make

One of the main differences between versions of

smaller, multiple stylesheets instead of one giant

browsers is how padding and margins are

stylesheet. Aside from it being easier for the

rendered. If you're not already using a reset, you

designer to manage, multiple stylesheets allow

might want to define the margin and padding for

you to leave out CSS on certain pages that don't

all elements on the page, to be on the safe side.

need them.

You can do this quickly with a global reset, like so:

1

For example, I might having a polling program

* {margin:0;padding:0;}

that would have a unique set of styles. Instead of

including the poll styles to the main stylesheet, I

Now all elements have a padding and margin of

could just create apoll.css and the stylesheet only

0, unless defined by another style in the

to the pages that show the poll.

stylesheet.
<editors-note> However, be sure to consider
<editors-note> The problem is that, because

the number of HTTP requests that are being

EVERYTHING is zeroed out with this method,

made. Many designers prefer to develop with

you'll potentially cause yourself more harm than

multiple stylesheets, and then combine them into

help. Are you sure that you want every single

one file. This reduces the number of HTTP

element's margins and padding zeroed? If so -

requests to one. Also, the entire file will be

that's perfectly acceptable. But at least consider

cached on the user's computer. </editors-note>

it. </editors-note>
30. Check for Closed Elements First When
Debugging

28. When Ready, Try Object Oriented CSS

If you're noticing that your design looks a tad

Object Oriented programming is the separation of

wonky, there's a good chance it's because you've

elements in the code so that they're easier to

left off a closing </div>. You can use the XHTML

maintain reuse. Object Oriented CSS follows the

validator to help sniff out all sorts of errors too.

same principle of separating different aspects of

the stylesheet(s) into more logical sections,

You Might Also Enjoy...

making your CSS more modular and reusable.

Beginners

Here's is a slide presentation of how Object

Oriented CSS works:
From Nicole Sullivan.
If you're new to the CSS/XHTML game, OOCSS
might be a bit of a challenge in the beginning.
But the principles are great to understand for
object oriented programming in general.

20 HTML Forms Best Practices for

30+ PHP Best Practices for Beginners

24 JavaScript Best Practices for Beginners

30 HTML Best Practices for Beginners

Follow us on Twitter, or subscribe to

the Nettuts+ RSS Feed for more daily web

development tuts and articles

Name: Jeff Clifford B. Gatchalian

Yr & Sec: IV Descartes
Grading: 3rd Grading
Teacher: Mrs. Amy Lynn Magdasoc
1)The things that I have learned are...
This week we had discussed all about the Resultant
Vectors. It have 3 methods; the triangle method, the
parallelogram method and the polygon method. At first I
thought that it is really difficult to understand because of
the tail to tail method and head to tail method. But
when Maam Magdasoc discussed it to me, I realized that
it is very simple. But it is difficult to determine whether it
is a triangle, parallelogram, or a polygon method.
2)What are the most meaningful experience I gained this week?
When we perform the Lab learning no. 3 wherein we
have to graph the those given in the paper.
3)What are my plans to improve what I have learned?
-Reviewing my notes and scan again the lab learning
no. 3 so that i can remember how to graph those 3
methods.
4)A word that describe what I feel for the whole week is...
Hectic, because of our schedule after of the subject
physics we had to go to the function hall so that we can do
some rehearsals for our play.
.

3rd
Grading

Period