WordPress 3: Designing your Blog

Exclusive offer: get 50% off this eBook here
WordPress 3 For Business Bloggers

WordPress 3 For Business Bloggers — Save 50%

Promote and grow your WordPress blog with advanced marketing techniques, plugins, advertising, and SEO with this book and ebook

£16.99    £8.50
by Paul Thewlis | December 2011 | Open Source WordPress

In this article by Paul Thewlis, author of WordPress 3 For Business Bloggers, we'll look at one of the most important aspects of your blog—design. We'll begin by considering some of the principles of good blog design. Even if your blog is already up and running, this article will allow you to critically evaluate its design and replace your current theme with a custom-designed one. This article includes:

  • The principles of blog design
  • How to implement your blog design using CSS and HTML

(For more resources on WordPress, see here.)

Blog design principles

Blogs tend to have a fairly simple, minimalist layout and design. This has always been one of their key characteristics. Blogs are all about frequently updated content, so the main purpose of their design is to present that content as efficiently and conveniently as possible. The vast majority of blogs present their most recent content on the page that visitors arrive at; hence, the front page contains the latest posts. There's no home page with a verbose welcome message and a long navigation menu to click through to the important stuff. The visitor gets straight into the meat of the blog. By default, this is the structure that WordPress provides. It is possible to set a static page as your blog's front page, but, in the vast majority of cases, I wouldn't recommend it.

So when considering the architecture of a blog, unlike other types of website, we don't have to worry too much about a complex navigation structure. There is a convention that we can follow. Yes, we may want to add some extra static pages, but probably only a few of these. What we are most concerned with in blog design is not a complicated navigation structure and how all the pages link together, but how the actual blog page should look and feel. This can be broken down into four key components, which we will examine, one by one:

  • Layout
  • Color
  • Typography
  • Usability and accessibility

Layout

Good design is all about making something easy for people to use. Designers achieve this by employing standards and conventions. For example, cars have a standard design: four wheels, a chassis, a steering wheel, gas pedal, brake, gear shift, and so on. Car designers have stuck to this convention for many years. First, because it works well and second, because it enables us to drive any car we choose. When you sit down in any standard road car, you know how it works. You turn the key in the ignition, select a gear, hit the gas, and off you go. It's certainly not beyond the ken of car designers to come up with new ways for getting a car in motion (a joystick maybe, or a hand-operated brake) but this would make it more difficult for people to drive. Cars work reasonably safely and efficiently because we are all familiar with these conventions.

The layout of blog pages also tends to follow certain conventions. As with cars, this helps people to use blogs efficiently. They know how they work, because they're familiar with the conventions. Most blogs have a header and a footer with the main content arranged into columns. This columnar layout works very well for the type of chronological content presented in blogs.

Because of these conventions, the decisions about our blog layout are fairly simple. It's basically a case of deciding where we want to place all our page elements and content within this standard columnar layout. The set of page elements we have to choose from is also based on fairly well entrenched blogging conventions. The list of things we may want on our page includes:

  • Header
  • Posts
  • Comments
  • Static content (for example, the About page)
  • Links to static pages (simple navigation)
  • RSS feeds
  • Search
  • Categories
  • Archives
  • Blogroll
  • Widgets and plugins
  • Footer

If we look at this list in more detail, we can see that these page elements can be grouped in a sensible way. For example:

  • Group 1
    • Header
    • Links to static pages
  • Group 2
    • Posts
    • Comments
    • Static content
  • Group 3
    • RSS Feeds
    • Search
    • Categories
  • Group 4
    • Archives
    • Blogroll
    • Widgets and plugins
  • Group 5
    • Footer

This isn't the only possible grouping scheme we might come up with. For example, we may place the items in Groups 3 and 4 into a single larger group, or we may have widgets and plugins in a group on their own. From this grouping, we can see that the type of items in Group 2 are likely to be the main content on our page, with Groups 3 and 4 being placed in sidebars .

Sidebars are areas on the page where we place ancillary content.

Having considered the elements we want on the page and how they might be grouped, we can think about possible layouts. Within the conventional columnar structure of blogs there are quite a few possible layout variations. We'll look at four of the most common. The first is a three-column layout.

Here, we have two sidebars, one on either side of the main content. Using this type of layout, we would probably place the items in Groups 3 and 4 in the sidebars and Group 2 in the main content area.

A variation on the three-column layout is to have the two sidebars next to each other on one side of the page (usually the right), as shown in the following diagram. This is a popular layout for blogs, not just for aesthetics, but because the search engine spiders encounter the post column first as that content is at the top of the template.

Using two sidebars is useful if you anticipate having a lot of ancillary content on your blog. The list of page elements given earlier is really the bare minimum you would want on your page. However, if you decide to use lots of widgets or have a long blogroll, it's a good idea to spread them across two sidebars. This means that more of your content can be placed above the fold.

The concept of above the fold in web design applies to content in a web page which is visible without having to scroll down, that is, the stuff in the top part of the page. It's a good idea to place the most important content above the fold so that readers can see it immediately. This is particularly true if you plan to monetize your blog by displaying adverts. Adverts that appear above the fold get the most exposure, and therefore, generate the most revenue

Another popular layout amongst bloggers has just two columns. In this layout, we would place the items in Groups 3 and 4 together in the one sidebar. It doesn't really matter which side of the page the sidebar is placed, but it seems more common to have it on the right. Studies have shown that a web user's eyes are most often focused on the top-left region of a web page, when they first open any page. So it makes sense to place your main content there, with your sidebar on the right.

Also, remember that the search engine spiders will find the leftmost content first. You want them to find your main content quickly, which is a good reason for placing your sidebar on the right, out of their way.

An important benefit of a two-column layout is that it allows more room for your main content area. This may be important, if you intend to use a lot of video or images within your blog posts. The extra room allows you to display this visual content bigger.

Many blogs place some of their ancillary content just above the footer, below the main content. This also has the advantage of leaving more space for the main content, as with the two-column layout. The following diagram shows this type of layout. Here, the content just above the footer isn't strictly speaking a sidebar, but I've labeled it this way because it's the terminology most often applied to this type of ancillary content.

Wireframing
The layout diagrams we've just seen are referred to as wireframes by web designers. They give a simple overview of where the elements of a page should be placed. It would be a good idea for you to create your own wireframe for your blog design. This can be done using most graphic software packages or something like Microsoft Visio , or a simple pen and paper does the job equally well!

Color

This is the next design principle we need to consider. It may be that you already have a corporate color scheme based on your company logo, stationery, or existing website. In this case, you'll probably want to continue that theme through your blog design. Even if you already have your corporate color scheme, this section may still be useful in case you decide to change your blog colors in the future.

The subject of color in design is a large one. Design students spend a great deal of time learning about the psychology and science of colors and techniques for achieving the best color schemes. Obviously, we don't have enough space to go into that kind of detail, but I will try to give you a few pointers.

The first thing to think about is the psychology of color, in particular, color associations. This is the idea that different colors evoke different feelings and emotions in the eye of the beholder. To a certain extent this can be rather subjective and it can also depend on cultural influences, but there are some generalities that can be applied. For example, red is often perceived as being exciting, passionate, or dramatic. Yellow is an active and highly visible color, which is why it is used in warning signs. It is also associated with energy and happiness. Blue is sometimes thought of as being cold. It can also be a calming color and may sometimes be seen as corporate or conservative. White, for many people, gives the idea of cleanliness, purity, and perfection. Black can be seen as strong, elegant, and chic. Obviously, these color associations can vary from person to person, so designers don't rely on them solely in their color decisions, but they are certainly worth bearing in mind.

There are more practical considerations regarding color that are probably more relevant than color psychology. For example, we all know that some color combinations don't work well together. There is a great deal of design theory aimed at devising good color combinations, but unless you're a professional designer, it's not really worth going into. Probably the best method for working out good color combinations is trial and error. If you're trying to figure out a background color and text color for your blog, simply test a few out. You could use a graphics package such as Photoshop or Microsoft Paint , or one of the many online color tools such as, http://colorschemedesigner.com/ or Adobe's Kuler at http://kuler.adobe.com.

When choosing background and text colors you need to think about contrast. For example, yellow text on a white background can be very difficult to read. Some people also find light text on a black background a strain on their eyes.

It's also important not to use too many colors in your design. Try to limit your palette to a maximum of three or four. Sometimes you may only need two colors to make an attractive design.

One method for devising color combinations is to look for examples all around you, particularly in nature. Maybe look at a photograph of a landscape and pick out color combinations you like. Also consider the work of professional designers. Think about websites and blogs you like, and examine the color schemes they have used. You will also find good examples in offline design—pick up a book and see how colors have been used in the cover design.

If you would like to base your blog's color scheme on your company logo, you could use lighter and darker versions of one color from the logo. Use the most vivid color in the logo for emphasis or headings.

