CSS Color, Text and Font Properties

In the last tutorial, you learned how to use classes and IDs, which you can now use to add some style rules to your HTML pages. To get started, we will look at some of the color, text, and font properties that are available and apply some of them to an HTML document.

Using Colors

Colors can be an important part of your design, so we will start with a couple of properties that affect the color on your page:

Property Function
color Sets the foreground color. This color will be used by any text affected by the style rule. This is one that you have already been using in this tutorial.
background-color Sets the background color of the area that is affected by the style rule. For instance, the body element
or a particular div element.

With these two properties, you can change the look of things quite a bit – from being really nice to causing serious eye strain. That said, here is an example, starting with the CSS code:

.mytitle { color:#FFF; background-color:#000; }
.yikes { color:#0F0; background-color:#FF0; }

If you used two div elements to test this, your HTML would look like this:

<div class=”mytitle”>
My Cool Web Site
</div>
<div class=”yikes”>
Everything is on sale!
</div>

The first div will be white text on a black background. It’s not exciting, but provides good contrast. The second div will be much harder on the eyes. Here is how the page would look:

My Cool Web Site
Everything is on sale!

The main thing to remember is to choose your colors carefully, so that people are able to easily read the information you are providing.

Text and Font Properties

The text and font can also be altered in various ways that don’t involve color, which can give additional emphasis or other effects when needed. Some of the most used properties are listed below:

Property Function Examples
text-align Sets the alignment of the text. Valid values are center, end, justify, left, right, and start.
center text

 

end text

 

justify text

 

left text

 

right text

 

start text
text-decoration Sets decoration that the text will use, which could be an underline or overline. Valid values are blink, line-through, none, overline, and underline.Note that blink may not work, as it is not implemented in every browser (which may be a good thing).
blink

 

line-through

 

none

 

overline

 

underline
text-transform Sets the case and/or capitalization of the text. Valid values are capitalize, lowercase, none, and uppercase.
capitalize

 

lowercase

 

none

 

uppercase

 

font-family Sets the type of font that will be used, which is must be a valid font name. Some font names must be
quoted such as “Times New Roman”.
Further Information.
Arial

 

Times New Roman

 

Courier
font-size Sets the size of the font. You can use a number of different units including em, pt, and px. Percentages can
also be used. Further Information.
16px

 

1em

 

75%

 

font-style Sets the style of the font. Valid values are italic, normal, and oblique.
italic

 

normal

 

oblique

 

font-weight Sets the weight of the font using a number value (100-900, by hundreds) or using bold, bolder, lighter, or normal.
bold

 

900

 

lighter

As you can see, these add a number of options for you to use in your code, and we will now make use of some of these using an example HTML document.

Style the HTML

We will start with a fairly plain HTML5 document and apply some styles to it. If you came over from the HTML tutorial, you will recognize this as your final index.html file from the tutorial, and will notice some class and id attributes have been added, as well as a link to an external CSS file for styling (mystyles.css).

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>My Basic HTML Page!</title>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css”>
</head>
<body>
<header>
<h1>My Web Page</h1>
</header>
<nav id=”topnav”>
<a href=”index.html”>Home</a>
<a href=”page2.html”>Page2</a>
<a href=”page3.html”>Page3</a>
</nav>
<article>
<h1>Learn to Play Guitar</h1>
<p class=”learn”>
Learning to play the guitar isn’t an easy task…
</p>
<p class=”learn”>
First, you will need lots of this:<br>
Patience.
</p>
</article>
<footer>
Page designed by Me, Inc.
</footer>
</body>
</html>

You’ll create a CSS file to go with this, which will be named mystyles.css. Use the following CSS code for the file:

mystyles.css

header { background-color:#040; color:#FFF; font-family:Arial; }
header h1 { font-size:1.8em; font-weight:bold; text-align:center; }
#topnav { background-color:#444; color:#FFF; }
#topnav a { color:#FFF; text-decoration:none; }
article { background-color:#FFF; color:#000; }
article h1 { font-size:1.3em; font-weight:bold; }
p.learn { font-size:1em; font-family:Verdana; }
footer { font-size:0.8em; font-style:italic; text-align:center; background-color:#040; color:#FFF; }

As you can see, many of the selectors you have learned about are included. Elements, descendants, an id, and a class
are all used in some form. You can see the results of this by looking at the example page here.

The Cascade

When looking at the example page, you may have noticed some style properties were inherited from a higher level. For
instance, take a look at the first h1 element within the header. You will see that it is white and uses an Arial font,
even though those two properties are not listed when describing the h1 element as a descendant of the header element:

header { background-color:#040; color:#FFF; font-family:Arial; }
header h1 { font-size:1.8em; font-weight:bold; text-align:center; }

These are defined as properties for the header element. Since the h1 being styled is a descendant of the
header element, it will inherit any applicable properties that have been defined for the header element itself
(the properties will cascade down). This works the same way with classes and IDs. When you select elements within
them, the selected elements will inherit any style rules set for the class or ID.

Something Amiss?

Inheritance is often good, and keeps you from having to repeat properties for each new style rule that is needed within a selection; however, there are times where this can cause some oddities. Normally, repeating a property declaration simply defines it again – If the color for the header element is #FFF and this is defined again using header h1
as a selector, the color will not be affected – it is the same value. Suppose, however, that you define the
font-size as a percentage for the header, and repeat that in a header h1 selector:

header { font-size:75%; }
header h1 { font-size:75%; }

In this case, repeating the declaration will cause the font for the h1 element to be 75% of 75%, rather than simply 75% – which will cause it to be smaller than you may have intended! Thus, it is important to remember your intentions – if your intention was to have the font simply be sized at 75% of what is was before, then the font-size property will need to be removed from one of the rules to accomplish this.

A Better Page

The page is starting to look a little bit nicer; however, there are now some things that could be done with the spacing to improve this simple design a bit. The next tutorial will cover the various ways you can handle how far each element is from another one.

Next: CSS Margins, Padding, and Borders.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">