Adding Text Indentation to Style Code Blocks with CSS

When it comes to defining the visual presentation of web pages with CSS, the task isn’t limited to building eye-catching headers and footers, decorating paragraphs, or converting arid and boring lists into stylish navigation bars. In reality, when coupled with the proper HTML tags, style sheets can be a powerful tool that permits you to give online code blocks a polished and readable look, without having to deal directly with the complexities of full-featured server-side or JavaScript-based code formatters/highlighters.

To demonstrate how useful CSS can be for styling code snippets included in (X)HTML documents, in some articles previous to this one I developed a decent number of examples which used a combination of <pre> and <code> tags and ordered lists to easily improve the visual appearance of a sample PHP fragment. While the combination composed of <pre> and <code> elements is by far the simplest way to decorate online code fragments, ordered lists can produce even more professional results. They allow you to generate line numbers automatically, because that’s an ordered list's default behavior.

What’s more, in the last installment of the series I showed how to apply an engaging zebra effect and a gutter to an online code fragment whose structure rested on an ordered list. This process only required us to create a single background image. In summary, does this mean that we’ve finished styling code blocks with CSS? Not so fast! Style sheets can also be used for adding proper indentation to the lines of those code blocks, quite similar to what you can achieve automatically with <pre> tags.

So, in this last article of the series I’ll be adding the final touches to the example created in the previous tutorial, by giving the sample PHP snippet a predefined indentation. As you'll soon see, this indentation can be customized with minor tweaks.

Ready to tackle the final part of this hopefully educational journey? Then let’s get going!