<h1>
tag)
Most of what you see on this page has been designed ("styled") by CSS in an "external CSS file," style.css. From the image-logo up top to the footer down below, from the left column to the right column, all the colors, font styles, etc. have almost all been styled in style.css...
The size and background colors/images of the major sections of this Web page (ex., its header, columns, and footer).
Special creations that you will use frequently (ex., boxes, navigation styles, and ways to float images with captions).
"Regular HTML" elements that are automatically styled when you use them on the page (ex., headlines, links).
The rare exception (and they should be very rare) is the occasional HTML tag that is styled within the HTML page using "inline CSS." We'll discuss that towards the end of this page.
This page shows you examples of how style.css uses CSS to change the Look and Feel (L&F) of a Web page. Read through this page and follow along, experimenting in style.css as you go. This page has more examples of styles than any normal Web page would ever have -- so "style suffers here in order to teach."
Unless you are CSS-and-HTML-savvy, first read the CSS Action Guide (CSS-Action-Guide.html). It teaches you about the CSS structure of style.css and how to correctly modify its styles.
This page is not meant to be a shining example of great design. It's a teaching document. When you teach using examples, you cram way more into it than if it was a normal Web page. The most important goal of this page is to show you how experimenting with style.css impacts the L&F here.
Work through the CSS Action Guide systematically to develop a strong understanding of how style.css impacts the L&F of this page. Even if you are a "newbie" to all this, you will learn how to use CSS and HTML effectively.
If you have some experience with CSS, check out the CSS Action Guide Lite (css-action-guide-lite.html). It cuts out much of the intro-level information, leaving you with what you'll need as "backup" or a refresher as you design a new template or customize one of the SBI! templates.
<h2>
tag)
What are the biggest advantages of having your master set of styling instructions in a separate ("external") file, style.css?...
It allows you to change your entire site's L&F by changing only one file (your style.css style sheet).
It separates design/layout/style from the content of your HTML page (and you know how we feel about focusing on content!).
In other words, when you work with style.css, you wear a "designer" hat. That frees you up totally to be a "content creator" when you work on your HTML pages.
<h3>
tag)
Before we used CSS (and how you may be working now), an
<h2>
tag gave you a "styled-by-browser" level-2
headline. One style. You'd have to add extra HTML tags to that
<h2>
if you wanted it centered, underlined,
italicized, etc.
However, with CSS...
All of the headlines on this page
(<h1>
to <h6>
)
are specified and styled in your style sheet (style.css).
You've already seen <h1>
,
<h2>
and <h3>
headlines above.
Notice anything different? Size, alignment, bottom border,
even font family—they all vary. Other properties, such as
color, remain the same. Adjust as you like...
You can style them individually or as groups. View Section 1 of style.css and modify the styles to see how they work.
Without these styles being set in style.css, you'd have to remember and code all the same values right into each headline tag itself every time. Using style.css to style basic HTML elements upfront is a good habit. It...
requires less coding in your HTML file.
is easier to remember.
saves time.
delivers 100% consistency.
most importantly, allows you to focus on just writing content.
What about links? Yup, they've been styled by style.css, too...
This is the look of links as defined in Section 1 of style.css. As you hover over the link, it will turn red. After you click on the link, it should be purple ("visited") when you return. Click on the above link for link-styling details.
You will notice some links that have been styled differently from the "Global Settings" in Section 1 of style.css. You'll find their styles in Section 4 ("Left Column Navigation") and Section 5 ("Additional Navigation") of style.css.
In your browser's "View" menu, select the option to see this page's HTML source code (VIEW > SOURCE). Find the navigation links in the left column, the horizontal text NavBar at the bottom of this page, and image-and-text links in the right column. Compare the code for each with its respective CSS styling in style.css.
Next is a styled long quotation. Use a
<blockquote>
tag when you want to quote
someone, perhaps an e-mail testimonial from a customer. Or
use it to quote someone really, really famous,
such as this internationally renowned styling authority...
CSS has a nickname... "little boxes." It is called that because of the way that web browsers render the language. I find it useful to remember that while I'm stylin'! Everything that you style or position is a "little box" that begins with an opening tag<p>
(or<span>
or<div>
), and ends with its corresponding closing tag</p>
(or</span>
or</div>
). Everything.
- Al the Graphic Guy, 2009
Even the <code>
tag has been styled.
This styling makes all text that is inside the
<code>
tag look like "coding."
However, it's not that different from the text that this page uses.
So, to make it more obvious, we gave it a navy color by styling
it in style.css as follows...
code {
color: navy;
}
One HTML element that you won't find here is the good old
horizontal rule tag, <hr>
.
Modern HTML is dropping that tag. What if you want to use
horizontal rules? Well, you can.
Browsers will recognize them for years, but it's better to
replace them (if you need them) by styling borders into
<h1>
-<h6>
tags, or into CSS classes.
It's time to go beyond styling simple HTML elements. Let's get "inside the box." Section 6 defines three types of boxes... Callout, Reminder and AdSense boxes.
"CalloutBox" is useful for "calling out" important information, like this...
You can call these boxes, each of which is a "class,"
anything you like. If you change the name of
.CalloutBox
to .Joe
in style.css,
change the reference to "Joe" here in the HTML file, too...
<p class="CalloutBox">
becomes
<p class="Joe">
.
"Joe" would not be a good name, of course. Give careful thought to what you call various classes. Keep names short and easy to remember.
And, most importantly, each class name should indicate its meaning
or purpose (referred to as "semantic naming --
see the CSS Action Guide for
a detailed discussion"). For example, .CalloutBox
is short, easy to remember, and "calls out" a block of text.
View the HTML source of this file. Notice how the
.CalloutBox
class (in style.css) was added to a
<div>
tag?
Like this... <div class="CalloutBox">
.
This tells the browser to go to style.css,
to find the class called .CalloutBox
and to apply its properties to this "division" of the page.
It lasts until the "div is closed" by a
</div>
tag. Try this...
Go to the style.css file, find .CalloutBox
and adjust the settings to see how you can
change this box. In a moment, you'll learn how to develop new
"box classes" for new purposes, using .CalloutBox
as a starting point. But first, we need to go floating...
In CSS styling, we use the term float to align items (ex., images, boxes) to the right or left in your page.
This is the caption for the image above
The image to the right is using the class .ItemRight
.
Why is the caption centered on the photo instead of aligning
to the right, too? The style.css file specifies it.
The photo could appear alone, without a caption. But if/when there is text in this class, it will be centered.
Find and study the .ItemRight
class in style.css
(Section 7). Then view the source code in this file to see
how this style is coded in template.html...
You will see the .ItemRight
class in the
<p>
tag, creating a "little box"
(a "container") on the right of the page.
That container includes the image and caption.
Text is centered within that container by a property,
(text-align: center
).
You could use a <div>
tag for the image above if you prefer, but we
used a <p>
tag since there is only one
paragraph involved. If you need to use more than one paragraph,
the </p>
tag would also close the class. In that
case, <div class="CalloutBox">
is a better choice. Actually, this
"Callout Box" uses the .CalloutBox
class in a
<p>
tag (instead of a <div>
like the one above) since there is only one paragraph.
To center an image and its caption, place your image inside a
paragraph by using a new class, .ItemCenter
,
like this...
This is the caption for the image above.
Find the .ItemCenter
class in style.css (Section 7).
It's similar to .ItemRight
except it has no float
property. The text-align: center;
property
aligns both the image and the caption.
(There is no such thing as a float:center
property.)
See how easy it is to make and use a new class? Just copy-and-paste something similar, and then change, add or delete properties to achieve the purpose you want. And that word "purpose" is important...
Do not create new classes for "one-of" reasons. Each class should have a real purpose or meaning. If it is unlikely to be reused, then use "inline styling" (see below) for "one-of" styles.
However, here's our best recommendation to keep your site clean and consistent...
There is no such thing as a "one-of." If you have a good reason (i.e., a good purpose or meaning) to use a new style, then you will almost certainly use it again. And if you're going to use it again, make it a class in style.css.
And if you do not have a good reason to use a new style, then don't use it at all. In other words, there's no such thing as a "one-of." So...
Keep your number of classes to the minimum possible. Make sure each one really has a reason to live.
Keep your inline styling as close to zero as possible.
Less is more in design. However...
To handle "one-of's," we'll show you a little bit about inline styling below. But we warn you now... don't use it. Develop the discipline of letting style.css be your designer, while your HTML page is for your content. You'll reap big dividends in the long run (consistency, simplicity, and elegance).
To place an image to the left, we use the class
.ItemLeft
. It is similar to .ItemRight
above, except that the float
property is set to the left and the margin
property is set to the right (providing more space to the right of the image).
This is the caption for the image above. It uses the
same
.Caption
class, as usual. Multi-line
captions (like this) require either <br>
tags to break each line, or a bit of inline styling.
Note the multi-line caption in the ItemLeft example.
One option to get the line breaks in the caption is to use
<br>
tags. This has a slight drawback:
the tags won't take into account a viewers decision to increase
the browser's font size. As the font size increases, fewer words will fit
onto each line. But the <br>
tags
remain in the same position, which may give you a messy layout.
So why not specify a fixed width class for the box to "hold" the caption within it? You could, but you'd have to create a new class for every photo of a different size.
The solution chosen in this example is to use a little bit of
inline styling. In other sections of this page, we recommend
avoiding "one-of" inline styling. However, when faced with the
choice of using <br>
or setting a width in
our .ItemLeft
, then the inline styling comes out
the winner.
Either way, we need to add something to our HTML if we want the lines to break correctly. As long as you know the width of the image (in our case, that is 255px), then it's a simple job to keep the caption text constrained to the same width. If you were to look at the source code of this page, then you would see this....
<p class="ItemLeft" style="width:255px;">
If the majority of our images were all the same width, then it would make no sense to use inline styling like this. We would simply create a new class in style.css, and use that instead.
Best practice is to use short, memorable names for your styles and classes.
It is much easier to recall (and to type)
.ReminderBox
than it will be to
remember "Callout-Right-24-Border-Gray".
But if "RB" (abbreviation) or "GrayBox" works for you,
call it that.
Remember... you will use these classes over and over. Name it well the first time to avoid having to change it later.
OK, now that we understand floating, let's cover the other two boxes in Section 6 of style.css...
Suppose you want to remind folks to add their reviews of their
favorite restaurant to your site or to tell their favorite
stories using Content 2.0. You plan to put a reminder box on many
of your pages. What do you do? Style a .ReminderBox
class in Section 6 ("Boxes") of style.css. How?...
Please note that this has already been done for you. Treat the following instructions as a description of the procedure.
Copy-and-paste the .CalloutBox
class
(with all its properties) in Section 6 ("Boxes") of style.css.
Place it right below the .CalloutBox
class. Rename
this new class to .ReminderBox
. Next...
Change the values and add new properties, as needed. For example,
you want this box to always float to the right, so you add
float: right;
to its properties. You can even define
headline and text properties that are specific to the
.ReminderBox
class.
View the .ReminderBox
class in style.css to see how
this is achieved.
Now view the source code (VIEW > SOURCE) of template.html.
Note how you create the actual Reminder Box
with a <div>
tag instead of a
<p>
tag. Why? Same reason as before...
because it contains multiple tags. If we opened it with
<p class="ReminderBox">
, the first
</p>
tag would close the styled paragraph,
and therefore the .ReminderBox
.
Aside from the <div>
tag, the HTML is the
same as usual... an <h4>
headline and <p>
tags, both of which have been
specially styled for this box. It works like a mini-cascade...
The browser "knows" that it is delivering a
.ReminderBox
. So when you call for an
<h4>
headline here, you get the
more specific .ReminderBox h4
(i.e., the headline "Reminder" in the box
above and to the right). It styles the <h4>
according to the specifications for it inside the
.ReminderBox
class, using only the properties for
<h4>
(in Section 1) that are not
defined in the .ReminderBox
class.
Remember that a "regular" <h4>
has been defined
in Section 1 of style.css.
So the <h4>
in the .ReminderBox
uses those values and then overrides or adds the specific
<h4>
values specified for the
.ReminderBox h4
in Section 6.
Of course, if an <h4>
tag is not part of the
.ReminderBox
class, it uses the values set
in Section 1, like this <h4>
headline...
<h4>
Tag
Compare this headline with the .ReminderBox h4
, which
is centered and has a white background. And compare, too, with the
<h4>
headlines at the top of the right and left
columns. These have been styled in Section 3 (#NavColumn h4
and
#ExtraColumn h4
) to be white and
to have top-margin
set to 0 to enable them to come as
close to the top of each column as possible.
As you see in the .ReminderBox
example above, text
flows completely around boxes that float to the right, even when
you break the paragraph and start a new one. Ditto for boxes
that float to the left, which is the subject of our next
discussion...
Below, you see a different type of box. We call it
.AdSenseBoxLeft
because we'll use it to contain
AdSense Ads and it floats to the left.
The float:left
style in the
.AdSenseBoxLeft
class forces the AdSense Box to
the left, which "pushes" this text to the right of the box.
If you need to clear the box "early" though, use a
.Clear
class to break the wrap, like you'll see
in the next paragraph...
View the source code of this paragraph. You'll see that
it uses a .Clear
class in the <p>
tag (<p class="Clear">
).
You'll find this class in Section 7
("Frequently Used Styles") of style.css. It enables that paragraph
(and everything following) to break free of the lower margin of
objects that float right or left, even if "there is room"
for more text to wrap around it.
The .Clear
class can be applied to any block level
element such as a <div>
,
<img>
, <p>
,
<h>
tags, etc.
It can also be a property in any CSS style. For example, all
headlines should really start on their own line, clearing
anything before them. So h1-h6
are all styled to clear
(see Section 1 of style.css).
You can style directly in the HTML of your Web page.
This is called "styling inline."
Here are examples of styling granular bits of text by enclosing
those "bits" inside styled <span>
tags
directly within the page
(view the source to see)...
how to bold...
<span style="font-weight: bold;">
how to italicize...
<span style="font-style: italic;">
highlight a few words...
<span style="background-color: yellow; padding: 0 2px;">
how to change the color of text...
<span style="color: gray;">
(see this excellent chart for colors)
You can also style directly within HTML elements.
For example, this link is
styled green. The <a href>
tag is styled like
this...
<a href="#" style="color:green;">
(# would be the URL).
Let's consider each of the examples above to see what you
should do instead. Use the simple HTML
<strong>
and </strong>
for important content that you want people to see.
Don't use inline CSS. (If you use the old bold tags,
<b>
and </b>
, stop and
switch.
See this article on up-to-date HTML tags.
Use emphasis tags
(<em>
and </em>
) for words
that you want to emphasize (such as the word "Could" in
the headline above). Most browsers will italicize text inside
emphasis tags.
Focus on the purpose (ex., emphasis) and
not the appearance (ex., italic).
In other words, ask yourself why you want to inline style a bit
of text. If it's because it's important, bold it with
<strong>
.
If you want to put emphasis on a specific word or two, use the
<em>
tag.
Of course, you know that
yellow highlighting is pretty bright. So it may not be
wise to use something this gaudy. But if you decide that
yellow highlighting is how you want to show a visitor that
something is important, then style this in style.css
(in "Section 7 - Frequently Used Styles") so that your
<strong>
tag yellow-highlights.
Do not create a new class for something that is
already covered by HTML.
Remember, the point is to focus on the purpose. Name classes accordingly. So, if you do want to use yellow highlighting, don't create a class called "yellow-highlight." That does not force you to ask yourself why you are going to use this style.
Ask yourself what the purpose of that class is. If it boils
down to importance, then style the <strong>
tag in Section 7 of style.css to display important information
as yellow highlight.
Ditto for the gray font. If you don't have a good purpose for using gray, don't make a "one-of inline exception," and don't make a class called "gray-font." But suppose you want to let your visitor know that some text is optional reading. Create a new class called "optional" or "optionalreading" and style it gray.
Bottom line? If you can't tell yourself what the purpose
is, don't style it. If you do have a purpose, name a new class
according to that purpose (or style an HTML element such as the
<strong>
tag.)
Similarly, every HTML element (for example, in this TNT HQ article on basic HTML (and in all the "how to" TNT HQ pages it links to) could be styled to change its default browser appearance. But don't do it.
The above examples were mostly intended just to show you the flexibility of CSS and how "nitty-gritty inline" overrides the higher-level external CSS file in the cascade. If you css-style well, however, you should rarely (if ever) need to inline-style.
Because many Webmasters do get lazy and go inline "just this one time." But it's rarely "just once." And all those "one-of's" add up. It all becomes hard to keep consistent after a while. So stay disciplined, challenge yourself about purpose, and don't style inline.
And oh yes, what about that green link... don't ever "go green out of the blue!" Visitors are used to conventional link colors.
Let's look at another example...
If you want to center a block of text, but don't want to center
the text itself, view the source to see how to set the left and
right margins of a paragraph. You will see how this paragraph's
<p>
tag is coded...
<p style="margin: 0 100px 0 100px;">
Yes, you could do this inline. But why? You must be able to answer what the purpose of that styling is. If there is none, why do it? But let's say you have a purpose.
Perhaps it's, "I want to center all the poems on my site like this." Great! But don't do it inline. It makes your life harder. Once you can define a purpose, you know you're likely to use it again. So create a class called "PoemQuote" (short, memorable, states the purpose) and style it in style.css (in "Section 6 - Boxes" since it's a type of box).
See how much easier and logical this is? You don't have to style
inline every time you want to quote a poem.
Just use...
<p class="PoemQuote">
This calls the styling that you've given to the PoemQuote class
in style.css
Bottom line?... You could use inline CSS to over-ride the "usual" way you style anything in style.css. But don't, unless you have a "one-of" situation. And you know the "Rule of Simplicity" by now...
"There is no such thing as a one-of."
All the styles in your CSS style sheet apply to your entire site. You keep it simple. You keep it purposeful. You separate design (your style sheet) and content (your HTML page).
That's about it. You now have enough understanding of CSS and HTML to...
Customize your own personal Look and Feel.
Style many HTML elements that are common throughout your site.
Create many special objects that you'll use often.
Keep it simple and keep inline CSS to a minimum (zero, ideally).
Setting up your styles deliberately and in a separate sheet delivers the first cardinal rule of design... Use a limited, consistent set of style elements throughout your entire site. This leads to a clean and professional presentation.
Have fun!
Oops, one more thing. At the end of each page, it's a good idea to link TIER 3s back to their respective TIER 2s and the home page, TIER 2s back to the home page, as well as link to other highly relevant pages, pulling "sub-niches" or "related pages" into a mini-site within your main site and providing valuable navigation help.
So style.css has a class for this, .ReturnToNavBox
,
making these "end-of-page" navigation links more obvious. Here's
an example, using "pretend links" for demonstration purposes...
Content can be written anywhere into the right column, like this.