Lesson 7:

Customizing Your Website, Part 1

Chapter 1: Introduction Introduction

Welcome back! Building a Backyard Water Garden is starting to come together. We've decided on

its framework; we've added written and media content; and we now have a working menu. But

take a look at the home page:

Home page before customization

It looks a little blah . . . . I think it's time to add some style to our substance.

Many WordPress themes include an options page that lets you tweak the design without having to

know HTML, CSS, and PHP--the three coding languages underneath that created the script. You'll

usually find a theme’s options within the Appearance submenu. So let's see what our Marina

theme offers in the way of customization.

Open the WordPress back end, and click Appearance > Marina Options.

Marina theme options screen

The Marina options panel lets you control only the slider image on the home page, a Twitter feed,

and some sidebar advertising. That's not much compared with what's available in many premium

themes:

Premium theme's Options screen

As you can see, premium themes can make your life easier. But let's turn the relatively sparse

options offered by our Marina theme into opportunity. It gives you a chance to learn how to use

CSS and HTML to tweak any WordPress website's appearance.

This won't be a thorough tutorial. It takes time to learn these coding languages, and we're simply

going to scratch the surface in the next couple of lessons. But by the time we're finished, you

should feel confident enough to open the back end editor and make many kinds of improvements.

You'll learn to change font styles, sizes, and colors; replace headers; adjust column sizes and

proportions; and also how to do some structural revisions.

Many computer languages employ punctuation and terminology that are difficult to learn or

remember. They truly do deserve the name code. (Actually, if any of you have a theory why

programming languages are so often full of obscure commands, please post your thoughts in the

discussion area. The computer can be made to print if you use the English word print in your

programming. So why do most computer languages use bizarre code like this #include <stdio.h>

int main() {printf instead? The computer doesn’t care what words we use. So wouldn’t it be more

sensible to use print? And other English words?)

But fortunately, HTML and CSS are usually easy to understand because they do use English words

like color, margin, and background. Does that sound interesting? Then let's add some style!

Chapter 2: Getting Started With Styling

Back in Lesson 3, we compared creating a website to building a house. You start with a blueprint,

build a framework, and add the defining features. In a website, HTML (Hypertext Markup Language)

represents our house's framing. It forms the site's basic structure. But this structure is already in

place. All we need to do is customize some details.

CSS (short for Cascading Style Sheets) is similar to what happens after the house is built: It defines

how the structure will be decorated. CSS allows the designer to create a consistent style across all

the pages of a website, using a style sheet—a file that spells out how each element should look.

Here’s the first part of our Marina’s style sheet. See if you can figure out what it’s saying about the

appearance of our pages:

The beginning of the Marina theme style sheet

When people built websites in the days before CSS, they’d have to style every single page and

element separately. And if you later needed to modify something, you had to go back and make

that change individually on every one of those pages and elements! There was no global search and

replace, or general style sheet that kept all specs in one file.

With CSS (cascading style sheets), once you change a property in the style sheet, it's automatically

applied to every instance of that property throughout the site! One little change by you, applied

automatically as many times as necessary in all your pages.

Because CSS needs to know what element you are modifying (the biggest headlines? the page

margins?), CSS is always used in conjunction with HTML.

HTML’s job is to describe each page’s layout and qualities. HTML creates a marked-up page of

content, with the largest headlines, for example, tagged like this:

<h1>Build a Water Garden</h1>

If you put the HTML code on the left (in a page’s textbox with the Text tab selected) you’ll get a result like

the one shown on the right in a browser:

HTML and CSS work together as a team, each with its own contribution to the finished product: a

displayed Web page. HTML labels each element of content (such as the text of a headline) by

surrounding it with a pair of tags showing where that element begins in the page, where it ends,

and what kind of element it is. <H1>, for example, announces the start of an H1 (largest) headline.

Precisely how large it’s supposed to be (and other things like its color and typeface) is the job that

CSS performs.

The style sheet for the H1 headlines might look like this:

h1 { color: blue; font- family:

verdana; fontsize: 300%;

}

That’s an example of CSS code specifying that all H1 headlines should be blue, be displayed in the

typeface named Verdana, and be 300% large (we’ll explain shortly what 300% is 300 per cent of).

This is why you'll need to understand how CSS and HTML work together, each doing a different task

to achieve their common goal: nice-looking Web pages. So let’s go over HTML a bit first, then we’ll

dive into CSS in Chapter 3.

HTML Basics

HTML tells browsers how to structure Web page elements—banners, menus, images, headlines,

paragraphs, sidebars, footers, and everything else you see on a Web page.

A traditional HTML file uses tags to identify the elements. An HTML tag begins with this symbol:

<

And ends with this symbol:

>

Most elements have an opening and closing set of tags. For example, to create a heading, here I've

added tags to the beginning and end of some text:

<h1>Retiring Baby Boomers Give Florida the Cold Shoulder</h1>

And I'll now wrap ordinary body text in another set of tags, showing where a paragraph break

should happen in the page:

<p>Florida just isn't what it used to be for retirees. And the slowdown in retiree

migration, as well as an overall drop in population growth, suggests it may take

the Sunshine State longer than other states to get back its economic

footing.</p>

The browser knows that the <h1> tags represent the header and that the <p> tags define a

paragraph. Browsers are programmed to remove the tags themselves from the display. So here's

the result of the above HTML:

Browser’s default headline and body text styles

Browsers apply their own default style to basic HTML if there are no accompanying CSS

specifications. But suppose you don't want the headline to be centered (a browser default), or

you'd prefer a different typeface style than the one the Browser uses (unless told otherwise)?

That's why you provide cascading style sheets (we’ll soon see what the cascade does).

CSS uses a different format and syntax than HTML: h1

{ text-align: left; font-weight: bold; font-size:

14px; font-style:

italic;

}

p { text-align: left; fontsize:

12px; font-family:

Georgia;

}

Linking our original HTML to this CSS code will transform the content so it displays like this:

After CSS modifies browser default styles

Adjusting alignment, font styles, and sizes are only a few of the many ways you can use CSS to

change the way your Web pages look. We'll examine some others a bit later.

HTML Behind the Scenes

Every HTML file starts with a <head> area like this:

Sample HTML <head> zone

Don’t worry about the first three lines. They’re always included in an HTML file (So one does

wonder…If they are always there, why do they need to be there at all?)

But if you’re curious: The DOCTYPE on the first line tells the visitor's browser how to interpret the

page based on the Transitional XHTML version. (XHTML is a version of HTML. There's more

information about the difference in this lesson's FAQs area.)

The last two lines in the header are significant, though. They tell the browser, or whatever is

interpreting the HTML, where to find the CSS style sheet that goes with it. This is a link, marrying

the HTML and CSS. WordPress does all this linking for you.

Below the header on most websites is the banner. In our Marina theme, the banner is tagged

<masthead>. Underneath the banner is the main horizontal menu, which is specified with the

HTML <menu> tag.

The main content area follows. Its overall HTML tag is <content>, but it includes many properties

including <page> and <post>, <title>, <entry>, <p> for paragraph, and <category>.

The <sidebar> is the next major HTML element in our theme, and the <footer> is last.

There are even more elements: lists, headings, images, and calendar settings, to name just a few.

HTML also has tags to enter line breaks (<br />), to create links (<a href>), and to display images

(<img src>). And there are rules specifying how to nest elements within a statement. I’m just giving

you a taste here. There are entire books devoted to teaching HTML and CSS.

In a traditional website, a page file includes HTML tags followed by content. But in WordPress, the

tags work alongside the scripting language, PHP, whose job it is to fetch your site’s content from

the WordPress database to send to your visitors' browsers.

Using HTML to Make Links

The first two letters in HTML stand for hypertext, text that links to other content. This is what

we're constantly doing online—clicking links that take us to different places.

Links work by means of an HTML statement that begins with the <a href> tag. So a full link to the

home page on our site would be constructed like this:

<a href="http://yoursitename.com/">This website contains some great advice for water

gardeners.</a>

The <a href> tag is followed by an equals sign and the link's URL (surrounded by quotation marks).

Next comes the text that will be hyperlinked. And the </a> tag closes the statement.

Confused yet? Let's apply some of this, so you can get a handle on how it works.

1. Copy the whole <a href… link above, and paste it into the Text (not Visual) tab in the

textbox on the Build a Water Garden > Materials page of our website. To get there, go

to Pages, and click Materials.

(Important: Substitute your actual domain name for yoursitename in the example

HTML.)

2. Click Update, and then click View Page.

3. Click the link on the page, and your website's home page should open. (If it doesn’t, go

back to step 1 and proofread the link to ensure you got your website’s URL correct, and

all the surrounding punctuation right.)

So what's the relationship between HTML and CSS in this example? You might have noticed that

when you put your cursor over the link, the font got darker (the darkening is subtle, but if you get

really close to the screen, and the room is dark…). That's how you know the sentence was a link.

The theme designer made this happen by putting this CSS code into the theme’s style sheet:

.entry a:link,.entry a:visited { color:#1D81B6; background-color: transparent;

}

.entry a:hover { color:#00488F; backgroundcolor:

transparent; text-decoration: none; }

The link itself is styled in the first rule. The second rule, which takes effect when a mouse cursor

hovers over the phrase, changes the font color. You’ll be forgiven for thinking: how does #00488F

describe a subtle darkening of #1D81B6?

This is code properly so called, isn’t it? Patience, we’ll soon see how to choose colors much more

easily.

Displaying Images in HTML

When we added photos in Lesson 5, WordPress worked in the background to include the HTML

needed to make them appear. Here's the statement it created to display the waterfall picture on

the home page:

<img class="alignleft size-medium wp-image-22" title="A waterfall makes an attractive

addition to a water garden."

src="http://buildabackyardwatergarden.com/wpcontent/uploads/2011/09/waterfallsli der-

300x200.jpg" alt="A waterfall makes an attractive addition to a water garden."

width="300" height="200" />

This HTML provides the link to the image's URL (so the browser knows where to find the photo), the

title and alt attributes we added when we uploaded the picture, and its dimensions. That's a lot of

information! But the good news is that WordPress will take care of these things for you every time

you upload an image through the back end. I'm showing you this just in case you might need to add

an image to a website by yourself.

So Many Rules!

I know this is a lot to learn . . . . These are two new languages. But don't worry about committing

any of it to memory. Unless you’re like Martha Stewart and have a side-brain that stores everything

you’ve ever read, you should be conservative about what you memorize.

Albert Einstein--who knew a thing or two about thinking--once said, "Never memorize something

you can look up." His advice is important to remember when you're building and styling websites

with HTML and CSS, which have more rules, properties, and values than you can shake a stick at.

So don't be concerned about the details. In the Supplementary Material section, I've posted links to

"cheat sheets" that you can download and consult when you're working with HTML and CSS.

We've focused on HTML so far. In our next chapter, we'll examine CSS.

Chapter 3: Before you begin...

CSS seems somewhat complicated, and when you don't see the changes you've made, you might think the

problem is in your coding.

Well, sometimes it is . . . but it's just as likely that your browser is to blame!

To display pages as quickly as possible, browsers use a trick. You visit a web page. They store a copy

of that page, in an area called a cache. If you go back to that page the browser can then just slap

the copy right up on your screen. That’s faster than reading the CSS, HTML, and so on and then

rebuilding the screen on the fly.

Therefore, your browser won’t necessarily realize that you're working on the web page and have

made some changes to it. When you click View Page or otherwise try to see your edits, the browser

just keeps displaying the old version from its cache. It looks to you as if nothing's been modified.

This is why you need to refresh your screen, thereby clearing the page from the browser's cache.

When you click your browser's Refresh button (or the F5 key on a Windows system), the browser

will look for a newer version of the page, and you'll see the changes right away!

Browser Refresh icon

In the same way, clearing the cache (which you can do in the browser’s Tools menu) will make it

more likely you'll see a style change immediately.

So make it a habit: Every time you make a change to your style sheet, refresh the screen before you

view the change.

If F5 doesn’t work, try CTL+SHIFT+R, a more severe force refresh. And you also sometimes need to

even flush your host’s cache as well. Hosts speed things up via caching, too! In SiteGround, click the

Purge SG Cache link up top:

A Beginner's Guide to CSS

If we were interior decorators using CSS rules, our design plan might look like this:

kitchen { floor:

ceramic; walls: light-blue; ceiling-lights: recessed; }

living room { curtains:

tan; floor: hardwood;

floorcolor: maple; walls: off-white }

It's not too different when we apply style sheets to a website. Each named group of specs—the

stuff between two {} is known as a rule. The name of the rule is its selector. The selectors in the

example above are kitchen and living room.

This next example defines the HTML paragraph element as centered and red. The p stands for the

HTML tag <p>, paragraph (the body text for this particular paragraph). So when the HTML is

rendered for display, this CSS rule causes the paragraphs of text to turn red and be centered on the

page:

p {

color: red;

textalign: center;

}

Within each rule is at least one property, such as color. Right after a property comes its quality, like

red or blue. These are called the property’s value.

For CSS to work properly, you need to:

• Follow the selector name with an open curly bracket: {

• Spell and punctuate the properties correctly. As always in computer programming, a

single typo can mess things up fast. The machine won’t start smoldering or anything.

But your code will be misinterpreted or ignored.

• Always place a colon (:) between a property and its value.

• Add a semicolon (;) after the value.

• After the final value and semicolon, end the rule with a closed curly bracket: }

Before you go any further…

WordPress has a built-in syntax checker, which tells you whether you’ve properly formed each CSS

rule. While this can be helpful, it can slow you down if you don’t have a thorough knowledge of CSS.

So I recommend disabling this feature for now:

1. Go to Users > Your Profile, and check the box next to “Disable syntax highlighting when

editing code.”

2. Scroll down to the bottom of the screen and click Update Profile.

CSS The Easy Way

You might be wondering: How am I supposed to remember all this CSS code? With WordPress, you

don’t have to! We’ll copy, then modify, existing code.

Let’s start our exploration of CSS with the easiest WordPress tool, the Theme Customizer. Go to

Appearance > Edit CSS. Read the message on the upper left pane, then click Close. You’ll see your page on

the right and an empty space where you can type in CSS on the left. Paste or type this into the CSS area,

and watch what happens to your page:

p { color:red;

fontsize: 20px;

fontfamily: Georgia;

}

As soon as you type a property-value pair, like color: red; the change happens in your page on the right side.

We’ve now changed the color, increased the size, and switched to a classic serif typeface. For now, though,

don’t click the publish button. We want to continue working on the site in future chapters using the Marina

theme without modifications.

If you actually liked the changes you made, save them for the future before leaving this page. Just drag

your mouse over the code to select the CSS you’ve written, then paste it into Notepad or otherwise save it

to a file for later use. CSS code is ordinary text that can be saved and pasted back in at any time.

The reason you should save your code is that you might later change to a different theme, and all your

customizing will be lost unless you’ve saved a backup of your CSS code. However, if you merely update your

existing theme—no worries-- your changes in the Edit CSS page will remain in effect. Untouched.

Tip: Try an experiment: Click the Start Fresh option on the lower left. What you now see is your site totally

defaulted—even the theme’s style definitions are turned off. (Though other elements, such as the rotating

graphic ? on the home page, remain intact.) Use this option if you want to define everything about the styles

yourself. Click the Start Fresh option again to deselect it and restore the full theme specifications. In other

word, reactivate the theme’s style sheet.

Now Click the X in the upper left corner to leave this page so we can get a little deeper into the theme’s CSS.

When warned that your changes will be lost, good! Click OK.

We’ll come back to the Theme Customizer soon, but let’s now take a brief look at the heavy-duty CSS editor,

AKA Theme Editor.

CSS: The Engine Room Way

The Edit CSS theme customizer is pretty easy to use. But it has one major drawback, it’s not that flexible.

To really take total control of styles, you need to go fetch some of the theme’s CSS code. But this approach

also has its own serious weakness: The main drawback of directly modifying a theme’s code is that your

tweaks will be lost not only if you switch to a different theme, but also if you merely update the existing

theme! And that’s likely to happen.

True, it’s not hard to save a backup. Just CTL+A to select the theme’s entire stylesheet, then paste it into

Notepad and save the file on your hard drive. Might as well do that now, just in case. Go ahead and take a

minute to back the theme’s CSS up. Go to Appearance > Editor. Click to select Style Sheet (under Theme

Files). Click your mouse inside the code area (the white area, below Selected file content). Now just press

CTL+A to select all the code, then open Notepad and press CTL+V to paste it. Save this notepad file on your

hard drive.

But when an updated version of your theme arrives, you might not want to override its entire new set of

styles, so I suggest only copying the tweaked code, so you can later selectively modify the new theme’s CSS.

In other words, you have to keep notes of whatever you do. One other warning, you can destabilize your

site by fiddling in the theme’s own CSS or other files. This approach is not for novices. Don’t change anything

in the Appearance > Editor style sheet. You can copy from there, but no fiddling with it.

Let’s take a little tour of the engine room now and see what’s going on. As you’ll soon discover, we’ll take

hybrid approach to modifying our theme’s CSS. We’ll copy code from the theme’s CSS file, but modify and

save the changes in our Theme Customizer (Edit CSS). This will give us the best of both worlds—easy

customizing, that persists. First, let’s add a useful plugin.

Finding the Right Rule

The Marina style sheet is a long document, so it can be difficult to locate individual rules within it.

But always remember that when you’re working with WordPress, you’re already in a browser. So

you can usually just press CTL+F to open a search field. And then, after typing in, say, H1, you can

click the search field’s down-arrow repeatedly to jump to each reference to that headline

particular.

But at this point I'd like you to install another plugin that makes navigating a style sheet easier.

1. In the WordPress menu, go to Plugins > Add New, and type this into the search box: syntax

highlighter for theme/plugin editor.

2. When you see the listing (the author is Space X-Chimp), click Install Now.

3. Click Activate.

4. When the plugin is active, click its Settings link... and configure the plugin like this:

Now go to the Theme Editor (Appearance > Editor—not Appearance > Edit CSS). You'll see the

theme’s CSS data, and that the X-Chimp has added line numbers. I'll be referring to those line

numbers to help you locate the proper rule. My numbers and yours may not always be exactly the

same, but they'll be close.

Getting to Know the Theme Style Sheet

It's time to see CSS in action. In the WordPress admin area, you'll find all the templates and style

sheets on the Edit Themes page (Appearance > Editor).

WordPress Edit Themes screen

The right column lists the theme's templates and style sheets. Templates are the HTML and PHP

files that provide the website's structure and content. The style sheet is the CSS file that modifies

the templates. When you click any of these templates over in the right side, the file’s code will be

displayed in the main column editor on the left. In the screenshot above, style sheet (style.css) has

been selected, and is thus available for you to modify in the editing area on the left.

If you see a different file selected, click Stylesheet.

Preserving Changes to the Style Sheet

CSS is an efficient system . . . until a theme designer revises the theme you use. Remember that

when you update your theme, it will overwrite the older style sheet, and you'd lose any changes

you made by editing the theme here in this Edit Themes screen.

There are two usual ways to avoid this nightmare. First, you could create or install a child theme,

which has its own, separate style sheet. You then edit the child theme instead of the original style

sheet in the parent theme. When you update the parent theme, your child theme style sheet edits

remain, and your changes are preserved.

Setting up and installing a child theme traditionally is complicated and time-consuming. So as is

often the case, the good people at WordPress have come up with an easier solution. It's the Theme

Customizer we looked at earlier. and it works just like a child theme, but without the setup

headaches. Remember, it’s opened via Appearance > Edit CSS. That will be your child theme.

Now we’re ready. Let’s make some basic changes to the website's default font style, size, and color.

These properties are controlled by the body selector, which is the first major CSS rule under the

header. Copy this rule (lines 16-22) from the Marina Stylesheet by going to the WordPress

Appearance > Editor screen. Then paste it into the CSS pane (lower left) of the Appearance > Edit

CSS screen. When you're done, the Additional CSS area should look the screenshot below.

Body rule pasted into Additional CSS area

We'll skip the first three properties, which involve the site's spacing and default background.

Let's begin by modifying the font-family property, which specifies the style of the text characters.

To accurately display any font, the user's computer must have the same font loaded. But how can

you know whether a particular font is on a particular computer? For this reason, designers usually

list several fonts on style sheets, in order of preference. If a visitor's computer doesn't have the first

font installed, its browser will try the second font and proceed down the line until it finds a

compatible style.

Our theme's preferred font is Verdana, followed by Arial. All four fonts listed here are in the sans

serif family, meaning they're styled like the type on this page, without the little projections (known

as serifs) at the end of each stroke.

1. Verdana looks a little out-of-date, so let's change it. I'd like to have a serif style like

Georgia leading the list. For body text, I think serif styles can be easier to read, but

experts disagree on this issue.

Change the font-family property to this:

font-family: Georgia, Times New Roman, serif;

Notice that the last specification here is serif, which means if you don’t have the preferred styles

listed, just use whatever serif font you do have.

You should see this effect immediately on the right side in the body text. If you don’t see the

characters change to the serif typeface, proofread your CSS. Punctuation and spelling must be

exact.

2. Another change we’ll make is to increase the default font size. It's currently a standard 12

pixels. But for better legibility, change it to this:

font-size: 14px;

3. One more change: The body rule's background:url value is a relative URL path

(images/body.png). For the image to appear properly when using the Edit CSS style

sheet, you'll have to describe its complete path (also known as the absolute path),

which displays the entire RL. So add the full path to the image inside the parentheses by

changing the background property to look like this:

background: #fff url(http://yoursite.com/wpcontent/themes/Marina/images/body.png) top

repeat-x;

(Remember to change yoursite here to your real domain’s, or subdomain’s, name. It’s

up there in the browser’s address bar, and begins with https://watergarden and ends

with host.com.)

3. Click the Publish button.

4. To view the changes, go to the website's front end home page. Be sure to refresh your

browser by using the F5 key or clicking the browser's refresh button.

Before and After

The main font in the "Build a Water Garden" article is now slightly larger and looks different, more

sophisticated maybe, than the original.

Ready for some more hands-on? Let's change the main content's appearance a bit more. The letters

look a little gray to you?

To make it easier to read, we can increase the contrast by making the text darker. The font color is

controlled by the .entry p selector (lines 727 through 732) in the original style sheet (Appearance >

Editor).

Scroll down until you find the rule. Then copy and paste it in the Additional CSS screen (Appearance

> Edit CSS), below the body rule you added earlier.

1. After the last line and before the closing curly bracket, add this:

color: #333333;

This changes the font color to a darker gray.

2. Make sure there's a semicolon (;) at the end of the line.

3. Click Publish, and then click the site's title to view the home page. Mind you, this isn’t a

drastic darkening. You might have to look closely, or cut and paste the color:#333333

once or twice to see the difference. If you want to go all the way, change it to color:

black.

Great work! We'll do some more style changes soon, but now it's time to move to Chapter 4, where

I'll explain another important CSS concept. Actually, what you’ve just done is a good example of the

great CSS feature we’ll explore next: the cascade. You have overruled the existing style sheet by

specifying rules of your own in the Customizing Additional CSS tool.

Chapter 4: Exploring the Cascade

The C in CSS stands for cascading, but what does that mean?

I like to picture a waterfall. Up at the top a basket of nicely arranged flowers is dropped into the

water. This is the theme’s CSS file.

The basket drops down, bouncing off a few outcroppings on the way. These are the several CSS

specifications that modify the flowers: the first outcropping is your child theme in Edit CSS, the next

is any CSS code you add to the Text tab of a page’s textbox. This is called inline code, and is how you

can change the style of a single word, sentence, paragraph, headline, and so on. As opposed to

rules further up the cascade—which modify all the body text, headlines, or whatever.

So you end up with a different flower arrangement when the basket ends up in the pool at the

bottom of the waterfall.

One way to use the cascade is to apply rules to every HTML page that's linked to the style sheet.

The cascade also makes it easy to modify those rules later, site-wide, rather than having to modify

each individual H1 or paragraph.

One way to think of it is that there are different levels of priority in CSS. The theme style sheet sets

out its preferences, but you can add a child theme (which is what the Customizing Additional CSS

tool in effect is). So whenever you specify something in a child theme that differs from the parent

them—the child overrules the parent. The child takes precedence.

For example, the body element rule, at the very top of the style sheet cascade (the theme’s style

sheet), dictates the entire website's default appearance. The values in that body definition (rule)

