Tips for Technologists is a series aimed at teaching you to engage with technology in best way possible. You can see all the Tips for Technologists articles here.

By Nick Ruffilo

(This tutorial assumes that you have a working knowledge of HTML. See my prior posts: Understanding HTML/XML/CSS and Using HTML Well).

CSS (Cascading Stylesheets) is the visual language to HTML’s data structures. CSS is very easy to learn because there are limited commands and the changes can be viewed immediately. However, it can be a very difficult concept to master as there is much more to it than meets the eye.

Inline, Inline-block, and Block

All rendered (visible on the page) HTML elements are one of the following display types: inline, inline-block, or block. Each has its use and understanding the differences can save you a great amount of headache when trying to position and style elements.

• Inline: An inline element renders immediately next to its prior element. It also accounts for white-space (a space or carriage return will add a spacing equal to the defined font-size for the area. When thinking of inline elements, think of text. All of the formatting HTML elements have a default display of inline (b, i, strong, em, etc. [full element list]) as well as the span tag.  Inline elements cannot have their height/width defined and their height/width is automatically calculated based off the size of the contents within the tag.
• Block: A block elements will align directly below it’s predecessor. A block element can have a defined height and width, although if none is supplied, it will calculate based off the content inside. Tags that are defaulted to block are: div, img, etc. (full element list)
• Inline-block: An inline block element is a hybrid of the two; it allows you to define a height and width but also will display the content inline. No HTML tags are defaulted to inline-block, as it has a downside of accounting for spacing.  There are a few cases (discussed below) where inline-block is very useful.

Switching the Default Styles

If your HTML is set up correctly, then you shouldn’t often need to change the display property of an element. Still, situations arise where you need to change the default. The most common reasons for switching the defaults are:

• Making an anchor tag look like a button: While there are HTML buttons (input type=”button” and the button element in HTML5), different web browsers render them very differently. Some browsers will add a small border radius, some add a large border radius, some add padding within the button, some have grey backgrounds. In short, you have to write quite a bit of CSS to simply over-write all the defaults that every browser is adding to your button. The anchor (a) tag is defaults to an inline style. To be able to style it more like a button (give it a set height/width), you will need to change the display property to “block”.
• Aligning: If you have a few images, or divs that you want to line up horizontally, you have two options: 1) you can use the CSS float (will cover in a later article) or you can change the default display from block to inline-block. To see more about how this works (and an example of the drawbacks of inline block, see this wonderful blog post.)

The Box Model

Image from W3C (click to learn more)

The box model is the most important concept in CSS to understand. The box model is a way to describe every HTML element — think of each element as a box. While you can make elements look like circles using the border-radius style, every HTML element has a box that defines its boundaries. The outer boundaries of each box are defined by the following properties:

• Margin: The spacing given to the element between the border and the elements around it.
• Border: A definable border
• Padding: The spacing given to the element between the content and the border.
• Content: The value of the element.

Each of these properties can be individually set for each of the sides (top, bottom, left, right) or all at once by simply using the property name. For example: “margin: 2px; padding: 4px;”

A Brief Note on Borders

Border is the only box model parameter that can be configured beyond a set width. The border can take in a pattern, a color, and a width. For examples of values for the pattern and usage of border, see the W3C page on CSS border.

Why the Box Model Is Important

Beyond being able to style your content well, the box model helps you understand how your content is actually sized. For example, if you are trying to fit four elements into a 400-pixel-wide container, you cannot simply set the width of each element to 100px.  Why not? If they have a border of 1px, then their actual width becomes 102px each, making the total width 408px (one pixel for left border, one pixel for right border). Also, if you want your items to have a 2px padding between them, you now have each element being 108px. Knowing how the box model works allows you to adjust your width now to 92px to allow for those additional 8px to equal 100px, allowing you to perfectly fit 4 items within your 400px container.

My Personal Gotcha!

The one aspect of the box model that always seems to get me is that the height/width is not set at the start of the border, it is set at the end of the content. For example, see the item below which has the following CSS:

style=”height: 30px; width: 120px; padding: 4px; background-color: #CCCCCC; border: 1px solid #000000; margin: 3px; text-align:center”

How many pixels wide would you guess this box is? My default thinking is: 120 (width) + 1×2 (border) + 4×2 (margin) = 130. The fact that the background-color fills to the border makes me feel like the 120 width includes padding, but the truth is, the padding adds to the width. The actual width of the item is 120 (width) + 4×2 (padding) + 1×2 (border) + 3×2 (margin) or 138px. Hopefully this clears things up.

Styling an Element

Now that you have the core concepts down, you can begin to start styling an element, but how?  CSS (or simply “style”) information can be included in one of three places.

• Directly on an element: You can directly set styles in an elements style attribute. For example: <div style=”border:1px solid;”>this has a border</div>
• In a style element: Anywhere in your HTML document you can include a <style></style> tag and put any CSS declarations you wish inside.
• In a separate CSS file: In the <head></head> of your HTML you can include a CSS file using the following: <LINK href=”style.css” rel=”stylesheet” type=”text/css”>

Using a <style></style> tag or a separate CSS file require the use of ID/class/tag declarations, which I will cover in a later post, so I will only discuss inline styling.

The above “Hello” with a background and border has the source:

<div style=”height: 30px; width: 120px; padding: 4px; margin: 3px; background-color: #cccccc; border: 1px solid #000000; text-align: center;”>Hello</div>

The order in which items are defined does not matter, but they are all separated with a semi-colon ( ; ). Since the above uses a div (block) I can define a height.  If I were to switch the element to a span (inline), it would look like this:

Hello

The height and width are actually defined, but, since the item is an inline item, it ignores those properties and calculates the width/height based on the content. If this text were not in a paragraph (block) tag, it would be aligned to the right of the “Hello” margin.