In this fifth part of a seven-part series, I demonstrate how to enhance the visual presentation of a code fragment in a web page by assigning a high-contrast color to its lines. Since the fragment is also housed inside an ordered list, generating its line numbers is an automated process that the browser does naturally. That means less work for you!
Changing the Color of Code Lines with CSS (Page 1 of 4 )
Providing all of the code blocks in your web pages with a stylish and readable look is much easier than you might think, especially when you don't need to incorporate more advanced features, such as syntax highlighting or covering the scope of a huge variety of languages and technologies. What's more, the recipe to success is ridiculously simple. A proper mixture of common HTML elements, like <pre>, <code> and <ol> along with a few basic CSS styles can turn your boring and dull online code snippets into elegant and clean pieces of code that will make your web site's visitors come back over and over again.
Naturally, if you've read some of the articles that precede this one, you're already aware of the benefits of using CSS to improve the visual appearance of code blocks on web pages. In those tutorials I explained how to accomplish this via the typical <pre><code> tandem, and later by using a simple ordered list.
In fact, in the last article I left off explaining the key concepts behind the latter approach, which is particularly useful, since it allows you to automatically generate line numbers in code blocks. This obviously contributes to enhancing their readability even further.
So far, I've demonstrated how to embed a sample PHP code into an ordered list and add some basic styles to it, such as a clear background color, slim borders and a fixed width. However, the current appearance of the PHP snippet is still quite some ways from the desired goal, and it needs to be polished even more. The question that comes up here, of course, is how this can this be done. Well, we can accomplish this by assigning a different color to its line numbers, including a zebra background effect and adding a proper indentation; these are improvements that need to be implemented sooner or later.
Considering that this enhancement process will be performed progressively, in the next few lines I'm going to show you how to highlight the PHP fragment by giving its lines a high-contrast color.
Are you interested in learning how this will be done in a few easy steps? Then begin reading right now!
Style Sheets 
HTML5 Boilerplate Introduction
