One of the consistent things I notice while teaching web is that a lot of students understandably have a hard time lining up columns, setting up to create columns and understanding the box model and how it relates to positioning columns in HTML and CSS. Since this seems to be a pretty common hurdle for students I encounter, I think it’s safe to say that a lot of people just learning HTML and CSS for the first time find the topic of creating a 1 to 6 column layout to be challenging and confusing too. I also haven’t seen much in the way of online courses for beginners that really digs into using columns, so here’s my take on it.

The Premise

This is going to be a straight up no responsive code tutorial that will assume your layout has 960px of width to work with. This means we’re not worried about how the columns will scale or how they’ll look on a tablet or a phone. I’m only focusing on fixed widths there to keep things simple. Here’s some basic knowledge you should have first:

• How to set up an HTML document and connect a CSS Stylesheet to it.
• An understanding of <div> tags and some other basic HTML tags such as <p>, <a>, <strong>, <em>, etc.
• A basic understanding of CSS and how CSS Rules are written (ex. the difference between declaring a class or ID selector).

Even if you’re missing some of the stuff in the above list, don’t worry. I’ll try to cover as much as I can as we go along. At this stage, you should also have a code editor that you prefer to use. I tend to recommend either Brackets or Sublime Text for HTML and CSS.

The Box Model and Thinking in Rows & Columns

The Box Model is the basic diagram of how browsers interpret elements on a typical website. It also tells you, the coder, how various components of an element can be manipulated. This is the box model:

The element or grey box on the inside represents your content, in other words, your text, images and anything else you place on the screen is considered to be the element. Just outside of the element, the padding wraps around it. Padding moves the element away from the edges of the box container. Outside of padding is border, it resides between padding and the outermost box model component, border is typically used to–well, create a border around your element and its padding. Finally, on the outside is margin. Margin is used to nudge elements away from each other. Every time you have to move one element around the screen, you are probably going to want to use Margin. Margins are also what we’re, incidentally, going to be using to create our columns today.

I want you to take a look at this next diagram which illustrates how columns and rows are laid out, this diagram goes up to 4 columns, but you can pretty much extrapolate, 5, 6, 7, 8, etc. column layouts from this:

Rows go down, columns go across. Easy. The spacing in between each box in the above diagram represents margins. Before we get to writing our code, remember that when we want to space elements away from other elements, or move elements around on the screen, we tend to use margins.

Setting Up the HTML File

Below, I have a bare bones HTML file with a bunch of dummy text that we’re going to use for our layout. We’ll be building all our columns on the same page to also give you some practice using floats. Fun, huh? I’ve outputted an HTML page for you to download here: Columns Demo Dropbox (HTML/CSS)

Or you can just copy and paste these into your code editor, this is your HTML page to start:

There shouldn’t be anything too surprising to you at this point. We have a basic HTML document set up, within the head tags, I have declared a title for this page and used to associate our HTML document with our Stylesheet. style.css will power how our columns will be laid out, it is sitting in a folder called /css. Within the rest of the HTML, I have a bunch of comments to tell you where we’re going to start dealing with certain columns, and under each comment is dummy text set inside of tags. All the elements that are visible are wrapped inside of .main. It is always a good idea to wrap your site inside of a container such as .main so you have a consistent basis to declare widths, margins, padding, and border. Typically this containing element has the general width of your website, everything falling inside of it therefore takes the containing element’s width and basis their own widths, margins, padding and borders on it. This should become more evident as we work through the demo. This is your CSS document to start, place your CSS document into a folder called /css:

In our CSS file, we’re importing Droid Serif from Google Web Fonts on Line 3, and setting up basic styling for the body and .main elements from Line 5 – 16. If some of that seems unfamiliar to you, don’t stress about it. This is about columns, and those elements and properties are just there to make our file look a little nicer so we aren’t staring at an unformatted document. If you’re going to be re-using this demo for one of your projects, I suggest removing my styling from Line 1 – 16 so you start off with a blank slate.

Go ahead and open up your HTML file in a browser and take a look at it. Our masterpiece should resemble something like this:

See the Pen EjOwYb by Khanh (@ironion) on CodePen.

OK, let’s make our first column happen.

The One Column Layout

We’ll start off easy. Let’s assume you have a one column layout. We’re going to go into our HTML first, and write in a <div> for our first column. On Line 12 of your HTML document, append the code that is there with the following:

<div class="column-1">
<p>Sleep on keyboard. Poop in litter box, scratch the walls cough furball. Sleep on dog bed, force dog to sleep on floor pelt around the house and up and down stairs chasing phantoms poop on grasses and love to play with owner's hair tie so lounge in doorway. Kick up litter chase laser meow all night having their mate disturbing sleeping humans and mark territory.</p>
</div>

.column-1 {
  width: 960px;
  background-color: #b3c8cd;
}

So nothing should be shocking you at the moment, we’ve set our single column to be the same width as our .main container. Therefore, we can see, when we preview the page, that our first div will stretch from one side of the .main container to the other side. Now, we’re going to want to modify this a little bit, because the vast majority of the time, you don’t want your content to be touching the edges of your containing <div>. Let’s amend the CSS code for .column-1 a little, to make it look like this:

