What Are Good Styles to Use in All CSS Stylesheets?

posted by Alex Grande

These are a list of styles you can't live without. I suggest using these in all your stylesheets to help in a variety of situations. Because headers matter A LOT in SEO. It is important to avoid using h1, h2, h3, etc for ambiguous content such as "Contact Me" or "Support" titles that sit at the top of your page. What's more important for headers is to use them for things specific to your site. For The True Tribe we would use headers for "CSS Good Practices" or "Alex Grande" , but not "Our Heros." At least we should... The way around this is to make classes called h1, h2, h3, etc and give them properties that are similar to headers.

.h1 {
   font-size: 22px;
   font-weight: 600;
}

.h2 {
   font-size: 20px;
   font-weight: 600;
}

.h3 {
   font-size: 18px;
   font-weight: 600;
}

.h4 {
   font-size: 16px;
}

.h5 {
   font-size: 14px;
}

Other font related styles include, but not limited to...

.bold {
   font-weight: 600; /* I use this one a lot! Instead of using the b tag use 
I'm Bold...that's what she said...*/
}

.underline {
   text-decoration: underline;
}

For positioning styles... This is when all the children of a parent are removed from the page flow and need something to fill the wrapper parent.

.clearFix { 
 clear: both;
 height: 0;
 width: 0;
 border: 0;
}

There are more but these are ones I use almost everyday for my clients. I hope you'll find it useful as well.