Home arrow Style Sheets arrow Styling Code blocks with CSS: Using pre HTML Tags
STYLE SHEETS

Styling Code blocks with CSS: Using pre HTML Tags


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 11, 2010
TABLE OF CONTENTS:
  1. · Styling Code blocks with CSS: Using pre HTML Tags
  2. · Styling code blocks: a starting web page
  3. · Formatting with the pre HTML tag
  4. · Assigning a basic style to the pre tags

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Styling Code blocks with CSS: Using pre HTML Tags
(Page 1 of 4 )

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!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions
- Create a Simple Transitioning Link Bar with ...

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials