Information Technology Reference
In-Depth Information
14
5.
Your current theme's style sheet appears. If you want to play with it offline, your browser should
have a Save As (or similar) option on the File menu.
As we've noted before, making changes to the CSS in WordPress is
restricted to people who pay for the CSS upgrade on
WordPress.com and those who perform the work of installing the
WordPress.org software on their servers (or on their host's servers).
For now, just open
style.css
in a text editor or HTML editor. You
might be surprised at how much of this information a novice can
understand. You might not understand all the settings at first
glance, but try to pick out some of these items:
•
The standard font for ordinary body text
•
What size each heading (h1, h2, and so forth) is
•
How many pixels from the left edge of the page does body text
start (margin)
•
Where colors are assigned
caution
Before editing any CSS file,
always save a backup copy.
Because everything in a CSS
file can be changed, simple
typos can make your whole
design explode. Save the orig-
inal as
Old_Style.css
or
something else, then save the
version you're working on
under a new name, so you can
quickly recover from any seri-
ous mistakes.
If you're more experienced with HTML, you will find more familiar tags and settings. You might be
pleasantly surprised at just how much you can do with CSS without much prior knowledge.
Anatomy of a Style Sheet
It is time for some more definitions. Figure 14.4 is a partial view of the CSS behind the default
WordPress theme, Kubrick. Looking at
style.css
, you see something similar to a two-column
table, with an object on the left side, some braces, and some settings on the right. The whole thing
is called a
rule
. The object is called a
selector
, and the stuff
inside the braces is a
declaration
. Each declaration has at least
one
property
(like
color
,
font
,
margin
, or
border
) and a
value
(that you set the property to).
The first part of Figure 14.4 is a comment that browsers won't
read. Comments are designated in CSS by the opening
/*
and
the closing
*/
(notice that these two keys are at the top of the
number pad on the right side of your standard keyboard).
This comment tells you, the human, something about the
theme it describes. This is followed by another comment defin-
ing a Typography and Colors section of this site. The functional
part of the style sheet follows, with rules for the body text.
You might recall that the W3C Validator threw an error for
using
<font>
tags on a website. Yet this first rule in the CSS
file defines
font-size
and
font-family
. Is this a contradic-
tion? A resounding “No!” comes from the standards crowd.
“Font descriptions belong in CSS, and nowhere else!” The
note
The generic Sans-Serif font is
defined by your operating system.
In Windows, the Microsoft Sans
Serif font is the default; this setting
is buried in the Registry under
HKEY_LOCAL_MACHINE\
SOFTWARE\Microsoft\Windows
NT\CurrentVersion\
FontSubstitutes\MS Shell Dlg
.
In Linux, the Sans-Serif default
depends on your desktop environ-
ment. KDE uses Deja Vu Sans as a
default, while GNOME uses just
plain Sans. The Mac uses Helvetica
and Geneva.
