Information Technology Reference
In-Depth Information
14
The third property in the rule defines the text alignment for the page. Wait a minute. Didn't we use
text-align: center
for the body? Won't that conflict with
text-align: left
here? This is
where the “cascading” part of Cascading Style Sheets comes in.
When it comes to rules in a style sheet, the order of the style sheets matters. A rule or property is
in effect until another rule takes over. Yet there are some rules that only apply to certain sections or
areas of a page. This can get complex, but did you notice that the page layout rule is labeled
#page
,
with a pound sign in front? That # (sometimes called a
hash
) symbol indicates one special type of
selector. This is a CSS ID area. In web page source code, you'll often find division tags to separate
areas of a page. This shows up as a
<div id= >
tag, and it's perfectly legal in XHTML. A divi-
sion/div is part of the DOM. Guess where that ID in
<div id= >
is defined? Right—everything
contained within the “page” div is aligned to the left margin. Outside the “page” div, but within
the body of the document, the text is centered.
Another important exceptional selector is the
Class
selector.
Scroll down in
style.css
and you'll see
.widecolumn.entry
;
where the
<p>
tag gets a new font size. The leading dot in
.widecolumn
indicates a CSS class. Back in XHTML, while
some
<div>
s have
id
s, others have
class
es. The primary differ-
ence between an ID and a class is that a document can have
many classes with the same name in different rules, but each
ID name in a single document must be unique.
A few other things to pay attention to while scrolling through
this
style.css
:
•
Properties and values are always linked with a colon, as in
background-color: white
.
•
Every property/value pair ends with a semicolon (;). This is
a very important habit to fall into as you write your own
style sheets, and also holds true in PHP.
note
We will let you in on a secret, but
you have to forget it instantly: The
last item in a rule sequence (before
the closing brace) does not need a
semicolon—the brace serves that
function. Trying to remember when
you're allowed to omit the semi-
colon requires too much brain
power, and you will leave it out
when you need it most. So always
put the semicolon at the end! You
don't lose any style points for hav-
ing extra punctuation in this
instance.
Enough theory for now—it's time to play with a theme for real. We'll start with small tweaks to
existing theme style sheets, and then take a very close look at a popular theme to give you an idea
of what you can do with CSS from the ground up.
Tweaking Theme Style Sheets
We've discussed finding themes and getting them installed in both Chapter 3, “Creating Your
Blog's Look,” (focused on WordPress.com) and Chapter 12, “The WordPress Toolkit: Themes,”
(focused on WordPress.org). This section is for the idiosyncratic, the dreamers, and the born tinker-
ers who cannot accept having what everyone else might be using. Their theme must be unique, or
close to it. Maybe you've just looked at a few of the featured themes in the WordPress Free Themes
directory and found something just about perfect—if only it had…this. Or, after having engaged in a
systematic march through the directory, you've shared your vision with a professional theme devel-
oper, who didn't quite capture what you need. Because blogging is not all about having the “right”
or perfect theme, you have to pick something to use while you search. We'll start there.
