Font-Family, Font-Size, Color: CSS Web Design Series Part 2


font-family, font-size, and color
Get the source code from this lesson at the end of the post!

Welcome back, everyone. Today we’re going to be learning how to change the style of our text using the CSS properties: font-family:, font-size:, and color:. In the last post, CSS Introduction, we discussed the three ways of adding CSS to an HTML document. They are inline, internal style sheet, and external style sheet. For this lesson, we’ll be using an inline style sheet which goes in the head element of our HTML document.

Before we get into that; let’s break down what a CSS rule consists of. In the example below, we have a basic CSS rule with one declaration. We are adding CSS to our HTML document with an internal style sheet; so we put our rule in between opening and closing style tags inside of the HTML head element.

CSS Rule Breakdown

Break down of what a CSS rule consists of:

1. p{ is called the selector. It is what we want to style. In the example, we chose the p selector. This would affect every paragraph on the page if we had more than one. We open our declaration block with a ( { ).

2. color: is the property that we want to style. Remember color: is the property used to change font color.

3. blue; is the value that we give to our color property. Notice how we use a colon (:) to separate the property:value pair. And we add a semicolon (;) at the end of the declaration to close it out. Finally, we close the entire declaration block with a ( } ).

So the finished product is:
property: value;

Now that you understand the parts of a CSS rule, let’s add some style to our paragraph text.

Font Color, Size, Type

In the above example, we have set three declarations. One to make the font blue; one to make the font size 15 pixels; and one to make the font type Tahoma. Take notice of the indenting that I use as you advance through these posts. Indenting is important for keeping your code organized and easy to read for you and others. You will develop your own indenting system as you code more. But typically you would indent a nested element. We’ll get into that more, later. A good text editor will take care of most of the indenting for you.

This post is another “Get your feet wet” type of lesson. There are a few different ways to change the color and size of your text. In this lesson, we are covering the most basic ways by using one of the 16 primary web colors available by name and resizing our text in pixels (px). We will get more in-depth with colors using hex values and RGB values in a future post. And also the many ways that you can control how text and other elements can be sized on your web page.

For the people that are brand new to HTML and CSS, if you want to run your code in a web browser; first you must save the document by clicking File and then save as. Since this is just a learning page you can name it test.html, sample.html, or whatever you like. After you figure out a name, click the drop-down menu “Save as type:” directly under “File name:” and choose “Hyper Text Markup Language file(etc. etc. etc.). Finally, click save. You can save this to your desktop for easy access if you want. Note that when you plan on writing HTML in a text editor; when you open a new file you should save it in this way before you even start writing code. The reason for this is so the text editor that you’re working in knows what type of document that you will be creating. When you save a document as a “Hyper Text Markup Language file”, the text editor will know to add syntax highlighting for an HTML document. Syntax highlighting is the text coloring that the editor adds to your code when it recognizes what type it is. For example, if it recognizes an HTML tag, it will change the color of the text for the opening and closing tag to make the document easier to read. A good text editor will also highlight the connecting tag if you double click on one. So if you double click on the opening p tag; the text editor would highlight the closing p tag. Okay, now that we have that sorted out, whenever you plan on running your HTML document in a browser, you will now just click File and then save to see your recent changes. The text editor will prompt you to save your code if you try to run it with changes. Finally, in the top menu click Run; and then you will have the option to Launch your page in the browser of your choice. Note that you must have the browser downloaded in order to Launch your HTML document in it.

List of the 16 primary web colors

  1. Aqua
  2. Black
  3. Blue
  4. Fuchsia
  5. Gray
  6. Green
  7. Lime
  8. Maroon
  9. Navy
  10. Olive
  11. Purple
  12. Red
  13. Silver
  14. Teal
  15. White
  16. Yellow

Let’s end on this note for now. You should now understand what a CSS rule consists of. A CSS rule can have one or many declarations. If you have multiple declarations they are separated with a semicolon ( ; ). Try to make a few paragraphs and play around with the web colors, font-size, and font-families. You can google popular or common web fonts if you don’t know any off the top of your head. Practice really does make perfect when it comes to coding and programming, and experimenting with code is an important part of learning. I’ll see you in the next post where we’ll take a look at multiple CSS selectors. Have fun coders.

Source Code

<!DOCTYPE html>
<title>Changing Font Styles</title>
color: blue;
font-size: 15px;
font-family: Tahoma;

This is a sample paragraph.
Many web developers use lorem ipsum text as a placeholder when they are designing.
Lorem ipsum is just jibberish to simulate what your design would look like.
It is easy to get. You just search for "lorem ipsum".
Then copy and paste it where necessary.


posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: