element { text-align:justify; }

If you’ve never heard of justified text, I’m sure you’ve seen it. In fact – you’re looking at it right now! If you view my stylesheet, or in particular where I reference the body element, you’ll notice that I’ve applied the attribute text-align:justify;. This alters my typographical alignment or more simply known as the typesetting. Take a look at the differences:

justified textAenean erat ipsum, volutpat a lacinia a, accumsan quis justo. Suspendisse condimentum mattis elit, a egestas sapien tristique vitae. Integer tincidunt euismod felis at vestibulum. Nam sit amet tempor arcu. Vivamus enim mi, bibendum ut consequat vitae, tempor sit amet purus. Nullam ligula elit, consequat non viverra quis, varius interdum dolor. Nam et tellus quis libero vulputate tincidunt eget a orci. Donec congue ipsum in arcu blandit quis molestie tortor pulvinar. Pellentesque ultricies tincidunt velit, egestas aliquet erat aliquam quis. Nulla sem est, ornare nec vestibulum vitae, pharetra eget leo. Maecenas accumsan luctus massa eget aliquet.

non-justified text (ragged right side)Aenean erat ipsum, volutpat a lacinia a, accumsan quis justo. Suspendisse condimentum mattis elit, a egestas sapien tristique vitae. Integer tincidunt euismod felis at vestibulum. Nam sit amet tempor arcu. Vivamus enim mi, bibendum ut consequat vitae, tempor sit amet purus. Nullam ligula elit, consequat non viverra quis, varius interdum dolor. Nam et tellus quis libero vulputate tincidunt eget a orci. Donec congue ipsum in arcu blandit quis molestie tortor pulvinar. Pellentesque ultricies tincidunt velit, egestas aliquet erat aliquam quis. Nulla sem est, ornare nec vestibulum vitae, pharetra eget leo. Maecenas accumsan luctus massa eget aliquet.

Justified text primarily increases/decreases the spacing between words to line up words at the end of every line. This is a technique widely used in books and magazines. Justified text may also slightly alter the kerning (letter-spacing) and/or glyphs (element of writing).

Although justified text makes for a more elegant appearance, some people may not prefer it. In fact, people with dyslexia tend to find justified text harder to read. Though, dyslexia only effects an estimated 3%-4% of the population. This means you just may be justified in using it

Reference: Wikipedia – Justification

1
2
3
4
5
6
7
8
9
10
11

/* bad example */
#content {
    float:left;
    border-top:2px solid #000;
    width:70%;
}
#sidebar {
    width:30%;
    border-top:2px solid #000;
    float:left;
}

The above example is not very good. I’ll explain why; in most programming languages elimination of repetition is usually ideal (don’t repeat yourself). As you can see I’ve defined float:left; and border-top:2px solid #000; for both the #sidebar and #content – which means I’m repeating each attribute twice. To avoid the repetition, I need only to place one instance of the attribute into what’s called a concatenated or combined style. One benefit of this technique will allow making changes to the #content and #sidebar easier. If later I decided I want to change to a one pixel border I would only have to edit the attribute in one place. Another benefit would be that I’ve reduced several lines of code therefore decreasing the time a browser takes in loading my stylesheet. You may have also noticed that I’ve placed the whole style onto one line. If I only have a few different attributes to put into a particular style – I tend to keep it all on one line. This can also benefit you by increasing your code’s readability as well as the overall management of your stylesheet in general.

1
2
3
4

/* we're getting there */
#content, #sidebar { float:left; border-top:2px solid #000; }
#content { width:70%; }
#sidebar { width:30%; }

But that’s not enough for me! Remember what I said about repeating yourself? Since I’m already calling the #content (line 2) once there’s no reason to call it again – it’s unnecessary and extraneous. I can simply throw all of the attributes that I’ve placed in the second #content (line 3) in the above example into the first time I called it along with the #sidebar (line 2). Ah, yes that means that our #sidebar would gain a width of 70% since it’s concatenated alongside the #content therefore breaking my layout! We need a total combined width of 100% and can achieve this with use of overriding to nullify the #content specific attributes I’ve thrown into the concatenated style to reduce repetition. Take a look at the next example to understand the concept.

1
2
3

/* smart example */
#content , #sidebar { border-top:2px solid #000;float:left; width:70%; }
#sidebar { width:30%; }

In the above example, the second time I called the #sidebar (line 3) CSS knows to ignore the first time (line 2) and that is overriding in action. I’ve successfully reduced my first example from a total line count of 10 (149 characters) to a minor line count of 2 (96 characters). Finally – it’s alphabetized. And that’s probably a little too much.

Important: In the above example, the styles #content, #sidebar and the second #sidebar are both at the same specificity. If for example our code looked like the next example however the attribute that I wanted the #sidebar to override (the width) would not work. This is because the first time I called #sidebar now has a higher specificity with the addition of body in front of it. If you’re getting dizzy – read more about specificity.

1
2

#content , body #sidebar { border-top:2px solid #000;float:left; width:70%; }
#sidebar { width:30%; }

It is important to realize that you can go too far. Use concepts like concatenation and overriding in combination to create more logical and faster parsing code. But sometimes it’s not the smartest choice and can cause more of a hassle than help. Just find a balance and you’ll be set.