Style with ease by Creating Basic Elements + Stacking Classes

This is not ground breaking code but it is meant to be a quick tip to help simplify and create an easy way to recycle your style code or just add quick style to one chunk of content. We use DRY (don’t repeat yourself) in our logic but what about all of our CSS class?

How many times do you have to create a quick class to format something and then you have to tweak it because another chunk of content just needs something a little different style? Well here we go just like you use reset.css files to level the playing field you can also do this too.

The first concept to keep in mind is that you can stack classes on each other.

<div class="first second third fourth">

Let’s create bunch of simple classes like this.

.blue {
 color: #0000ff;
}
.red {
 color: #ff0000;
}
.underline {
 text-decoration: underline;
}
.italic {
 font-style: italic;
}
.bold {
 font-weight: bold;
}
.small {
 font-size: 10px;
}
.medium {
 font-size: 14px;
}
.large {
 font-size: 16px;
}
.xlarge {
 font-size: 18px;
}
.left { 
  float: left; 
}
.right {
 float: right;
}
img .left { 
  float: left; 
  padding: 0 0 0 25px; 
}
img .right { 
  float: right; 
  padding: 0 25px 0 0;
 }
img.leftshadow {
  float: left;
  margin: 8px 25px 0 0;
  padding: 10px;
  border: 1px solid #cccccc; 
  -moz-box-shadow: 1px 1px 5px #cccccc;
  -webkit-box-shadow: 1px 1px 5px #cccccc; 
}
img.rightshadow {
  float: right;
  margin: 8px 0 0 25px;
  padding: 10px;
  border: 1px solid #cccccc; 
  -moz-box-shadow: 1px 1px 5px #cccccc;
  -webkit-box-shadow: 1px 1px 5px #cccccc; 
}
.alpha {
 margin-left: 0;
 padding-left: 0;
}
.omega {
 margin-right: 0;
 padding-right: 0;
}

Simple stuff right? Then you can just stack classes…

If you want something to be smal, italic, you just do this

<div class="small italic">

and it will produce

This is small and italic text

if you want something to product red large bold italic you do this

<div class="large red bold italic">

and it will produce

This is large, red, bold and italic text

Like I stated earlier this is not ground breaking code but it helps once you get all your basic classes setup when you need a quick format or add some quick style.

Now it is up to you to just get creative…

This is a old post. This info might be outdated!
Menu