Fonts and Colors

This lesson is part of the Web Programming 1 Course.

In this lesson we'll cover two very important topics in CSS, but they are both fairly straight forward so I decided to put them both into one lesson. Here is the HTML code that we'll be starting with:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Colors and Text</title>
        <style type="text/css">

            /* WE'LL ADD OUR CSS SAMPLE CODE HERE */

        </style>
    </head>
    <body>
        <div class="happy">
            This is a happy DIV
        </div>
        <div class="sad">
            This is a sad DIV
        </div>
        <div class="blah">
            This is a blah DIV
        </div>
        <div class="angry">
            This is a angry DIV
        </div>
    </body>
</html>

Colors

There are a few different ways that you can specify colors in CSS. We'll go through them one by one.

You can specify the name of a color (there are 140 color names that you can choose from, here is a reference that lists them). Go ahead and add this rule set to the the style element:

.happy{
    background-color: yellow; 
}

If you want to have more than 140 choices of colors, you can use a hexadecimal value, which is a series of six numbers and/or letters. Here's a [hex color reference]https://www.w3schools.com/css/css_colors_hex.asp) that you can use to find hex colors. Note that when using hex colors, you must prefix the numbers letters with a hash tag ( # ), like so:

.sad{
    background-color: #0000ff;
}

You can also specify colors using a mixture of rgb values (red, green, blue). Each value can range from 0 to 255.

.blah{
    background-color:rgb(128,128,128);
}

Finally, you can use another variation of rgb colors by adding an a which stands for 'alpha'. The alpha setting allows you to set the transparency level of the color. The highest alpha level is 1, which means the color is completely opaque and will cover up any color that are beneath it. Using a value less than 1 allows you to make the color transparent, and this will allow and colors underneath to be seen. In the code sample below, I've set the alpha to .1, which means the color (red in this case) will be highly transparent and will appear on the page as a faint pink tinge.

.angry{
    background-color: rgba(255,0,0,.1);
}

Fonts

Let's start off by adding this rule set inside the STYLE element:

body{
    font-family: arial;
    font-style: oblique;
    font-size: 24px;
}

You can specify the type of font (aka the 'font family') by setting the font-family property in a rule set. Most browsers only support a few families of fonts, such as Arial, Verdana, and Times New Roman. Within each family, there may be different variations, such a cursive, italic, and oblique. To chose a specific variation of a font family, you set the font-style property. The default setting for the font-style property is 'normal'. The font-size property allows you to set the size of the font. In the above code sample, we set it to pixels (px), but you can use percent, and a few other units of measure that we won't discuss right now.

You could specify both the font family, and it's variation in a single line by setting the font-family property like so:

font-family: arial, italic;

Web Fonts

As mentioned, most browsers only support a few different font families out of the box, but you can import many many other types fonts. These are known as web fonts and there are quite a few web sites that offer many different fonts for you to chose from. We'll use Google Fonts to add more font families. Enter this URL into your browser to see all the fonts that you can use courtesy of Google: fonts.google.com. Then scroll through the fonts until you find one you like. Here are the steps to import a font into your web page (note that the website seems to change frequently, so it's possible that these steps are out-dated).

  1. Click on the Get font button
  2. Click on the Get embed code button
  3. Click the radio button labelled @import
  4. Copy the code that is in between the style tags, you do not need the style tags because we already have a style element in our sample page. This means you will copy an 'import' statement (it starts with the @ sign).
  5. Paste the import statement inside the style element in your sample code, but make sure that it is the first line of code inside the style element. This will import the font into your sample page.
  6. To apply the font in your rule sets, you will have to set the font-family property to a value that you can find just under the import code on the google site. There may be other CSS properties that you can set to control the font, they should appear in the code sample on the google site.