will take effect when the site is displayed, as long as no one adds or changes a property lower in the

cascade, such as the Edit CSS child theme, or inline CSS. Earlier we switched the body font style to

Georgia. This changes every other property's font to Georgia too. . . unless a rule for a property

listed later specifies a different font style!

This is what makes the Additional CSS feature work. WordPress looks at your Edit CSS rules, if any,

after the original style sheet, so that any rule we add to the Additional CSS screen will override the

original rule.

Let’s see how this works again by updating the site’s headings' font style, size, and color. Let's go

back to the Marina style sheet and find the head tags (h1, h2, h3, and so on). (H1 is the biggest

heading, h2 the second biggest, and on down.)

The heading selector is a few rules underneath the body selector (at lines 41 through 44). It looks

like this:

h1, h2, h3, h4, h5, h6 { line- height:

125%; font-weight: bold;

}

This rule means all headings should be bold; and if they stretch to two lines, there should be a space

between the lines equal to 125% of the font height.

We're going to add CSS to make the headings black and substitute a new font. So copy the above

rule from the Theme’s style sheet, and then paste it into the Additional CSS screen (Appearance >

Edit CSS.

1. Under the font-weight line, add the following:

font-family: Trebuchet MS, Tahoma, Century Gothic, Arial; color:

#000000;

This changes the font style and the font color (to black). Notice how this changes the

home page heading Building a Water Garden.

2. Be sure to include that closed curly bracket at the end of the rule. When you're finished,

it should look like this:

h1, h2, h3, h4, h5, h6 { line-height: 125%; font-weight:

bold; font-family: Trebuchet MS, Tahoma, Century Gothic,

Arial; color: #000000;

}

3. Click Publish in the top right corner of the column. Then click the site title to view the

home page.

Home page headline

Some experts on site design suggest you do just what we’ve done here: change body text to serif

and headline text to sans-serif. As usual, others disagree. But whatever your preference is for your

site, you now know a good way to quickly apply the changes.

Remember: Think of the cascade as style rules starting at the top, but bouncing down over other

style sheets or rules that can modify various properties before reaching the final, displayed pages.

The cascade can continue well past the original style.css file (known as the external style sheet, in

our case it’s the theme’s CSS file) and even past the Additional CSS screen we’ve been modifying.

This is an outline of the simplest CSS hierarchy:

The CSS cascade

Don't worry—this isn't as confusing as it looks. The CSS rules in the document level style sheet

(the header of each page's HTML/PHP file) override rules on the external style sheets (the theme’s

style.css and our child theme’s Additional CSS rules).

And remember that you use inline CSS if you want to modify just a single piece of content (like

change just one paragraph on one page to red), you can go to the body of the HTML and (within the

HTML code itself) insert the CSS around the content. You do this in the Text tab of a page’s textbox.

In this example, we’re using an inline rule to say to a browser: Ignore any previous body text style

specifications, and make this particular paragraph (surrounded by <p and </p>) red:

<p style="color:#ff0000;">Algae steal the nutrients and oxygen that fish and plants would

otherwise consume.</p> This is called an inline style because it's placed within the HTML elements on a Web page.

CSS Values

You can use just about any style or color in your Web pages. And you can incorporate as many

properties and values as you want in any CSS rule. Let’s look at a few of the styling elements

available, starting with Borders.

• Borders: To add a border around a paragraph requires only one extra line of code: p {

border: 1px solid black; } Let's build a border around the link we created earlier, on

the We’re Here to Help You Build a Water Garden page. This will show you one way to

add an inline style.

1. Go to Pages, and hover your mouse pointer on the page’s title and click Edit.

2. Click the Text tab on the top right corner of the text box.

Since we're making this CSS change inline (within the HTML page itself, not on a

style sheet), we'll need to use HTML syntax to create the border. It begins with a

<p> paragraph tag to change the element's style, followed by the CSS instructions

to create a solid black border, one pixel wide, and center the text. The paragraph

tags surround the original link, like this:

<p style="border:1px solid black; text-align:center;"><a

href="http://yoursite.com/"> Our technical staff is available to answer your

questions seven days a week, between 8:00 a.m. and 6:00 p.m.,

Eastern time. Call us toll-free at 800-555-1212.</a></p>

Note: Standalone CSS code (like the code you use in your child theme in Appearance > Edit

CSS) employs those curly braces { }. However, when you insert CSS within HTML, you use

style=” and omit the braces.

3. Copy the code above and paste it into the text area. IMPORTANT:

Remember to substitute your real home page URL for "yoursite.com."

4. Click Update, then View Page.

Link, after adding border

Do you know why we made this change inline, rather than on the Edit CSS screen? It's because I wanted the

border only around this particular sentence, so by adding the CSS values inside the HTML, it will apply to just

this sentence.

• Colors: You can apply colors to fonts, backgrounds, and list elements. CSS usually

represents colors as hexadecimal values, strings of letters and/or numbers preceded by

a hash symbol (#). In CSS-speak, the color white is #ffffff, blue is #0000ff, and purple is

#800080.

Part of a hexadecimal chart

Because no one can remember all of the available colors, they're also included on cheat sheets. I've

included a link to one in the Supplementary Material section.

Let's try changing an element's color. On our water garden website, it's a little hard to read the

white text when hovering over a parent page in the main horizontal menu.

1. Go back to the Theme Editor (Appearance > Editor), and make sure the style sheet is

selected in the right column (under Theme Files). This is the rule to change:

#menu li a:hover, #menu li a:active { background:url(images/menua.png) repeatx;

color:

#fff; margin: 0px; padding: 0px 10px

; line-height:39px; text-decoration: none; }

