Reading: Styling

Cascading Style Sheets add style to your web pages. There are three different kinds of styles:

  1. inline
  2. embedded (also called “internal”)
  3. external

External styling is by far the best way to style, for reasons we’ll discuss in just a bit. Occasionally, however, you may want to do a bit of inline or embedded styling, so we’ll cover them briefly.

Inline CSSWith inline styles, you change the appearance of one tag. For example, if you want to make the body have a pink background color, you change the body tag, like this:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Styling Example</title>
<meta charset=”utf-8″>
</head><body style=”background-color: #FFCCFF”><h1>This is a level one heading</h1>

<p>My first lovely paragraph. Wow. This is fun.</p>

</body>

</html>

If you want to make your page have navy blue font, you do it like this:

<body style=”color: #000066″>

And if you want to make your page have a pink background and navy blue font, it’s like this:

<body style=”background-color: #FFCCFF; color: #000066″>

What are those funny numbers that change the color? They’re the hexadecimal representation of the amount of red, green and blue that make up the color. You can find the hexadecimal representation of colors at http://www.visibone.com/colorlab/.

You can take any tag and apply styling. If you want to make a paragraph have a red Arial font that is 18 pixels high, it’s like this:

<p style=”color: red; font-family: Arial; font-size: 18px”>Hello</p>

If you want to make a level two heading have a red background, white font 24 pixels high, and be aligned to the center it’s like this:

<h2 style=”text-align: center; color: #FFFFFF; background-color: #FF0000; font-size: 24px”>Awesome</h2>

Notice you can use the name of a color, like red or white, rather than the hexadecimal value, for the more common colors. But you’ll have a greater selection of colors and more predictability by using hexadecimal values.

Do you like to style? You can find many more style properties and values at http://www.w3schools.com/cssref/default.asp. Here are a few of the more common properties and values:

Property Possible Values
background-color hex value
border-color hex value
border-style solid, double, dotted
color hex value
font-family arial, courier, etc
font-size # of pixels
letter-spacing # of pixels
line-height # of pixels
text-align right, left, center

Embedded CSS

Above we learned that Cascading Style Sheets come in three types:

  • Inline (we learned this already)
  • Embedded (also called “internal”)
  • External (we’ll cover this in just a bit)

We have already learned how to do inline styles: the style code is placed within each tag, and affects one tag and one tag only. With embedded CSS, we specify the style for a particular tag, and every time that tag is used on a page, the style is applied. Embedded CSS is placed in the head of the document, right after the ending title tag, like this:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>The title goes here</title>
<meta charset=”utf-8″>
<style type=”text/css”>h2
{
color: #FF0000;
}p
{
color: #0000FF;
font-family: Verdana;
}

</style>
</head>

<body>

<h2>Cardinals</h2>

<p>The male cardinal is a beautiful bright red, whereas the female is a less colorful brown.</p>

<h2>Bluebirds</h2>

<p>Bluebirds are a beautiful shade of blue, but are difficult to attract to your garden. </p>

</body>
</html>

The above code says make every level two heading in the document appear in red text, and make every paragraph on the page appear in blue text with a Verdana style font.

Embedded styles are convenient if you want several tags on your page to appear the same. If you use inline and embedded styles for the same tag, the inline style will take precedence. For example, you could use embedded CSS to make every paragraph appear blue (as we did above), then use an inline style to make just one paragraph appear green.

External CSS

Just a word or two about external CSS. It is by far the most powerful of the three types of CSS, and is also the easiest to use when you’re styling a website with lots of pages. With external CSS, you don’t put the CSS styling in the html document; you pull it out and put it in another document that has a .css extention. Each html page gets “linked” up to the external css page. This way, you can create one CSS document which styles hundreds of pages. It’s also alot easier to maintain, because if you decide to change the color of all level three headings in your site, you can do it with one new line of code. If you’re interested in learning about external CSS, visit my CSS Tutorial