.column-1 {
  width: 960px;
  background-color: #b3c8cd;
  padding: 20px;
}

Take a look at your page in a browser now, you’re going to notice that our box, which fit so neatly into .main before, now falls outside of it, the instant we added padding:

Adding padding: 20px broke .column-1 out of .main.

Think back to the box model for a bit, remember that padding is used to move content away from the edges of a container. When we added padding to our .column-1 element, we’re actually adding 20px to the left, right, top and bottom of the container. That means we actually added 40px worth of spacing to our element which was already 960px. So, to resolve the issue with our padding screwing up our element, we need to remove the 40px we used for padding from .column-1’s total width of 960px. Doing so will give us this CSS:

.column-1 {
  width: 920px;
  background-color: #b3c8cd;
  padding: 20px;
}

And .column-1 will fall neatly back into .main:

If you add padding or border to your container, you will need to make room for it by subtracting from the total width it’s supposed to take up.

So, you might be wondering, “If I added a border to my element, do I also have to account for that border in the total width? Yes, you do. Let’s say you added a 5px border around your content. That means you need to remove 10px from your total width and will end up with 910px of total width if you want your container to fall within .main. Heck, let’s do that right now:

.column-1 {
  width: 910px;
  background-color: #b3c8cd;
  padding: 20px;
  border: 5px solid #557f84;
}

Check it out and see how we removed 10px (5px for left and right sides of the container) and our element still falls well within our .main container. Let’s move on to creating a simple two column layout now.

The Two Column Layout

In your HTML document, and under the Two Column Layout comment, append the code with this:

  <div class="column-2-left">
            <p>Sleep on keyboard. Poop in litter box, scratch the walls cough furball. Sleep on dog bed, force dog to sleep on floor pelt around the house and up and down stairs chasing phantoms poop on grasses and love to play with owner's hair tie so lounge in doorway. Kick up litter chase laser meow all night having their mate disturbing sleeping humans and mark territory.</p>
  </div>
  <div class="column-2-right">
            <p>Get video posted to internet for chasing red dot mew but jump off balcony, onto stranger's head. Meow spread kitty litter all over house and plan steps for world domination yet favor packaging over toy, spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce then cats take over the world hate dog. Chew iPad power cord if it fits.</p>
  </div>

We’re declaring two divs and wrapping our two paragraphs with them. The first div wraps the first paragraph and we gave it a class of .column-2-left. The second div we gave a class of .column-2-right. The first paragraph now contained inside of .column-2-left will be sitting on the left side of the .main container, and the second paragraph inside of .column-2-right will be sitting on the right side of the .main container. The Logical Order of Things Now, it’s pretty obvious to some, but it needs to be mentioned that you should set up your HTML elements to contain content in a logical order. Typically that means in the order that you would normally read a page out of a book, from left to right, top to bottom. That means that if you had two paragraphs you want to display inside of columns, that the first one should be set on the left because people are likely to read that one first, and the second paragraph should be set on the right because most people are going to read it second. With that having been said, let’s dive into style.css. Add this code under the Two Column comment in style.css:

.column-2-left {
  width: 430px;
  background-color: #e0ddcd;
  padding: 20px;
  border: 5px solid #938d6d;
}

.column-2-right {
  width: 430px;
  background-color: #e0ddcd;
  padding: 20px;
  border: 5px solid #938d6d;
}

When you preview that in a browser, it’s going to look something like this:

Two columns stacked on top of each other.

Those two columns are stacked one on top of the other, which is probably not what you’re looking for. The reason why this is happening is because of the concept of Block and Inline elements in HTML. Block elements can be considered as elements that take up the entire width of a container. These elements will always try to stack versus flow. Inline elements will flow with the text and content that you place on the page. Block elements, such as <div>, <h1>, etc. will not automatically sit side-by-side, even when you’ve created enough space for them to do so. You need to manually tell them to sit side-by-side by using one of several techniques. The most commonly seen is the CSS property: float. Float takes four values: left, right, none, and inherit. We’re mostly concerned with float: left and float: right today, as these will allow us to position our columns side-by-side instead of the mess you see in the image above. I want you to apply floats to .column-2-left and .column-2-right:

.column-2-left {
  width: 430px;
  background-color: #e0ddcd;
  padding: 20px;
  border: 5px solid #938d6d;
  float: left;
}

.column-2-right {
  width: 430px;
  background-color: #e0ddcd;
  padding: 20px;
  border: 5px solid #938d6d;
  float: right;
}

Check out our layout in a browser now and you should be seeing something like this:

Much better.

Sometimes what you see above will work perfectly fine for you, sometimes, you want a bit of margin in between those two containers so they’re not touching each other. I’m going to apply a 20px margin between the above containers. Remember, every time we add margin, border, or padding to a container, we have to take away from its width. Otherwise, it’ll fall outside of its container. So, since we want 20px of space between .column-2-left and .column-2-right, I need to subtract 10px of width from both of them, then declare margin-right: 10px on .column-2-left and margin-left: 10px on .column-2-right. Just like this:

.column-2-left {
 width: 420px;
 background-color: #e0ddcd;
 padding: 20px;
 border: 5px solid #938d6d;
 float: left;
 margin-right: 10px;
 }

.column-2-right {
 width: 420px;
 background-color: #e0ddcd;
 padding: 20px;
 border: 5px solid #938d6d;
 float: right;
 margin-left: 10px;
 }

Notice I removed 10px from the width on both of the columns to account for the margin we just added? You should see something like this now:

Looking good.

Let’s create a three column layout now!

The Three Column Layout

Let’s tackle our three column layout now. You should be somewhat familiar with the drill, let’s append our HTML and add in our <div> tags for our columns. One for each paragraph, first paragraph is left, second is in the middle and third is going to be on the right. Under the Three Column Layout comment change what is there with this:

<div class="column-3-left">
            <p>Sleep on keyboard. Sleep on dog bed, force dog to sleep on floor pelt around the house and up and down stairs chasing phantoms poop on grasses and love to play with owner's hair tie so lounge in doorway. Kick up litter chase laser.</p>
  </div>
            
  <div class="column-3-middle">
            <p>Get video posted to internet for chasing red dot mew but jump off balcony, onto stranger's head. Meow spread kitty litter all over house and plan steps for world domination yet favor packaging over toy, spot something, big eyes.</p>
  </div>
            
  <div class="column-3-right">
            <p>Shake treat bag stand in front of the computer screen mew play riveting piece on synthesizer keyboard intently sniff hand rub face on everything meowing non stop for food. Destroy the blinds. Parts with tongue then lick owner's face.</p>
  </div>

Diving into our CSS now, add this code under the Three Column comment:

.column-3-left {
  width: 270px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
}

.column-3-middle {
  width: 270px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
}

.column-3-right {
  width: 270px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: right;
}

In the above code, we’re floating the left and middle columns to the left, and the last column to the right. Despite what most would assume, there is no such thing as float: middle. Which means dealing with columns in the middle will have to be settled with margins while using either float: left or float: right. Let’s add in our margins, but let’s think about it a little first. We want 20px of spacing between each column. That means, that .column-3-left is going to declare margin-right: 10px, and .column-3-right is going to declare margin-left: 10px. That leaves .column-3-middle which will need to declare margin-left: 10px and margin-right: 10px in order to cover the space on both sides of it. Also, don’t forget to remove the appropriate width from each of your columns when you’re declaring a margin between them:

.column-3-left {
  width: 256.65px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-right: 10px;
}

.column-3-middle {
  width: 256.65px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-3-right {
  width: 256.65px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-left: 10px;
}

Yes, you’re looking at a decimal pixel set of columns up there (also called a floating value pixel) so that all three will fill the width for a .main with 960px of width. That’s how the more precise math breaks down for this particular layout. Now, this is what works if we were really concerned with having the exact same width for each column in a fixed width layout. Half-pixels or floating value pixel can be problematic because they can sometimes cause unintended results, usually while working with images, printing and some tranformations in CSS. So, let’s try to adjust our values a little to avoid the use of the floating value pixels. Normally what I would do is one of three things: 1) Remove the floating value pixels and allow the extra pixels in spacing in the margin 2) apply the full pixels to the left and right columns, 3) add two full pixels to the center column, like this:

.column-3-left {
  width: 256px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-right: 10px;
}

