Patterns again

Where are we?

You’ve learned about paragraphs, headings, horizontal rules, CSS, and other stuff. You’ve seen some basic guidelines that I use when I format a new page.

This lesson’s goals

Let’s talk a little more about patterns.



In the previous lesson, I showed you some rules that I often use for formatting text. Like “Use a 14px font for most text,” and “Use larger fonts for headings.” was that helpful?


Yes, very.




There are lots of CSS rules. You can use them in a bazillion different combinations. It was making my brain hurt.

You gave us a…, well, some CSS rules that work OK.


Where did I get those rules?


You said that you’d used them in the past, that they worked for you.



Remember that a pattern is a way of solving a problem that someone has found useful. Instead of working out the solution to a problem all over again, sometimes you can just grab a pattern than works.

CoreDogs has a pattern library. To get to it, click on the Tools tab, and then the Patterns tab:

Tools tab

Patterns tab

Figure 1. Accessing the pattern library

Look at the Basic text styling pattern. It uses the guidelines from the previous lesson. The pattern includes helpful tips, like using quotes around typefaces that have spaces in their names.

Also look at the Title – Details pattern. It tells you how to use section headings. The pattern uses CSS margins. We haven’t covered that yet; that comes later. But you should be able to follow the pattern.

Some patterns are often used together, or are alternatives to each other. Both of the patterns just mentioned link to each other in Related patterns.

Related patterns

Figure 2. Related patterns

Adjusting patterns


Patterns are shortcuts, right?




But is using someone else’s shortcut always a good idea? It might not do exactly what you want.


Good point!

You usually need to adjust patterns, so they make sense for your use case (that is, the site you are working on at the moment). For example, the Title – Details pattern uses the same color for text and titles.

Title text and detail text are the same color

Figure 3. Title text and detail text are the same color

But maybe you want different colors.

Say you’re making a site for a school that has the color scheme blue and white. These colors are part of its branding (we talked about branding earlier). You might want the text to look like this:

New colors

Figure 4. New colors

So you need to adjust the pattern.

What this means is that you can’t just throw the pattern in without understanding it. You need to understand it, so you can change it to fit the job.

Patterns are not like Lego bricks that you can snap together. They’re more like cookie cutters.

Cookier cutter

Figure 5. A cookie cutter

Image from WikiHow.

You can just stamp out the basic shape. But if you need to, you change the shape before you put the cookie into the oven. Maybe trim off the edges of the hat, and round out the head.

Original cookie shape Trimmed cookie shape

Figure 6. Original and changed cookie

Adjust patterns as you need to, to fit the goals of your project.

Other pattern libraries

The CoreDogs pattern library was created to help you learn Web tech. The patterns are basic, and easy to use.

Professional Webers might prefer other libraries. The Yahoo pattern library is an example.


  • A pattern is a proven way of solving a problem.
  • Reusing good patterns makes it easier and faster to create a good Web site.
  • CoreDogs has a useful collection of patterns.
  • You need to understand how each pattern works, so you can adjust it as needed.

What now?

Let’s see how you make lists of stuff.