Styling Code blocks with CSS: Using pre HTML Tags
(Page 1 of 4 )
In this first part of a series you will learn how to improve the look and readability of code snippets in web pages, thanks to the use of something as simple as a pair of <pre> tags and some CSS styles. This approach does a decent job of styling online code blocks.
Introduction
Unquestionably, polishing the visual presentation of code blocks on web pages is one of those tasks that you, as a web designer, will have to face sooner or later. Be it when developing a website for a client that must provide a bunch of code samples to their content-hungry visitors, or even when building your own blog, it’s very probable that at some stage of the process you’ll need to define the look and feel of code snippets.
A good example of this is the Developer Shed network, which is made up of several websites whose contents usually include a variety of code fragments that need to be presented to the reader in an elegant, readable fashion. Obviously, the list goes on and on.
To be frank, there are several approaches that can be used to give online code snippets a more appealing appearance without having to sacrifice their readability, which range from using server-side and JavaScript-based highlighters, to working with methods that rely purely on CSS. While the former methods are definitively best suited for use on websites that display code fragments covering different languages and technologies, the latter are by far much easier to implement, as they only require an average background in style sheets and (X)HTML. It’s that simple, really.
Considering that this topic is indeed interesting and even fun (well, that’s only my personal opinion), in this article series I’m going to discuss how to use a basic combination of CSS and some simple HTML tags to make your online code blocks look more professional and readable, and best of all, without having to mess up your web pages with ugly and non-semantic markup.
Does my proposal sound good enough for you? Then don’t waste more time; start reading right now!
Next: Styling code blocks: a starting web page >>
More Style Sheets Articles
More By Alejandro Gervasio
