CSS Lesson 2

In lesson 1, I talked about backgrounds and text. Let’s move on, I’ll start out by expanding on the text manipulation with fonts and continue by the introduction of  what I call “general formatting.” General formatting includes the definition of padding, borders, margins, and outlines. At the end of the lesson, you should know how to create the above banner and more

Here’s an overview of what you’ll learn in this lesson:

• Fonts
• Padding
• Border

Fonts

We’ve already learned that there are multiple ways to manipulate the text in your HTML document through CSS. You can add text-decoration, align the text (text-align), change the line-height, word-spacing, and a lot of other stuff. Now let’s look at the font.

The general idea with Fonts is to use CSS to specify a group of fonts you’d like to use in HTML. If the browser does not support the first font, it will fall back on the next available font, and so on. There are three different general groups of fonts. There is “Serif”, “Sans-Serif”, and “Mono-Space”. Serif is the group of fonts with those little lines at the end of characters. Here is how you write it:

p.sans {font-family:Arial, Helvetica, sans-serif}

Sans-serif

p.serif {font-family:”Times New Roman”, Times, serif}

Serif

p.monospace {font-family:”Courier New”, Courier, monospace}

monospace

Let’s continue. When you use fonts that have multiple words, use quotations as shown above. You can mix and match different fonts but try to stick to fonts that look similar. Here are some basic properties:

<p style=”font-size: 1.5em; font-variant: small-caps; font-weight: 200″>

hello

</p>

Font-size is self-explanatory, you can use “pt” for points, “px” for pixels, percent, and “em” which is a CSS unit of measurement, usually equaled to about 16px. It’s a unit of measurement that depends on the browser, the default browser size would be 1em, so if you want one and a half that size you’d use 1.5em. Font-variant only controls if the text has “small caps” or if it’s going to be “normal”. Font-weight specifies the font weight, obviously, or the boldness of the font. You can use values such as “bold, “bolder”, “lighter”, “normal”, and then go by “100″, “200″ etc.

Let’s look at Font-style. Font-style has the values “normal”, “italic”, and “oblique” (don’t use this one).

Finally, let’s look at Font itself, under the property font, you can declare all the different values at once.

body { font: bolder small-caps italic 2.4em/3em Arial, Helvetica, Sans-serif }
This is the modified text

As you can see, you can modify a lot using just the “font” property. There are some additional font values such as “caption”, “icon”, “status-bar”, “small-caption”, “message-box”, and “menu”. All of these modify the font to correspond with the font usage. “Message-box” for example, uses the font that’s used by form/dialog boxes. “Caption” is used by buttons, drop down menus etc.

Padding

For every content area, like a box, there are four different sections. There is the content, the padding, the border, and margin in that order from the middle to the outside of the box. We’ll start with padding first, which is the area directly around the content. It “clears” the area around the content, let’s say text, for the background and under elements.

Let’s try to define some padding:

<p style=”padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background: black; color: white”>

Padded text

Well that didn’t work out as I planned, it seems as if WordPress has its own formatting that I cannot bypass. Here is a better example you can play around with by W3Schools. Let’s learn the short-hand. To express the above, you could have written it as the following:

<p style=”padding: 10px 10px 15px 15px”>

or

<p style=”padding: 10px 15px”>

You have to express all the values otherwise, your CSS will be interpreted wrongly. Let’s say you have four different values:

a, b, c, and d

where a is the top, b is the right, c is the bottom, and d is the left (clockwise):

padding: a b c d

Let’s say “b” and “d” are equal:

padding: a bd c

“bd” would be a single value. In this example, the following is short-hand: “top”, “left and right”, “bottom”. If you input only two values such as “ac bd” then it’s: “top and bottom”, “left and right”. A single value “abcd” would apply to all padding. Oh and when I say “abcd”, I don’t mean the multiplication but rather that it applies to all values. For example, if a=15px, and so does b, c, and d. You’d have to only write:

padding: 15px

You can use any other lenght-specifying measurements such as em and %.

Border

Let’s look at Borders, the next area around content. We specified the padding already which is affected by the background element of the content area. The border can have its own style and its own background and color.

Let’s start with border-style:

p.bordernone {border-style: none}

p.borderdotted {border-style: dotted}

p.bordersolid {border-style: solid}

p.borderdouble {border-style: double}

p.bordergroove {border-style:groove}

p.borderridge {border-style: ridge}

p.borderinset {border-style: inset}

p.borderoutset {border-style: outset}

p.borderhidden {border-style: hidden}

These are all the borders available for your own use. As you can see, I coded the code so that the code itself is an example. If you want to use the above for your own purposes, look in the source and type in “border-style” into the search bar. You can change the width of the border line with border-width. Which, in addition to normal measurements, also accepts the values “thin”, “medium”, and “thick”. Another property you can define is border-color.

Now, let’s say you want the width, color, AND the style different for each side of the border? Here’s how you do it:

p.complicatedborder {

border-top-style: solid;

border-top-width: 5px;

border-top-color: black;

border-right-style: dotted;

border-right-width: 10px;

border-right-color: white;

etc….

}

I’m not going to write it all out, but you get the idea. Where it says “top” or “right”, substitute it with “bottom” or “left” and you can apply it to the bottom or left sides. It works the same for all of the sides. Here’s the short-hand:

p.lesscomplicatedborder{

border-left: 15px groove blue;

border-bottom: 7px double red;

}

The shorthand is used the following way: “border-(side): width style color;” You can use this method on all sides by declaring “border: width style color” and not including the side tidbit. One last thing, let’s say you need to only define the border styles but are too lazy and will instead resort to shorthand?

p.borderstyles {

border: dotted solid hidden inset;

}

This part works the same as the shorthand for padding. If you have four values they’ll apply to : top right bottom left, respectively. Three values: top right/left bottom. Two values: top/bottom left/right. One value: top/bottom/left/right.
That’s it! In my next tutorial, I’ll address outlines and margins.

As always, here is the code for the header:

<h1 style=”font-size: 30px; font-weight: bolder; text-align: center; padding: 10px; background: grey; color: white; border: thick outset grey; text-shadow:0px 1.4px 3px black”>CSS Lesson 2</h1>