You are probably already familiar with both the color: and background-color: properties from earlier chapters. The four common color formats are as follows:
Name
the 16 common VGA colors named in most browsers are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Hexadecimal
format #xxxxxx ( #000000 - #FFFFFF )
Red/Green/Blue Values
(x, x, x) where each x is that colors value from 0 - 255
Red/Green/Blue Values
(x%, x%, x%) where each x is a value from 0.0% to 100.0%
Hexadecimal is the most common format for color. It allows easy matching to graphics' colors, because all major graphics software support hexadecimal color.
The font-family property is equivalent to the face property in the <font> tag. If you use this property you need at least one font or font-type listed. It is recommended to have 2 or 3 different fonts, the last of which is a standard font type of one of the following:
serif
sans-serif
cursive
fantasy
monospace
If you want all paragraphs to first try to use Times, and if Times is not on the system, use a serif if available, you could use:
p { font-family: Times, serif; }
(You'll commonly see this as p { font-family: 'Times New Roman', Times, serif; } because Macs and PCs name the Times font differently.)
The font-style property can use one of three values: normal, italic, or oblique.
The font-weight property can use one of four build in values: normal, bold, bolder, lighter.
It can also use a value in the range of 100 to 900, in increments of 100. (For a baseline, normal is defined as 400, and bold is defined as 700).
There is a font-variant property, which is merely either normal or small-caps.
The last individual font property is font-size. It can be relative to the text around it (smaller or larger), a set size in pt (e.g. 14pt) or em (e.g. 1.5em) or an absolute size by text description, from one of the following:
So if simply wanted a bold 12pt Serif, you could use:
font: bold 12pt serif;
bold 12pt serif
If you wanted it double-spaced, you could add the line-height:
font: bold 12pt/24pt serif;
this is a double-spaced bold 12 pt serif
Text Aligning
You've probably already run into the text-indent and line-height properties in this tutorial. (text-indent is the indentation at the beginning of an element, such as a p, and line-height is the space a line occupies, including text and the white-space above it.)
You can also use the properties letter-spacing and word-spacing, which should be somewhat self-explanatory. Common units for values of either of these properties are px or em. (E.g. 2px)
The text-align property comes in handy frequently. You can set this to left, center, right, or justify. The first three act exactly like they sound. justify just inherits its alignment from the element around it.
You can do a few cool things with the text-transform property. You can set it to capitalize (first letter in each word), uppercase (all letters), lowercase (all letters), or none (no special transformation).
Last but not least of the text styles is the text-decoration property. This is one of the most widely used properties, and you'll see why in the following section on links. The values for text-decoration are none (regular text), underline, overline, line-through, and blink.
Links
Here are the pseudo-classes for the link element. (Remember pseudo-classes and pseudo-elements use a :.)
a:link { } - regular link
a:visited { } - regular link already visited
a:hover { } - any link with the mouse cursor currently over it
a:active { } - the split-second a link is clicked
(Please remember that you have to place these styles in pages by one of the methods discussed in the CSS Basics tutorial.)
All of these pseudo-classes can have a color and a background color, fonts, and text properties. (You can also add other CSS properties, try some out!) The fun part comes with hover: because it is responsive to the mouse cursor. I'm going to teach you a few poor design things just so you can get used to how :hover works. Then I'll give some recommendations in the next section.
Imagine a page with links having an underline and the link text being a normal size. When the mouse moves over the link, you want the link text to suddenly lose the underline and you want it to be twice as big (I didn't say your imagination was rational!).
You can't do this with HTML alone. But with CSS, it's this easy:
Now, you can see this example is somewhat silly, because it's quite obnoxious to have a link be twice as large when it's "hovered." More commonly, it just loses (or adds) an underline, and perhaps changes color slightly. Using CSS, you can add all sorts of fun properties to links.
You can define classes of links. If you want one set of links to be called "greenhilite" you could use a.greenhilite:link, a.greenhilite:visited, a.greenhilite:hover, a.greenhilite:active, and appropriately use it as follows:
Do you remember your old friends UL (unordered list) and OL (ordered list)? Cascading style sheets have a few enhancements for these lists.
Most people have wanted a way to use an image for each point of an unordered list. Cascading style sheets make this trick really easy to do. Make a small graphic (background transparent are preferred). Then you can link to it with a style similar to this:
ul { list-style-image: url(smallimage.gif); }
But what if you have a sub-list, that is, a UL within a UL. You don't want the second one to have the same image? You can define a special style for UL only within UL, similar to this:
ul ul { list-style-image: url(smallimage2.gif); }
If you use both styles in the same sheet, the points of the main list will be preceded by smallimage.gif, and the points in the sublist will be preceded by smallimage2.gif. You can continue on, adding more UL as you please. Just don't go too deep into sub-lists, you'll confuse your viewing audience!
Remember all those fun outlines you did in school (or maybe the one you did this morning on the job)? CSS gives you a way to auto-format your ordered lists to meet nearly any style. It's similar to the list-style-image used above, it's called the list-style-type property. It can be one of these values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
So, if you want the OL to have I, then A, then 1. then, a, then finally i., you could do this style sheet:
OL { list-style-type: upper-roman; }
OL OL { list-style-type: upper-alpha; }
OL OL OL { list-style-type: decimal; }
OL OL OL OL { list-style-type: lower-alpha; }
OL OL OL OL OL { list-style-type: lower-roman; }
<ol>
<li>Web Design
<ol>
<li>HTML
<li>CSS
<ol>
<li>Intro
<li>Basics
<ol>
<li>Inline
<ol>
<li>You can include styles
inline using style=""
</ol>
</ol>
</ol>
</ol>
</ol>
It looks like this:
Web Design
HTML
CSS
Intro
Basics
Inline
You can include styles inline using style=""
List Style Position
There is one more individual property to the list that should be noted: it's called list-style-position. It's merely inside or outside, and sets whether the second, third, etc., lines of text should start under the list marker, or immediately right beneath the marker.
<ul style="list-style-position: inside;">
<li>This list has position set<br>
to inside.
<li>You can see how the text falls<br>
on the second line.
</ul>
<ul style="list-style-position: outside;">
<li>This list has position set<br>
to outside.
<li>You can see how the text falls<br>
on the second line.
</ul>
This list has position set
to inside.
You can see how the text falls
on the second line.
This list has position set
to outside.
You can see how the text falls
on the second line.
Finally, there is a combination list style property, called list-style. Its first value is the type of marker, the second value is either inside or outside, and the third marker is the url() of the image. If you want a list that defaults to a disc, shows text inside the marker, and uses an image marker.gif if available, it could look like this:
ul { list-style: disc inside url(marker.gif); }
Margins
A margin is the space around something. You may remember typing papers with margins, perhaps 1 inch on each side. If you've designed web pages for a while, you're probably familiar with marginwidth and marginheight in the <body> tag at the beginning of a page. CSS aims to give you total control over margins, but not only for the body, but also for any block elements: lists, images, paragraphs, div's, span's, etc. You'll still want to set the marginwidth and marginheight to appropriate values even if you choose to set the margin property of the body tag.
Margin values can be fixed amounts, such as px (pixels), or % (a percentage), or set to auto.
Margins work clock-wise. As you can see in the image above, location A then B then C then D. You can define all margin values in a single definition by separating each value of A B C and D with a space, after the selector margin:.
If you want a page to have no margin, you could use:
body { margin: 0px 0px 0px 0px; }
If you want a page to have a 15 pixels on top, 10 on the left, and the right and bottom automatically set, you could use:
body { margin: 15px auto auto 10px; }
If you wanted a 10% margin at the top and no margin on the other sides, you could use:
body { margin: 10% 0px 0px 0px; }
You can also set each of the four margin values individually, with the properties margin-top, margin-right, margin-bottom, and margin-left, respectively. The style above with the 10% margin could instead be written:
Remember that the margin property may apply to more than just a body selector.
Padding
padding: is just like a margin, except it's the white space between the margin (and border) and the actual content. Unlike margin, which inherits the background color of whatever is around the margin, padding uses the background-color specified for whatever it is padding (e.g. the "content content").
Padding is just as simple as margin to use, and it follows the same format (A B C and D as pictured). If you want a paragraph to have 5px (pixels) of padding all around it, you could use:
p { padding: 5px 5px 5px 5px; }
You can also use auto or a % (percentage), just like a margin.
The four individual padding properties are padding-top, padding-right, padding-bottom, and padding-left.
Borders
A border can be a visual separator between the margin on the outside, and the padding on the inside. You can set the width, color, and style of the entire border, or you can set each of these properties individually for each side.
The border-width property allows you to set all four widths at the same time, in format A B C and D as pictured above. The value can be thin, medium, thick, or a numeric value and unit, such as 5px or 0.2em.
If you want to a medium border around every paragraph, you could use:
p { border-width: medium; }
/* This sets all to medium */
p { border-width: medium medium; }
/* This sets top/bottom medium then right/left medium */
p { border-width: medium medium medium medium; }
/* Set each A B C and D */
But guess what? The default border is no border at all, so you'll need to add a second property, border-style, if you want any border to visually appear. The values for border-style are: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
The first five appear just as they would seem to appear by their description. The last four are special 3D looking borders.
More Great Sponsors:
Announcements:
Amazon is our newest sponsor...be sure and check out their specials!
Lots of HTML and CSS tutorials...see the far left column.
