CSS Colors and Fonts

This tutorial is part of a web programming course for people who have no programming experience.


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 ruleset to the the STYLE element: 

.happy{
    background-color: yellow; 
}

If you want to have more than 140 choices of colors, you can use a hexidecimal value, which is a series of six numbers and/or letters. Here's a hex color reference 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 ruleset 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 ruleset. 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.googel.com. Then scroll through the fonts until you find one you like. Here are the steps to import a font into your web page.

  1. Click on the font that you like
  2. Press the buton that says + Select this style, you'll see a window appear on the right side of the screen.
  3. Click on Embed
  4. Click on @import, you'll see a style elemnt appear with some code in it. Copy the code inside this style element and paste it into the STYLE element in our sample page. Make sure to paste it above all the rulesets that are inside the STYLE element. You've just imported the font into your webpage, so you can start to use it inside of your rulesets.
  5. Just below the code that you copied, you should see a code sample that shows you how to use the font in one of your rulesets. Copy that code and paste into the ruleset that in our sample page. The contents of your STYLE element should know look something like this (I chose the Lobster font): 
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

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

Go ahead and add this ruleset to apply the Lobster font to all DIV elements (I've added a few other properties to style the DIV elements):

div{
    font-family: 'Lobster', cursive;
    color: white;
    font-size: 200%;
    line-height: 56px;
    text-align: center;
}
NEXT LESSON: The CSS Box Model