6 Things You Should Know About CSS

There are a few things people doing CSS styling should know when styling a web page. This is a list of things that I consider mandatory knowledge, not because they are basics, but because not knowing them causes too many headaches and knowing them makes styling so much easier.

Inline vs Block elements

Inline elements

Inline elements are elements that go with the flow of the page. They are just added where they are in the web page and don’t disrupt the layout. For example, a link is just added where it is put, right in the middle of a blob of text.

The most common inline elements are: a, img, span, all form elements (input, select, textarea, etc.)

Complete list of inline elements

Block elements

Block elements on the opposite do disrupt the layout because that’s what you want. They always are on their own line (unless specified otherwise using CSS) and often have top and bottom margins applied by default on them. For example, if I put

<p>some text between p tags, the text goes on another line.</p>

The most common block elements are: blockquote, div, fieldset, form, all the header tags (h1 through h6), ol, p, pre, table, ul

Complete list of block elements

Anchors

Anchors specify the relative point used when positioning elements. To set an anchor, just specify the position of the element.

position: relative/absolute/...;

This will sets the reference point of all the children of the element to the top-left corner of that element. So an element absolutely positioned at 0,0 will be placed at the top-left corner of that element instead of being placed at 0,0 of the viewport (or the closest anchor in the tree).

Example

Selectors

Selectors is another common misunderstood or “under-known” concept. Knowing your selectors allows you to pinpoint elements much more easily. They are powerful and you should know them.

This page has all the information you need to know about CSS selectors

Examples

Line between elements

One thing I like to use with selectors is to put a line between multiple elements, except the first and last (as in my sidebar). To do this, all I have to do is use the + pattern.

ul li + li
{
    border-top: solid 1px #ddd;
}

The first li won’t be targeted by the selector but all the others will, giving them a small border on top.

Disabled style

I often want to style a disabled element differently. To do so, I don’t want to rewrite the styling completely for my disabled element. So with the help of multiple classes and this selector I can do this:

<a href="link" class="SpecialLinkClass disabled">Click me</a>

.SpecialLinkClass
{
    color: #00f; /* blue */
}

.SpecialLinkClass[class~=disabled]
{
    color: #aaa; /* gray */
}

Of course this is just an example, but I’m sure you can find uses for it in real projects.

Box Model

Understanding the box model is crucial when doing CSS styling. The current box model is counter-intuitive so take a look at my previous blog post for more info.

Multiple Classes

Something important that people tend to forget is that you can apply multiple classes to a single element. For example, my rounded headers are defined this way:

<div class="section-title rounded rounded-large">

The section-title class specifies the background color and the font color among other things. The rounded and rounded-large classes allow me to specify things specific to elements that I want to be rounded (more about this in a future post).

Centering

First of all, don’t even think about using the <center> tag. It’s semantically wrong, it’s not good practice and you can do centering without it. The first thing to know is that inline and block elements are not centered the same way so be sure to know which kind your element is (see first point) before trying to center it.

Inline elements

These are easy to center, just add this CSS property to their parent:

text-align: center;

Block elements

These are a lot harder to center, especially if you’ve never done it since it’s all but intuitive. First, since block elements take all the available width, you must first reduce their width. This can be done using different methods:

• Add the same margin to the left and right of the element
• Hardcode the width

Sadly, these are the only options for now. A better option would be using this CSS property:

display: inline-block;

…however, the inline-block display value is not yet supported correctly by Internet Explorer.

So now that the width is specified, all you need to do is tell the element that the space on the left and right is the same. To do this, just add auto margins:

margin-left: auto;
margin-right: auto;

or

margin: XX auto; /* XX is a placeholder the first value is applied to the top and bottom while the second applies to left and right */

End

With this new (or not) knowledge aquired you are now well armed to take on those difficult CSS styling issues.