Advertisement
HTML & CSS

Quick Tip: Save Time by Using Multiple Classes

by

One of the most exhausting aspects of web development is writing out endless amounts of CSS styling for various elements - that differ only slightly in style from one another. It has taken the life (or will) of many a talented designer. Well, why give each element its own unique CSS entry, when you can mix match and add re-usable CSS styling to elements using multiple CSS classes?

Step 1: Set Up The CSS

Lets start with identifying and writing out some of our most common CSS markup. We'll set them up as individual styles. The ones that we've set up here are the most basic, but the same technique can be applied to even the coolest CSS 3 properties.

.primaryColor {
color: blue;
}

.articleImage {
border: 1px solid #292929;
padding: 5px;
}

.standOut {
font-size: 22px;
}

.important {
font-weight: bold;
}

.floatRight {
float: right;
}

Step 2: Applying The Classes In Our Document

  • <p class="primaryColor important">This text will be blue and bold</p>
  • <img src="#" class="articleImage floatRight">This image will be floated to the right, and will have some padding and a border.</p>
  • <p class="standOut">This text will be huge</p>
  • <p class="primaryColor standOut important">This text will be blue, 22px large, and bold. </p>

Why It's Useful

This can be a massive help, especially when designing layouts... you can use one class to define the size and width, and another class to define the positioning. Hope this helped!

Editor's Note: Keep in mind that, in some of the older browsers - meaning older than IE 6 - this "multiple classes" method will fail. What are your thoughts on this approach? P.S. Have a killer quick tip? Email us and we'll talk.

Related Posts
  • Web Design
    Typography
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…