Changing Basic Elements for a Unique Look
When you understand the basic concepts about personalizing your site with graphics and CSS, you begin to see how easy changing the look and feel of your site is with these tools. The next few sections explore some of our favorite ways to accomplish an interesting design presentation or a unique and creative look.
Background colors and images
Changing the background image can completely change the feel of your site. However, you can also use background colors and images for other elements in your theme.
Background techniques include using solid colors and repeating gradients or patterns to achieve a subtle yet polished effect. (Note: Use colors that accent the colors of your logo and don't hamper text readability.)
You can add CSS background colors and image effects to the following areas of your theme:
- Post and page content sections
- Sidebar widgets
- Comment blocks
- Footer area
Font family, color, and size
You can change the fonts in your theme for style or for readability purposes. We've seen typographic (or font) design experts use simple font variations to achieve amazing design results. You can use fonts to separate headlines from body text (or widget headlines and text from the main content) to be less distracting. Table 4-4 lists some examples of often-used font properties.
The Web is actually kind of picky about how it displays fonts, as well as what kind of fonts you can use in thefont-family property. Not all fonts display correctly on the Web. To be safe, here are some commonly used font families that display correctly in most browsers:
- Serif fonts: Times New Roman, Georgia, Garamond, Bookman Old Style
- Sans-serif fonts: Verdana, Arial, Tahoma, Trebuchet MS
Font Color
With more than 16 million different HTML color combinations available, you can find just the right shade of color for your project. After some time, You'll memorize your favorite color codes. Knowing codes for different shades of gray can help you quickly add an extra design touch. For example, you can use the shades of gray listed in Table 4-5 for backgrounds, borders on design elements, and widget headers.
Table 4-5 My Favorite CSS Colors
| Color | Value |
| White | #FFFFFF |
| Black | #000000 |
| Gray | #CCCCCC
#DDDDDD #333333 #E0E0E0 |
You can easily change the color of your font by changing the color property of the CSS selector you want to tweak. You can use hexadecimal codes to define the colors.
You can define the overall font color in your site by defining it in the body CSS selector like this:
body {
color: #333;
}
Font Size
To tweak the size of your font, change the font-size property of the CSS selector you want to tweak. Generally, the following units of measurement determine font sizes:
- px (pixel): Increasing or decreasing the number of pixels increases or decreases the font size (12px is larger than 10px).
- pt (point): As with pixels, increasing or decreasing the number of points affects the font size (12pt is larger than 10pt).
- % (percentage): Increasing or decreasing the percentage number affects the font size (50% is the equivalent to 7 pixels; 100% is the equivalent to 17 pixels).
In the default template CSS, the font size is defined in the body tag in pixels, like this:
font-size: 12px;
Putting all three elements (font-family, color, and font-size) together in the <body> tag styles the font for the entire body of your site. Here's how the elements work together in the <body> tag of the default template CSS:
body {
font-size: 12px;
font-family: Georgia, "Bitstream Charter", serif;
color: #666;
}
Serif fonts have little tails, or curlicues, at the edges of letters. (This book's text is in a serif font.) Sans-serif fonts have straight edges and no fancy styling. (The heading in Table 4-4 uses a sans-serif font—look ma, no tails!)
When you want to change a font family in your CSS, open the stylesheet (style.css), search for property: font-family, change the values for that property, and then save your changes.
In the default template CSS, the font is defined in the <body> tag like this:
font-family: Georgia, "Bitstream Charter", serif;
Borders
Using CSS borders can add an interesting and unique flair to elements of your theme design. (See Figure 4-8.) Table 4-6 illustrates common properties and CSS examples for borders in your theme design..) Table 4-6 illustrates common properties and CSS examples for borders in your theme design.
Table 4-6 Common Border Properties
Figure 4-8: A dashed 15px black border.