For a little practice with searching a large code file, try locating this rule by pressing CTL+F.

All you need to type into the box that appears would be something fairly unique—so you

narrow down the number of hits. Try menu for example.

You'll find this rule in the Page Menu section of the style sheet (lines 469 through 477), a

little less than halfway down. Copy this rule, then paste it into the Additional CSS screen

(Edit > CSS).

2. Change the color property from #fff to #000. (You can specify some color codes with

three characters, rather than six. #fff is the code for white; and

#000 is black. These we can remember!)

3. Click the blue Publish button.

Take a look over on the right side at the home page menu. When you move your cursor over the

parent page links, they're now black and easier to read. Another improvement via CSS. We’ve done

it again! One more modification for this lesson…

Spacing

Want to put a bit more space between two elements? It's fairly easy with CSS. On our site, I've

noticed that the post on the What's New page are too close to the left margin. Let's correct that.

Post slap against the left column

This post excerpt is controlled by the box class.

1. Scroll down from the top of the style sheet (almost halfway) to find the box rule (lines

547 to 554). It looks like this:

.box { width: 325px; color:

#6a7075; float: left; clear:

left; marginright:

15px; marginbottom:

20px; }

Copy the rule, and paste it into the Additional CSS area.

Notice that the this box holding the post has margins specified for the bottom and the

right sides, but not for the left side (where it's butting right up to the margin). We can

give the box more breathing space by adding 15 pixels to its left margin.

2. Insert the margin-left: 15px; property anywhere inside the box rule—the order of the

properties doesn't matter.

3. Also change the width, from 325 px to 310 px, so the box takes up the same amount

of space as it did when we found it. (We added 15 to the margin, so we’re subtracting

15 from the width. Just use your eye to tell you what kinds of changes like this to make.

Even little adjustments can sometimes improve how things look.)

4. Click Publish.

Now take a look at what happens with a larger left margin:

Post with wider left margin

The difference is subtle, but do you agree that our modification is an improvement?

What I've showed you here is just a little slice of what's possible with a bit of CSS and HTML.

Stay tuned. There's more to come in Lesson 8!

Chapter 5: Summary

If your head is spinning a little, don't worry. This was the hard part of HTML and CSS, which are

essentially a bunch of rules . . . and nobody likes too many rules!

Carefully, reach around and pat yourself on the back: You did really well to get through this lesson!

You learned that HTML is the way we create a website's basic structure so browsers can interpret it.

After the site is "framed up," we use CSS to style the elements.

While HTML and CSS must work together, each has a somewhat different format and syntax—and

we looked at both.

Then we went into our project website to make some style changes (after backing up the original

CSS file). And you also saw a few of the many ways to redesign our theme's elements.

We'll try a few more changes in the next lesson. I'll also show you a useful tool that will make it easy

to identify and find the HTML elements you might want to restyle using CSS. And you'll discover

how to work with widgets, the WordPress plugins that live inside your sidebars.

Please check out the Supplementary Material section and the FAQs, and take the quiz. I'll see you

again in Lesson 8!