Web color theory

At this point, it's worth looking at the technical theory behind colors on the Web. Web browsers use the Hexadecimal RGB color system to render colors in web pages. This is because computer monitors use an RGB color model, which means every pixel is colored using a combination of red, green, and blue light (hence RGB). There are 256 different levels of red light, 256 different levels of green light, and 256 different levels of blue light. These can be combined to create 16,277,216 different colors, which are all available for your web browser.

The hexadecimal system gives us a way of counting from 0 to 255 using numbers and letters, which covers all 256 levels of RGB light. In the hexadecimal scale, 0 is 00 and 255 is FF. A six-character hexadecimal color code specifies the levels of red, green and blue, which form a particular color. For example, the color white combines red, green, and blue at their highest possible levels, that is 255. Remember that in hexadecimal 255 is FF, so the color code for white is FFFFFF (Red: FF, Green: FF, and Blue: FF). The color code for black is 000000 as the levels of red, green, and blue are set to their lowest, or 00 (in hexadecimal). The code for red is FF0000, blue is 0000FF, and yellow is FFFF00, and so on.

We can use six-character Hexadecimal RGB codes to define all of the 16,277,216 web colors.

So how do we know the hexadecimal code for a particular color? Well, there are many tools available that define the Hexadecimal RGB codes for the colors you choose. Some are standalone applications for PC or Mac, and others are online. Take a look at www.colorpicker.com or do a quick search in Google on color picker . For more information on web colors , read the article at http://en.wikipedia.org/wiki/Web_colors.

Typography

Another important consideration for your blog design is the fonts you use. Your choice of font will have a big impact on the readability of your blog. It's important to bear in mind that although there are literally thousands of fonts to choose from, only a small number of them are practical for web design. This is because a web browser can only display fonts that are already installed on the user's computer. If you choose an obscure font for your blog, the chances are that most users won't have it installed on their computer. If this is the case the web browser will automatically select a substitute font. This may be smaller or far less readable than the font you had in mind. It's always safest to stick to the fonts that are commonly used in web design, which are known as web safe fonts. These include the following:

  • Arial
  • Verdana
  • Times New Roman
  • Georgia

There are two types of font, serif and sans-serif. Serif fonts have little flourishes at the end of the strokes whereas sans-serif fonts don't have this extra decoration. Arial and Verdana are sans-serif fonts, whereas Times New Roman and Georgia are serif fonts.

As you'll see later in the article, when we look at CSS, fonts are usually specified in groups or families. They are listed in the order of the designer's preference. For example, a designer may specify font-family:"Georgia, Times New Roman, serif". This means when the browser renders the page it will first look for the Georgia font; if it isn't installed, it will look for the Times New Roman font and if that isn't installed, it will look for the computer's default serif font. This method gives the designer more control over the font choices the browser will make.

The size of your font is also an important factor. Generally speaking, the bigger it is, the easier it is to read. Computer displays are getting bigger and bigger but the default screen resolutions are tending to get smaller. In other words, the individual pixels on users' screens are getting smaller. This is a good reason for web designers to choose larger font sizes. This trend can be seen on many Web 2.0 sites, which tend to use large and clear fonts as part of their design, for example http://www.37signals.com. But be careful not to go too big as this can make your design look messy and a little childish.

Remember that you're not limited to using just one font in your blog design. For example, you may decide to use a different font for your headings. This can be an effective design feature but don't go crazy by using too many fonts, as this will make your design look messy. Probably two, or at most three, fonts on a page are plenty.

Font replacement

Font replacement refers to a relatively new group of technologies that are pushing the envelope of web typography. In theory, they allow designers to use any font in their web page designs. In practice, things are a little more complicated. Issues around browser compatibility and font licensing make font replacement technologies a bit of a minefield for anyone who is new to web design. It's true that, thanks to font replacement technologies, professional designers are no longer constrained by the notion of web safe fonts. But, if you are a web design novice, I recommend you stick to web safe fonts until your skills improve and you are ready to learn a whole new technology.

A full discussion on font replacement is way beyond the scope of this article; I mention it only to give you a better overview of the current state of web typography. But if you are interested in knowing more, three popular font replacement technologies are Cufón (http://cufon.shoqolate.com), Font Squirrel (http://www.fontsquirrel.com), and Google Fonts API (http://code.google.com/apis/webfonts/).

There is also something known as @font-face, which is part of CSS3, the latest specification of CSS. Again, it offers the tantalizing possibility of giving designers free rein in their choice of fonts. Sadly, @font-face is also hindered by browser compatibility and font licensing issues. The Font Squirrel technology, mentioned previously, resolves these issues to a certain extent, so this is something to be aware of as your web design skills develop. But for the time being, I recommend you concentrate on the basics of web typography and don't worry about @font-face until you feel ready.

Usability and accessibility

This is another very important area to consider when designing your blog. Many people, who live with various disabilities, use a range of 'assistive' software to access the Web. For example, people with visual impairments use screen readers, which translate the text in a web browser into audible speech. There are also people who are unable to use a mouse, and instead rely on their keyboard to access web pages. It's the responsibility of web designers to ensure that their websites are accessible for these different methods of browsing. There's no sense in alienating this group of web surfers just because your blog is inaccessible to them.

There are also many other circumstances when your blog might be accessed by means other than a standard web browser, for example, via mobile phones, PDAs, or tablets. Again, a good designer will ensure that these modes of browsing are catered for. The web design industry has been well aware of these accessibility issues for many years and has come up with guidelines and technologies to help conscientious designers build websites that are standards compliant . These web standards help ensure best practice and maximize accessibility and usability.

Luckily, WordPress takes care of a lot of the accessibility issues simply by the way it's been developed and built. The code behind WordPress is valid XHTML and CSS, which means that it complies with web standards and is easily accessible. It's important, then, that you don't break the system by allowing bad practice to creep in.

Some of the things to bear in mind relate to a couple of design principles we've already discussed, for example, using a color scheme and font size that makes your text easy to read. Other issues include keeping the number of navigation links on your page to a minimum—a whole load of useless links can be annoying for people who have to tab through them to get to your main content.

You should also ensure that any third-party plugins you install are standards-compliant and don't throw up any accessibility problems. The same is true if you decide to use a ready-made theme for your blog design. Just make sure it's accessible and satisfies web standards. For more background reading on web standards, you could take a look at http://www.alistapart.com or the World Wide Web Consortium (W3C) website at http://www.w3.org.

Implementing your blog design

We've now considered the principles involved in designing our blog. The next thing to decide is how we actually carry out the design work. There are three main options available, each of which involves varying degrees of work. However, they all require knowledge of the design principles we just covered.

The first approach is probably the easiest; it simply involves finding a readymade theme and installing it in WordPress. By working through the earlier design principles, you should have an idea of what you want your blog to look like and then you simply need to find a theme that matches your vision as closely as possible. A good place to start looking is the official WordPress Free Themes Directory at http://wordpress.org/extend/themes/. You'll also find many more theme resources by running a search through Google.

There are hundreds of very attractive WordPress themes available for free and many others which you can pay for. However, if you adopt this approach to your blog design, you won't have a unique or original blog. The chances are the theme you choose will also be seen on many other blogs.

At the other end of the scale, in terms of workload, is designing your own theme from scratch. This is a fairly complicated and technical process, and is well beyond the scope of this article. In fact, it's a subject that requires its own book. If you intend to build your own theme, I recommend WordPress 2.8 Theme Design by Tessa Blakeley Silver ISBN 978-1-849510-08-0 published by Packt Publishing.

The third approach is to modify a readymade theme. You could do this with any theme you choose, even the default Twenty Ten theme that ships with WordPress. However, if you edit a fully developed theme, you spend a lot of time unpicking someone else's design work and you may still be left with elements that are not completely your own. A better method is to start with a theme framework, which has been specially designed to be a blank canvas for your own design.

Over the last few years many WordPress theme frameworks have appeared, some free, some paid-for. Two of the most popular paid-for theme frameworks are Thesis (http://diythemes.com/) and Genesis (http://www.studiopress.com/themes/genesis), while popular free frameworks include Hybrid (http://themehybrid.com/), Carrington (http://carringtontheme.com/), and Thematic (see below).

WordPress 3 For Business Bloggers Promote and grow your WordPress blog with advanced marketing techniques, plugins, advertising, and SEO with this book and ebook
Published: December 2011
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

(For more resources on WordPress, see here.)

A brief introduction to CSS

I would recommend anyone who is involved in web publishing, including all you business bloggers, to learn at least the basics of HTML and CSS. A full CSS tutorial is way beyond the scope of this article; in fact, there are many books that are exclusively devoted to the subject. However, I will attempt to give you a very rudimentary grounding in the principles of web design using HTML and CSS. For a more thorough tutorial, you can find many excellent online resources, such as http://www.w3schools.com.

The early days of the web

The worldwide web was invented by academics in the early 1990's, who mainly used it to publish research papers via the Internet. Their layout requirements were fairly simple and early web pages usually contained nothing more than text arranged into headings and paragraphs.

The technology that makes the Web work is HyperText Markup Language (HTML) , which tells web browsers, such as Internet Explorer and Mozilla Firefox, how to display content in a web page.

As the web grew in popularity, with more and more individuals and businesses using it to publish different types of content, web designers arrived on the scene and began to experiment with HTML to create more complex web pages. They wanted to create pages with images, lots of different colors, multiple columns, and more interesting layouts. It was possible to achieve this with HTML but it went way beyond what the language was originally intended for.

The main problem was that designers were forced to use the HTML <table> tag to create their complex page layouts. The <table> tag was only intended to present data in a tabular format. But by creating tables with hundreds of columns and rows, merging cells together, and nesting tables within tables, the designers could build the fancy-looking pages their clients demanded.

This was bad for a number of reasons. These huge complicated tables were slow to download. They were extremely difficult to maintain—making just one small change to a page could break the entire layout table. And, most importantly, they caused accessibility issues.

There was also a deeper philosophical dissatisfaction with using HTML for complicated web design—it simply isn't meant for it. HTML is the wrong tool for the job. The purpose of HTML is just to display content in a web browser, and not to format or style that content.

The W3C decided that something else was needed to handle the formatting and styling of web pages. So, in December 1996 it published the first specification for Cascading Style Sheets (CSS).

Content and style

The arrival of CSS meant that a web page's content could be separated from its style. HTML handles the content and CSS takes care of the style. The content of a web page includes things such as text, images, and links. The style of the page refers to things such as the colors, the typeface (font), the positioning, and the layout.

The following screenshot shows the content of a web page. No styling has been done—it just uses HTML to mark up the content into headings, links, and paragraphs.

After making this simple page, we could add the following styling:

  • Make the page heading white text on a dark gray background.
  • Line up the links in a navigation bar under the header and make them bold.
  • Give the body of the page a light gray background.
  • Change the font to Arial.

In the bad old days, before CSS, all this styling would have been done by using HTML tags and tables. Nowadays, the correct way is to use CSS. The following screenshot shows the page after the CSS was added. The changes you see have been achieved by just adding CSS to the web page—the HTML hasn't changed at all.

Looking at the code

OK, let's look at the HTML and CSS used to make these simple web pages. You can download the example files from the Packt website: http://www.packtpub.com/support?nid=8878/1322_Code.zip.

First, let's look at the HTML files. Once you've downloaded the code bundle, unzip it, and open the CSS Example folder. In it you will see three files: page.html, page_styled.html, and style.css:

Double-click on page.html and it should open up in your default web browser. It looks like the first screenshot you saw below the Content and style section.

To view the HTML code that makes this page, go back to the CSS Example folder, right-click on page.html and select Open With Notepad|.

You will now see the following code in your Notepad window:

<html> <head> <title>A Simple Web Page</title> </head> <body> <h1>A Simple Web Page</h1> <ul> <li><a href="http://www.packtpub.com">Link 1</a></li> <li><a href="http://www.packtpub.com">Link 2</a></li> <li><a href="http://www.packtpub.com">Link 3</a></li> <li><a href="http://www.packtpub.com">Link 4</a></li> </ul> <h2>Heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo augue et lacus. Aenean tortor. Proin dolor. Cras convallis metus. Vivamus volutpat metus non felis. Ut pharetra iaculis lorem. Duis consequat, metus convallis rutrum porttitor, ligula risus egestas neque, vel lacinia massa arcu non libero. In faucibus vehicula nulla. In hac habitasse platea dictumst. </p> <h3>Sub-heading</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo augue et lacus. Aenean tortor. Proin dolor. Cras convallis metus. Vivamus volutpat metus non felis. Ut pharetra iaculis lorem. </p> </body> </html>

If you've never seen HTML before, this might look rather confusing. Don't worry, we'll go through it bit-by-bit.

The first thing you'll notice is lots of angle brackets: < >. These contain the HTML tags. Each HTML tag appears as a pair, with an opening tag < > and a closing tag </ >.

The very first tag you see is the <html> tag. This tag encloses the entire HTML document—you'll see the closing </html> tag is right at the bottom. The <html></html> tag simply tells the browser where the HTML document begins and ends.

All HTML documents are made up of two main parts, the head and the body. The head, also called the header, is contained in the <head></head> tag. The header gives information about the HTML document—this is known as Metadata. In our simple document the only information included in the header is the page title, which you can see in the <title></title> tag. The document title is shown in the title bar of your web browser as in the following screenshot:

Everything in the <body></body> tag is the main content of the page, which actually appears in the browser window. Our page begins with an <h1></h1> tag, which is a level 1 heading —it contains our main page heading. Next comes a <ul></ul> tag, which is an unordered list or bulleted list. Each item in the unordered list is placed in <li></li> tags. These are the four links at the top of the page.

Next you'll notice the <a href></a> tags. These are special tags for hyperlinks. Let's look at one of these in more detail:

<a href="http://www.packtpub.com">Link 1</a>

It begins with <a href=, which tells the browser that this is a hyperlink.

Next, between double quote marks we have the URL to which the link points "http://www.packtpub.com". Then comes an angle bracket > which closes the first part of the tag. Now we have the link text that actually appears in the browser window. In this case, it is Link 1. And finally, there is the closing tag </a>, which tells the browser it's the end of the hyperlink.

We then have another heading tag, <h2></h2>—this time it's a level 2 heading , which appears in the browser slightly smaller than a level 1 heading. Next comes a <p></p> tag—these hold paragraph text. Then we see another heading, this time level 3 <h3></h3>, and then another paragraph.

Next, we have the closing body tag—</body>, as we have come to the end of our page's content. Finally, there's the closing </html> tag, as it's the end of the HTML document.

The stylesheet

Now, let's look at the CSS, which gives the web page its style; that is the color and size of elements on the page and the layout, or placement of the elements on the page. In the CSS Example folder that you downloaded, right-click on the style.css file and select Open With Notepad|.

What you are now looking at is a Cascading Style Sheet. It actually comprises a number of rules, which tell web browsers how to display specifi c types of content structures. Our style sheet contains six rules.

Let's examine one of those rules in more detail:

A CSS rule has two parts. The first part is the selector , which defines the HTML element to which the rule applies. There are various types of selectors, but we won't go into each type in detail as that would be the subject of a full CSS tutorial. Suffice to say that the selector in the preceding diagram is known as an ID selector —a # is used to identify this type of selector. I have defined this ID selector as #header; I could have chosen any ID which is appropriate and makes sense to me or anyone else who reads the stylesheet. Any word can be used to define an ID selector, there is no set vocabulary. #goofy or #sandwich would both work as ID selectors, but they may not make a lot of sense to someone else reading the stylesheet. Another common type of selector is called an element selector —these are based on standard HTML elements like body, h1, or p. In our stylesheet, the very first rule uses an element selector: body. All the other selectors here are ID selectors.

The second part of a CSS rule is known as the declaration , which is made up of a property and a value. The declaration describes the appearance of all the elements that match the selector.

There are hundreds of CSS properties available to web designers for use in their stylesheets. You can see a complete reference guide defining each and every available CSS property at: http://www.w3.org/TR/CSS2/propidx.html.

In this example, the declaration uses the background-color property , giving it a value of #333333. In CSS, the background-color property, fairly obviously, defines the background color of the selector. Colors can be defined using the RGB hexadecimal system. In this case, the hexadecimal value is #333333, which is a dark gray color.

So, in this example, the CSS rule states that any HTML elements defined as #header will have a dark gray background.

Let's examine another one of our CSS rules:

body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-color: #CCCCCC; color: #000000; }

This rule defines the body selector. As we've already seen, the HTML <body> element contains all the content for the web page. So, the styles defined here will apply to all the content in our HTML document. The first declaration in this rule refers to the font-family property, to which we have given the value, Arial, Helvetica, sans-serif. This means that all the text on our web page will appear in the Arial font.

The next two declarations deal with margin and padding. These affect the positioning of text (or other content) on the web page. Basically, by giving these two properties a 0 value, there is no space between the edge of the browser window and the content.

To fully understand about positioning in CSS, you need to know about something called the CSS Box Model . Again, it's beyond the scope of this article, but you can find excellent discussions on the CSS Box Model at http://www.brainjar.com/css/positioning/default.asp and http://www.w3schools.com/css/css_boxmodel.asp.

The next declaration uses the background-color property. We've seen this property before and here, it sets the background color for the whole page to light gray (#CCCCCC). The final declaration gives the color property a value of #000000. The color property applies to all the text on the page, making it black.

As you become more experienced with CSS, you'll notice that different browsers display some CSS declarations in slightly different ways. This is why you should always test your web pages in as many different browsers as possible.

Applying the stylesheet

So, we've seen the stylesheet. Now you're probably wondering how these styles are applied to our HTML document, page.html.

There are three ways of adding CSS to an HTML document. The first is known as Inline Declarations. This method simply involves adding CSS styles throughout the HTML document as and when they are required. For example, each time we have an <h2> heading in our HTML document, we could add a CSS style direct to the <h2> tag, as follows:

<h2 style="color: #FF0000; font-size: 16px;">Level 2 Heading</h2>

This would give us a red heading with a size of 16 pixels. The problem with this method is that we would have to add the styling to each and every <h2> heading in our document. If we decided at a later date that we wanted our <h2> headings to be blue, we would have to go through the document and edit each and every <h2> style.

The next method of adding CSS to our HTML is known as Embedded CSS . This involves placing the CSS in the header of our HTML document, for example:

<html> <head> <title>A Simple Web Page</title> <style type="text/css"> h2 { color: #FF0000; font-size: 16px; } </style> </head>

This would also make all <h2> headings in our HTML document red with a size of 16 pixels. This is a slightly better approach because we only have to define our <h2> heading style once and it is automatically applied to every <h2> heading in the document. The downside with this approach is that the CSS has to be added to every page in our website—there might be dozens or hundreds of pages that need the CSS added to their headers. Once again, if we wanted to make our <h2> headings blue throughout the website, we would have to edit the Embedded CSS on every page.

The third approach is widely regarded as the best. It is called External CSS. This involves keeping your CSS in a completely separate file from your web page, for example, style.css. You then add a link to your CSS file in the header of each web page that requires those styles. The benefit here is that you just need to maintain one CSS file. If you want to change your <h2> headings to blue, you just make one change to the style.css file and the new style is automatically applied to every page in your website.

This is the approach we'll use in our simple web page example. So, let's work through the steps that will apply the stylesheet to our HTML document.

Go back to the page.html file and open it in Notepad. The first step is to link our stylesheet to the HTML document. To do this, add the following line to the header just after the <title>A Simple Web Page</title> line:

<link rel="stylesheet" type="text/css" href="style.css" />

Your header should now look like this:

<html> <head> <title>A Simple Web Page - Styled</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

The link tag tells the browser that it needs to use an external stylesheet for this web page. The location of the stylesheet is specified by href="style.css". In this case, style.css is in the same directory as our HTML document, so we just need the filename for the link to work. However, you can link to any .css fi le, which may be in another directory or on another web server. So, you could have a link like this: href="http://www.anotherwebsite.com/style/style.css".

At this point let's take a look at the page. Save the file in Notepad, using File Save|. If you already have the page open in your browser, refresh or reload it. If it's not already open, go back to the CSS Example folder and double-click on page.html.

You'll see that the background color and font have already changed.

The web browser has already applied the first CSS rule in our stylesheet, because it's based on an element selector. Remember, these types of selectors apply to standard HTML elements and as we already have a <body></body> element in our document, the style for body has been applied.

The other rules in our stylesheet use ID selectors, so we need to tell the web browser which elements of our HTML we want these selectors to apply to. We do this by using <div> tags.

<div> tags enable us to define divisions or regions of an HTML document.

Let's begin by defining the #header element and, in so doing, tell the browser where we want the header style to be applied.

Back in page.html in Notepad, add the following line immediately after the opening <body> tag:

<div id="header">

Now add a closing </div> tag after the <h1>A Simple Web Page</h1> heading. This section of code should now look like this:

<body> <div id="header"> <h1>A Simple Web Page</h1> </div>

What we've done is told the browser that everything within the <div id="header"></div> tag should be styled using the #header rule.

Save the file again, go back to the page in your browser and refresh it. You'll see that the header styles have now been applied:

There are actually two rules from our stylesheet being applied here:

#header { background-color: #333333; }

and

#header h1 { padding: 5px; margin: 0; color: #FFFFFF; }

We have already looked at the first rule—it simply applies the dark gray background. The other rule uses a special kind of ID selector, known as a descendent selector. This specifies a rule for all <h1> elements that come within the #header ID. In this case, all <h1> elements within #header are white (#FFFFFF), with a padding of 5 pixels and a margin of 0.

Just to demonstrate that this only affects <h1> tags within #header, add this line immediately after the closing </div> tag:

<h1>Another H1 Heading</h1>

Now save page.html and refresh your browser. You will see another <h1> heading but it isn't styled the same as the heading in #header:

You can delete the line we just added—it was only for demonstration.

Now we'll style the links to create the navigation bar. Once again, we need to create a <div> to tell the browser where to apply our nav styling. Add the following line just after the closing </div> tag for the #header element:

<div id="nav">

And then add a closing </div> tag straight after the closing </ul> tag. This section of code should now look like this:

<body> <div id="header"> <h1>A Simple Web Page</h1> </div> <div id="nav"> <ul> <li><a href="http://www.packtpub.com">Link 1</a></li> <li><a href="http://www.packtpub.com">Link 2</a></li> <li><a href="http://www.packtpub.com">Link 3</a></li> <li><a href="http://www.packtpub.com">Link 4</a></li> </ul> </div>

Save page.html and refresh your browser. You should see the navigation bar just below the header. The browser has applied these three CSS rules to the #nav element:

#nav { font-weight: bold; background-color: #999999; padding: 5px; } #nav ul{ margin: 0; padding: 0; } #nav li{ display: inline; margin: 0; padding: 10; }

Hopefully, these CSS rules are starting to make a bit more sense now. You should be able to see what's going on in the first #nav rule. You may also have noticed that the other two contain more examples of descendent selectors. This time we're specifying styles that only apply to <ul> and <li> elements within #nav. If you added another unordered list (<ul>) elsewhere on the page, it would appear as a regular bulleted list.

In the #nav li rule, it's interesting to note the display: inline; declaration. This is what tells the browser to display the list items horizontally rather than in a vertical list.

That's our simple web page. I've included the finished HTML document (page-styled.html) in the CSS Example folder.

Tweaking the styles

The last stage in this very brief introduction to CSS is to see what happens if we make some changes to the stylesheet. Go back to style.css in Notepad. First, let's see what happens if we change the values for margin and padding in the body rule. Change it to this:

body { font-family: Arial, Helvetica, sans-serif; margin: 10px; padding: 10px; background-color: #CCCCCC; color: #000000; }

Save style.css and refresh your browser. You should see some extra space around the edge of the browser window. This is the 10 pixels margin and padding we just added.

Now let's add a rule to change the styling of our <h2> heading. Add the following at the end of the stylesheet:

h2 { font-family: Courier New, Courier, mono; color: #0000FF; }

After you've saved style.css and refreshed your browser, you'll see that our <h2> heading is now in Courier font and colored blue. This style will also apply to any other <h2> headings we add to the document.

That was a very brief introduction to HTML and CSS and you'll probably want to supplement it with some further reading. It's a large subject and there is no way you could become an expert after such a short introduction. The aim of this brief tutorial was to teach you what HTML and CSS code looks like and how the two technologies work together to create web pages. Admittedly, much of the detail has been glossed over. However, this overview should enable you to follow the work we'll be doing in the case study as it involves editing the stylesheets for the Thematic theme framework (I will provide all the CSS; to see it working, you just need to paste it into the case study stylesheets). But before we move on to that, you may want to set up an environment on your own computer that allows you to run WordPress locally.

Summary

In this article, we looked at the principles of blog design and how to implement them using CSS and HTML



WordPress 3 For Business Bloggers Promote and grow your WordPress blog with advanced marketing techniques, plugins, advertising, and SEO with this book and ebook
Published: December 2011
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

About the Author :


Paul Thewlis

Paul Thewlis has worked as a web communications professional in the public and private sectors. He is currently E-Communications Manager for a multinational transport company based in the UK. He began his web career as a Technical Editor, working on web design books for a well-known publisher. He has extensive experience of many content management systems and blogging platforms. He is an expert in the use of social media within corporate communications.

Contact Paul Thewlis

Books From Packt


WordPress 3.0 jQuery
WordPress 3.0 jQuery

WordPress 3 Ultimate Security
WordPress 3 Ultimate Security

WordPress 3 Plugin Development Essentials
WordPress 3 Plugin Development Essentials

WordPress 3 Site Blueprints
WordPress 3 Site Blueprints

Internet Marketing with WordPress
Internet Marketing with WordPress

WordPress 3 Cookbook
WordPress 3 Cookbook

WordPress and Flash 10x Cookbook
WordPress and Flash 10x Cookbook

WordPress 3 Search Engine Optimization
WordPress 3 Search Engine Optimization


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software