.column-3-middle {
  width: 258px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-3-right {
  width: 256px;
  background-color: #d5edcd;
  padding: 20px;
  border: 5px solid #67a155;
  float: left;
  margin-left: 10px;
}

It’s not too noticeable to the vast majority of users that the center column is two pixels wider than the left and right columns and you avoid using a decimal value for your pixel widths–if that was a concern. Should you be worried about floating value pixels? For a fixed width layout, that all depends considering that a fixed width layout will always force you to either round up your pixels or settle for the floating value pixels so it becomes a question of how precise you want to be, or if you can settle for knowing your columns may have varying widths by a couple of pixels in certain circumstances, if you need precisely the same width columns and don’t want to use floating value pixels, allow for the spacing in your margins. For responsive layouts you are likely to be using more precise values and can allow the browser to automatically calculate values for you using the calc() function in CSS. So for now, don’t stress too much about using decimal values vs. evening out the values. All right, that’s enough of that. Let’s move on to our four column layout now.

The Four Column Layout

You should know the drill now, this time we have two middle columns, one left and one right. The second and third paragraph under the Four Column Layout comment should be wrapped using a <div> with the same class of .column-4-middle. So under the comment Four Column Layout, add this:

  <div class="column-4-left">
            <p>Sleep on keyboard. Poop in litter box, scratch the walls cough furball. Sleep on dog bed, force dog to sleep on floor pelt around the house and up and down stairs chasing phantoms poop on grasses and love to play with owner's hair tie so lounge in doorway.</p>
  </div>
  
  <div class="column-4-middle">
            <p>Get video posted to internet for chasing red dot mew but jump off balcony, onto stranger's head. Meow spread house and plan steps for world domination yet favor packaging over toy, big eyes, crouch, shake butt. Chew iPad power cord if it fits.</p>
  </div>
            
    <div class="column-4-middle">
            <p>Shake treat bag stand in front of the computer screen mew play riveting piece on synthesizer keyboard intently sniff hand rub face on everything meowing non stop for food. Destroy the blinds. Make meme, make cute face then lick owner's face.</p>
  </div>
            
  <div class="column-4-right">
            <p>Leave dead animals as gifts play time, or scamper, sweet beast. Why must they do that cat snacks damn that dog leave dead animals as gifts sleep nap so stretch. Roll on the floor purring your whiskers off paw at your fat belly. Put toy mouse in food bowl.</p>
  </div>

We’re reusing the column-4-middle class for the second and third paragraphs. This is because I anticipate those two will have pretty much the exact same styling and width values. So it doesn’t make sense to declare a different class for each because that would be extra work to style two classes in exactly the same way versus if we just reused the one class to save ourselves some. Going into our CSS, here’s what we’re going to end up with:

.column-4-left {
  width: 175px;
  background-color: #f5d7ce;
  padding: 20px;
  border: 5px solid #cb785e;
  float: left;
  margin-right: 10px;
}

.column-4-middle {
  width: 175px;
  background-color: #f5d7ce;
  padding: 20px;
  border: 5px solid #cb785e;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-4-right {
  width: 175px;
  background-color: #f5d7ce;
  padding: 20px;
  border: 5px solid #cb785e;
  float: right;
  margin-left: 10px;
}

Three CSS Rules to style four columns is a bargain. Outside of that, there’s nothing very surprising here so long as we got our one, two and three column layouts working out, the four column version won’t have any curve balls for us. The only thing to note is the re-use of the middle column CSS Rule to save on time and code we have to write. Let’s head on over and deal with five columns now.

The Five Column Layout

All right, moving things a long a little faster, here’s our HTML. Again, we’re going to be reusing the column-5-middle class because all of those should have the same styling and widths, therefore, no reason to write a different class for each:

  <div class="column-5-left">
            <p>Kick up litter chase laser meow all night having their friend disturbing the sleeping humans and mark this territory.</p>
  </div>
            
  <div class="column-5-middle">
            <p>World domination yet favor packaging over toy, spot something, big eyes, big eyes, purr, crouch, shake butt.</p>
  </div>
            
  <div class="column-5-middle">
            <p>Rub face on everything meowing non stop for food. Destroy the blinds. Make meme, make cute face then lick owner's face.</p>
    </div>
  
    <div class="column-5-middle">
            <p>Rub face on everything meowing non stop for food. Destroy the blinds. Swish tail, pounce and roll then lick owner's face.</p>
    </div>
            
  <div class="column-5-right">
            <p>Why must they do that cat snacks sleep nap so stretch. Mark territory. Chase mice. Roll on the floor purring your whiskers off paw.</p>
  </div>

Here’s our CSS. Nothing surprising again, we’re just setting up more columns now and adjusting the values of our widths to account for padding, border and our margins:

.column-5-left {
  width: 126px;
  background-color: #e7e6f8;
  padding: 20px;
  border: 5px solid #c2beeb;
  float: left;
  margin-right: 10px;
}

.column-5-middle {
  width: 126px;
  background-color: #e7e6f8;
  padding: 20px;
  border: 5px solid #c2beeb;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-5-right {
    width: 126px;
  background-color: #e7e6f8;
  padding: 20px;
  border: 5px solid #c2beeb;
  float: right;
  margin-left: 10px;
}

The bottom of your document should look something like this now:

Three, four and five column layout.

Now, the six column layout should be a snap at this point. Or at least you should be able to suss it out for yourself. Go ahead and try it out on your own before moving onto the answer below. If it worked, great!

The Six Column Layout

Most of the layouts I’ve encountered don’t go further than six columns, but you never know when you might encounter a seven, eight, nine, ten, etc. column design. The principles we’ve gone over in this tutorial would work for all of them. Just remember to adjust your values based on how much width you have, use your floats, and never write more classes than absolutely necessary. Here’s our HTML for the six column layout:

  <div class="column-6-left">
    <p>Chasing phantoms and love to play with owner's hair.</p>
  </div>

  <div class="column-6-middle">
    <p>World domination yet favor packaging over toy.</p>
  </div>

  <div class="column-6-middle">
    <p>Rub face on everything meowing for food all the time.</p>
  </div>

  <div class="column-6-middle">
    <p>Purr and roll around batting toy. Destroy the blinds.</p>
  </div>

  <div class="column-6-middle">
    <p>Make meme, make cute face bathe self then lick owner.</p>
  </div>

  <div class="column-6-right">
    <p>Why must they do that cat snacks sleep nap so stretch.</p>
  </div>

And here’s our CSS:

.column-6-left {
  width: 94px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: left;
  margin-right: 10px;
}

.column-6-middle {
  width: 93px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-6-right {
  width: 94px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: right;
  margin-left: 10px;
}

Note I allowed for additional width on my left and right column. Just to demonstrate that you can allow for additional spacing between margins in order to void floating value pixels:

.column-6-left {
  width: 93px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: left;
  margin-right: 11px;
}

.column-6-middle {
  width: 93px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.column-6-right {
  width: 93px;
  background-color: #d7ede9;
  padding: 20px;
  border: 5px solid #5e9d92;
  float: right;
  margin-left: 11px;
}

All in all, we should have something that looks like this when we’re all done: See the Pen VLVMZE by Khanh (@ironion) on CodePen.

Here’s our finalized HTML:

And our finalized CSS:

If you’d like to download the completed version of this demo here you go: Columns Demo Finished (HTML/CSS)

A Note About Clearing Your Floats

Also keep in mind that our layout doesn’t take into consideration the need to clear your floats when you use them. Clearing occurs after floating as it allows you to remove the float property from subsequent elements that may not need it. Failing to clear floats will cause elements following your floated elements to attempt to sit themselves in the rift of space created by your float properties. To declare a clear, you call the CSS clear property with a value of both. Like this:

.footer {
clear: both;
}

In the above code, your clear: both; declaration will effectively tell the element with a class of .footer to clear and disregard all the floats you declared on the elements that preceded it. In days gone by (read: a couple of years ago), people still created elements specifically geared towards clearing. Nowadays, may coders clear the element following the float if they don’t need the float to affect it.

Hooray! We’re done with our layout, now you should have six rows, each with a varying amount of columns that fall neatly into a 960px width total container. There are column generators and other generation resources you could use for this, but it’s better to learn by writing things from scratch before we resort to automation. With CSS3 out, there are some alternative and neat ways to create columns too, such as using the CSS column property, which I’ll cover in another tutorial. With that having been said, I’ve linked to an older generator that still deals with fixed width columns and another site that will detail how floating and clearing works for positioning elements and more.

Resources

Page Column Generator
Shaye Howe, Positioning Content

A CSS Attribute Selector, in its most simple format looks like this: selector[attribute]

Its purpose is exactly as it sounds, it allows you to select an element based upon its attribute and using css attributes selectors is exactly what we’re talking about today. While you might be wondering how or why that’s useful, given that most attributes within HTML can already be selected by just declaring that attribute, the CSS Attribute Selector can extend your selection abilities as well as allow you to specify precise values and custom attributes. That, and the most basic Attribute Selector indicated above is far from the only one that exists out there. In this tutorial, we’re going to explore the different types of attribute selectors and the interesting and useful implementations for each.

Selector[Attribute]

This attribute selector works with an element selector and is typically expressed inside of square brackets. Usually you use this to select the attribute of the element instead of the assigned value. An example:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
 <p>little ball of fur.</p>
 <p title="kitty">Sleepy Kitty, Happy Kitty,</p>
 <p>purr, purr, purr.</p>

CSS:

p[title] {
 color: #de858a;
 font-style: italic;
 font-weight: 700;
 }

In the above code, we declare a <p> with a title attribute (you can check out other types of attributes available in HTML here: MDN, HTML Attribute Reference). Our title attribute takes “kitty” as its value, but that isn’t relevant yet here. Within our CSS, we target the span attribute using p as our general selector and declare [title] immediately after it. We style, therefore, only the line of text containing <p> with an attribute of title. It should look like this:

See the Pen General Attributes Selector by Khanh (@ironion) on CodePen.

Selector[Attribute=”Value”]

This more specialized attribute selector targets a specific attribute assigned to an element with an equally specific value assigned to the attribute. For example: HTML:

<p>Warm Kitty, Soft Kitty,</p>
    <p>little <a href="#ball">ball of fur</a>.</p>
    <p>Sleepy Kitty, <a href="#happy">Happy Kitty</a>,</p>
    <p>purr, purr, purr.</p>

CSS:

a[href="#ball"] {
  color: #de858a;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

In the code above, we declared an href attribute with a value of #ball (which, in our example, won’t seem to do anything when clicked). In our CSS, we declared a as the element selector and specified [href] as the attribute and go on to further specify that href should have a value of #ball before assigning the styling. Note that there is another <a> with an href attribute in our HTML, but it is unaffected. Check out the attribute selector with value example:

See the Pen Attribute With Value Selector by Khanh (@ironion) on CodePen.

Selector[Attribute^=”Value”]

This attribute selector will locate any attribute beginning with whatever the value is specified as. This is useful for detecting things such as keywords within your copy, links, images, downloads, etc. because it looks for whatever the value is at the send of a string. A string is a statement, sentence, a URL, a series of characters like “Hello, how are you?”, or “http://www.google.com” or “3479 Winding Hollow Way”. Here’s an example of usage:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
<p>little <a href="https://en.wikipedia.org/wiki/Warm_Kitty">ball of fur</a>.</p>
<p>Sleepy Kitty, Happy Kitty,</p>
<p>purr, purr, purr.</p>

CSS:

a[href^="https"]:after {
  font-family: FontAwesome;
  top: 0;
  left: -5px;
  content: " \f0a9";
}

The above code declares an <a> with a link directed to the Warm Kitty Poem Wikipedia page. In the CSS, we are using the caret character to indicate that we want CSS to look for anything with a value of “https” if it appears first in a string of an href attribute. Some of you may recognize caret by its other name, the circumflex. Here’s what this one looks like:

See the Pen Attribute Selector Beginning of String by Khanh (@ironion) on CodePen.

Selector[Attribute$=”Value”]

Here’s a good one that’s very useful for targeting specific file types that happen to be linked or loaded through HTML. I’ve seen this one used a lot to indicate different download types (something I really should write into my own site). The $ tells CSS to look for the value at the end of a string. Here’s its implementation:

HTML:

<p>Warm Kitty, Soft Kitty,</p>
    <p>little <a href="http://www.google.com">ball of fur</a>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><a href="#.pdf">purr, purr, purr.</a></p>

CSS:

a[href$=".pdf"]:after {
  font-family: FontAwesome;
  top: 0;
  left: -5px;
  content: " \f019";
}

Up there, we declared a PDF to be downloaded when someone clicks on the purr, purr, purr portion in HTML. Within our CSS, we target specifically the links that end with .pdf. Notice, when you run it, that it doesn’t detect the link that ends with .jpg. Here it is in action:

See the Pen Attribute Selector End of String by Khanh (@ironion) on CodePen.

 Selector[Attribute*=”Value”]

The use of the asterisk here detects if the value appears anywhere within the attribute. You can use this one whenever you might want to highlight a specific word, link or other element. Like this: HTML:

 <p>Warm Kitty, <span title="great to snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats are like this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats always do this">purr, purr, purr.</span></p>

CSS:

span[title*="cat"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

See how only the span titles with an instance of the word “cat” are selected and subsequently affected? Here’s the visual:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

There are a couple more attribute selectors that I rarely ever use, but exist within CSS. I’ll go over these now.

Selector[Attribute|=”Value”]

The bar targets attributes that contain the value immediately followed by a dash. For example: cart-port, red-wine, salad-dressing. This might be useful if you have attributes that are required to have dashes in them, such as file names and certain Classes and Methods in some frameworks. Here’s an example of this one: HTML:

<p>Warm Kitty, <span title="great to snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats are like this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats-always do this">purr, purr, purr.</span></p>

CSS:

span[title|="cats"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

And here it is in action:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

Selector[Attribute~=”Value”]

The tilde will target attributes that contain the value in a list, even if that value appears in a space separated list. Like this:

HTML:

<p>Warm Kitty, <span title="great to always snuggle">Soft Kitty</span>,</p>
    <p>little <span title="cats enjoy this">ball of fur</span>.</p>
    <p>Sleepy Kitty, Happy Kitty,</p>
    <p><span title="cats always do this">purr, purr, purr.</span></p>

CSS:

span[title~="always"] {
  color: #663750;
  font-weight: 700;
  border-bottom: 2px solid #663750;
}

Up there, we have the word ‘always’ appearing in the title attribute in two spans. When we run the code, we see that it searches, locates and highlights those spans with always, regardless of where always is on a list. I have a hard time coming up with a reasonable situation to use this one, but if you have any ideas, feel free to let me know! Here it is in an example:

See the Pen Attribute Selector Contains A Value by Khanh (@ironion) on CodePen.

And there you have it, Attribute Selectors in a nutshell. A lot of the time, many of these selections can be done in Javascript. I’m sure the debate is still out there, but I’m of the opinion that CSS is faster and puts less load on the CPU. So any time I can use CSS to accomplish something of equivalent function instead of JS, I tend to take that route.

Resources

30 CSS Selectors You Must Memorize, TutsPlus
MDN, Attribute Selectors
CSS Tricks, [Attribute]

I’m going to take a moment to explain a CSS concept that tripped me up when I first heard about it and started using it: nth-child. This is a really basic and quick overview of the nth-child class so it won’t go into any specifics or lots of details about the philosophy behind the pseudo class.

It does assume that you already understand basic CSS terminology (ex. you know what a pseudo class is, you understand how to write CSS). So without further ado.

nth-child sounds like a B-List horror or sci-fi movie, but it is actually a CSS concept that allows us to select multiple elements at once by using numbers and some simple algebraic equations. The :nth-child pseudo class allows you to target specific items, elements and even a chain of elements based on a little bit of math. For now, let’s focus on the simplest nth-child declaration:

ul li:nth-child(4) {
	color: #89f89f;
}

The CSS above uses nth-child to search for the fourth list or LI item and make only that fourth item the color of #89f89f. You can change the number 4 to any other number. For example if you changed the number from 4 to 5, and it will change only the fifth item to become the #89f89f color instead.

Moving on to more complicated nth-child classes we need to do a bit of light math. Most notably; algebra. nth-child pseudo classes allow us to target specific elements inside of another element as we saw above, but it can also allow us to target chains of elements. For example:

ul li:nth-child(3n+1) {  
  color: #89f89f;
}

The above CSS rule will change the color of every third list item to #89f89f. But how is it doing that and what is this crazy algebra formula for?

The formula 3n+1 can also be expressed as (3xn)+1. In this case, you’d have the first selection for every third item. If you’re like me, and think this all sounds way more complicated than it should be and numbers give you nightmares, then don’t worry. Thankfully there’s a trick to figuring out how nth-child works without resorting to too much math.

Here’s the trick: Think of the 3n portion in the above equation as the pattern or how many you want. Think of the +1 portion in the above equation as the first number to start the pattern.

So if we had 3n+1, nth-child will start the pattern at the first item according to the +1 portion, then for every third item according to the 3n portion, it will affect those.

Here’s another example that we can walk through:

ul li:nth-child(4n+2) {  
  color: #6699ff;
}

In the above example, the second list item will have the color of #6699ff according to the +2 portion of the formula. Then every fourth list item will be of the color #6699ff because of the 4n portion of the formula.

Some very awesome people have created a tool called the :nth Tester to illustrate how the formula works. You can access this tool here: :nth Tester

Pseudo classes can throw a few people for a loop, but it is important to understand how they work because they come in handy if you were to dabble in jQuery, work with more complex HTML5 and CSS3 concepts or even while working with other web programming languages.

When I found out how to create CSS buttons, it was like someone handed me a big, free piece of candy. Finally, no more time spent in Illustrator drawing buttons, variations for buttons and making sure all of them lined up and worked when someone moused over them! So here’s a beginner’s guide to creating some fancy CSS buttons!

First thing’s first, we have to create a link in HTML with a CSS class so we can style our fancy new button. Here’s what my code looks like:

 <a href="http://www.google.com" class="fancy_button">
Go to Google</a>

All right! So we got the first step in making a pretty button. But, if you preview your button right now, it’ll probably look something like this:

Go to Google

Yeaaaah, not the beautiful button we were expecting. That’s where the CSS class that we defined (fancy_button) comes into play. When we declared a class for the HTML link that we made, we’re telling the link to go search in our linked CSS Stylesheet for a class called .fancy_button and pull the styling options for our button from there.

Let’s add some styling to our link to make it more button-like. First I declare the link as a block element. By default, links are inline elements. We are making our fancy_button link a block element instead so we can manipulate different parameters such as background color. So, your CSS should look like this:

.fancy_button {
 display: block;
 }

In the above code, I’m declaring a CSS class named fancy_button so our link will know where its class styles are being referenced. Then I declared a display: block to make the link behave like a block element instead of an inline element. It still won’t look like much if you preview things at this stage. But let’s add a background color and see how that mixes things up:

.fancy_button {
 display: block;
 background: #62869b;
 }

Your button should now look like this:

The button has a background.

Still doesn’t look like much of a button, right? Part of that is because there are no defined widths or heights for our button. So it assumes an automatic height, and an automatic width. The nature of a block element is to assume that it should take up the entire width of a page unless told otherwise. Let’s tell it otherwise now.

I’m going to give my button a set width so it doesn’t stretch all the way across my page, and I’ll give it a bit more height so there’s some padding between my link name and the edges of the button. Here’s my CSS code now:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 }

And here’s what your button should look like now:

It’s slowly coming together.

Some problems with our button still, but let’s remedy the most immediate one which is the text of the button sitting in the upper left. We can resolve this issue by using some padding on the text to push it down into the middle and then center aligning it on the button:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 }

OK, I added a text-align that centers our text and then some padding to push our link down to the middle. I arrived at the padding amount of 25px at the top by dividing 50 in half. You can do this to other height values too. For example, if you had a button that was 20px high, you’d push your text down by 10px or 20px divided in half. Anyway, here’s what the button looks like now:

Now things are aligned properly.

OK, let’s do something about that ugly font and link color. I’m going to go with a web standard to keep things easy, but I’ll definitely do something about that default blue. And while I’m at it, I’m going to get rid of the underline too:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 }

I’ve added a font declaration that told my button to display the text as 12px Verdana (and some fallbacks), with a white color and to get rid of that unnecessary underline. Now here’s what things look like:

Text looks a bit better.

Before we go on to modify what the button will do when someone mouses over it, let’s fancy it up even more with some rounded corners to make it a little more interesting to look at:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

I added a border-radius of 15px that will affect all four corners to my button, and since border-radius is one of those CSS3 things that are in the works, I’ve included a browser prefix for Webkit and Mozilla-based browsers. Also I’ve noticed the text on our button doesn’t look like it’s sitting quite in the middle. So I increased our padding from the top to 30px. Here’s what our button looks like:

looks more button like, already.

I’m pretty happy with the button right now. So let’s go on and define how the button will react when a user mouses over it. For this, we’re going to need a pseudo class that does something when a user hovers (or mouses) over the button. Here’s my CSS:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -khtml-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

 .fancy_button:hover {
 background: #3e5a6b;
 }

I used a pseudo class on my .fancy_button class to tell it to change its background color when someone hovers their mouse over the button. So now when you visit your button, someone hovering over it will change the button’s background color to something darker:

Hovering over the button makes it a darker color.

That was vastly easier to do than in the old days when you had to work with Javascript, or replace images in your CSS. At this point, you should have a pretty nicely working button. You can take it to the next level too and add shadows, gradients, and even transitions. But maybe that’s a tutorial for another day–or maybe you want to play around with that stuff on your own and see what masterpieces you’ll come up with.

Click here to download the source code for this tutorial.

Good luck on your button creation adventures!

With CSS3 comes some very fancy effects including text transitions that you can use to create a bit of animation and interest in your websites. Some CSS3 transitions work with pseudo classes to create an effect when a user hovers their mouse over a link or image. I will only be covering transition effects for links or text in this post.

What I mean when I talk about a text transition is something like this:

Hover Over Me!

See how the colors shift and change gradually? Good thing you can easily create a simple text transition like that with almost no code at all. Here’s the most basic text transition you can write in CSS:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in;
   -moz-transition: color 1s ease-in;
   -o-transition: color 1s ease-in;
   -ms-transition: color 1s ease-in;
   transition: color 1s ease-in;
} 
a:hover {
   color: #668899;
}

The above chunk of shorthand code has a couple of things going on. First are the two link rules, one sets the styling for the general link, the other one sets the styling for the link when someone hovers over it. You’ll notice, rather obviously, that we’re applying the transition effect on the general link rule.

The Anatomy

When we declare a transition, we have to target the specific browsers that contain the functionality for it. In the above code, I’ve targeted three major browsers and I have a general “transition” declaration at the end. In this case, “-webkit-transition” refers to Webkit based browsers (Chrome, Safari). “-moz-transition” refers to Mozilla browsers (Firefox), -ms- is Internet Explorer, and “-o-transition” refers to Opera.

The four values in a transition declaration are the value to be transitioned, duration of the transition, type of transition, and transition delay.

For the value, we are declaring that the color should be affected here. For the duration, we are saying it should only last about a second. You can draw this number out longer, but a 5s transition for a hover over link can get pretty silly. Finally, we declare the type of transition, which in this case, is ease-in.

Breaking it Down

Let’s break down the above shorthand CSS declaration and view transition in its basic components. If we were to dissect the above chunk of code into its base elements, it would look like this:

a { 
   color: #888777;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0;

   -moz-transition-property: color;
   -moz-transition-duration: 1s;
   -moz-transition-timing-function: ease-in;
   -moz-transition-delay: 0;

   -ms-transition-property: color;
   -ms-transition-duration: 1s;
   -ms-transition-timing-function: ease-in;
   -ms-transition-delay: 0;

   -o-transition-property: color;
   -o-transition-duration: 1s;
   -o-transition-timing-function: ease-in;
   -o-transition-delay: 0;

   transition-property: color;
   transition-duration: 1s;
   transition-timing-function: ease-in;
   transition-delay: 0;
}

You can see how all the different declarations of transition work together now that they’re broken up from the shorthand declaration. However, I don’t really want to spend all day writing out my transitions in long chunks like that, so the short hand version is more efficient and works the same way.

Delays

Notice the addition of a “transition-delay” declaration that is set to 0 in the broken down declarations. You can use transition delay to tell an element to wait before beginning a transition. This allows you to stagger your effects for an interesting visual. To declare a delay in a shorthand declaration, simply add the delay value after the duration value. Like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s 2s ease-in;
   -moz-transition: color 1s 2s ease-in;
   -ms-transition: color 1s 2s ease-in;
   -o-transition: color 1s 2s ease-in;
   transition: color 1s 2s ease-in;
}

The above chunk of code tells my link to wait two seconds before it starts to run the ease-in transition for my link. Not very practical for a link, but if you were working with multiple images or pop-ups, this could come in handy!

Types of Timing Transitions

Ease-in is only one of the timing transitions available. There’s a bunch more with W3 Documentation. Understanding and reading all that could take a full day. Here’s a quick run-down:

Ease: Begins an effect faster than it ends the effect (slower).
Ease-In-Out: Begins an effect slower than it ends the effect (faster).
Ease-In: Starts an effect slowly.
Ease-Out: Finishes an effect slowly.
Linear: Executes an effect at one speed.

Any one of these timing transitions can be substituted in for the above effect like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in-out;
   -moz-transition: color 1s ease-in-out;
   -ms-transition: color 1s ease-in-out;
   -o-transition: color 1s ease-in-out;
   transition: color 1s ease-in-out;
} 
a:hover {
   color: #668899;
}

The above code will modify my link so that an ease-in-out timing transition will be applied to it instead of ease-in.

To add a level of complexity to your transitions, you can use the power of cubic beziers. Most of the time, if you’re just developing websites, you probably won’t need to mess with cubic beziers much. But, if you do and because I am barely competent with math (d’aww), I will let someone who is much better with numbers do the hard work to explain those. Check out The Art of Web for their excellent cubic bezier documentation.

There is also a super cool website where you can check out the various types of transitions and cubic beziers here: Cubic-Bezier

Transitions also work with images and can create some really cool effects. In fact, you can make entire slideshows with CSS transitions and images. But we’ll be covering that in another tutorial that’s coming soon!