2026-03-116 min read

CSS Colors and Fonts

Learn CSS Colors and Fonts step by step with clear examples and exercises.

Why This Matters

In web development, creating visually appealing and user-friendly websites is crucial. While HTML provides the structure of a website, CSS (Cascading Style Sheets) brings it to life by controlling its layout, colors, fonts, and more. In this lesson, we'll delve deeper into understanding how to use CSS for setting colors and fonts in your web projects, providing you with essential skills that will help enhance the aesthetics of your websites.

Prerequisites

Core Concept

CSS Colors

CSS allows you to set colors for various elements on your web page using the color property. There are several ways to specify colors in CSS, including:

Hexadecimal: A six-digit hex code that represents a specific color. For example, #FF0000 is red. Hex codes consist of three pairs of two digits each, where the first pair represents red (RR), the second pair green (GG), and the third pair blue (BB). Each digit can range from 0 to F, with F being equal to 15 in hexadecimal notation.
RGB (Red, Green, Blue): Specifies the intensity of red, green, and blue to create a color. An RGB value is written as three numbers between 0 and 255, separated by commas. For example, rgb(255, 0, 0) is also red. The RGB values represent the proportion of each color channel in the color space, with each channel ranging from 0 (minimum intensity) to 255 (maximum intensity).
RGBa (Alpha): Similar to RGB but includes an optional alpha channel that specifies the transparency level of the color. The alpha value ranges from 0 (transparent) to 1 (opaque). For example, rgba(255, 0, 0, 0.5) is semi-transparent red.
Named colors: CSS also supports a set of predefined color names like red, blue, and green. These are useful for quick styling but should be used sparingly as they may not always match the exact color you want.

CSS Fonts

Fonts play a significant role in the readability and overall look of your web page. With CSS, you can control various font properties like font-family, font-size, font-weight, and more.

Font-Family: Use this property to specify the font family for an element. You can list multiple font families separated by commas in case a specific font is not available on the user's system. For example, font-family: Arial, Helvetica, sans-serif; will use Arial if it's available, Helvetica if Arial isn't available, and fall back to a sans-serif font if neither are available.
Font-Size: Set the size of your text using this property. You can use relative units like em, rem, or absolute units like pixels (px). For example, font-size: 16px; sets the font size to 16 pixels. Relative units allow for dynamic sizing based on the parent element's font-size, making responsive design easier.
Font-Weight: Control the boldness of your text using this property. Values include normal, bold, and numerical values from 100 to 900. For example, font-weight: bold; makes the text bold. Lighter weights like 300 or 400 can be used for semi-bold text, while heavier weights like 700 or 800 are suitable for headings and titles.

Worked Example

Let's create a simple HTML page with CSS to demonstrate color and font usage.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors and Fonts Example</title>
<style>
body {
background-color: #F2F2F2; /* Light Gray */
font-family: Arial, Helvetica, sans-serif; /* Default font stack */
color: #333; /* Dark Gray Text */
}

h1 {
font-size: 2em; /* Font size is 2 times the default font-size */
font-weight: bold; /* Make headings bold */
color: #FF6347; /* Orange text for headings */
}

p {
font-size: 1.2em; /* Slightly larger than default font-size */
font-weight: normal; /* Regular text weight for paragraphs */
color: #008CBA; /* Light Blue text for paragraphs */
line-height: 1.5; /* Improve readability by increasing line height */
}
</style>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</body>
</html>

In this example, we've set the background color of the body to a light gray (#F2F2F2), the font family to Arial, Helvetica, and sans-serif. We've also specified different colors for the h1 and p elements and adjusted their font sizes, weights, and line height for better readability.

Common Mistakes

Forgetting to close CSS rules: Always make sure to close your CSS rules with a semicolon (;) followed by an empty line or another rule. For example:

body {
background-color: #F2F2F2; /* Correct */
font-family: Arial, Helvetica, sans-serif;
}

Instead of:

body {
background-color: #F2F2F2;font-family: Arial, Helvetica, sans-serif; /* Incorrect */
}

Using incorrect syntax for color values: Make sure to use the correct syntax when specifying colors in CSS. For example, always enclose hexadecimal colors with a hash (#) and RGB values with parentheses (()).

Not understanding specificity: Specificity is a concept in CSS that determines which styles take precedence over others. Make sure to understand how specificity works when multiple rules apply to the same element.

### Using non-standard fonts:

When using custom or non-standard fonts, make sure they are properly loaded and available for all users. This can be achieved by hosting the font files on your own server or using a service like Google Fonts.

### Ignoring accessibility considerations:

It's essential to consider color contrast when choosing colors for your website to ensure it is accessible to users with various visual abilities. Use tools like Contrast Checker to verify the contrast between your text and background colors.

Practice Questions

What are the three ways to specify colors in CSS?
How do you set the font family for an HTML element using CSS?
What is the purpose of the font-weight property in CSS?
Why should you list multiple font families separated by commas when setting the font-family property?
What does the rgba(255, 0, 0, 0.5) value represent in CSS?
How can you improve readability in your web page using CSS? (Hint: line-height and font-size properties)
What is specificity in CSS, and how does it affect the styling of elements?
Why is it important to consider color contrast when designing a website for accessibility purposes?
How can you ensure that custom or non-standard fonts are available to all users?
What tools can help you verify the contrast between your text and background colors in CSS?

FAQ

Why can't I use only named colors for my entire website?

Using only named colors may limit your design options and make it harder to maintain consistency across your website. It's recommended to use hexadecimal or RGB values for precise color control.

How do I set a custom font for my website?

To use a custom font, you need to download the font files (usually .ttf or .woff) and include them in your project. Then, you can reference the font files in your CSS and apply them to your HTML elements using the @font-face rule.

What is the difference between em and rem units in CSS?

em is a relative unit based on the font-size of the parent element, while rem is a relative unit based on the root font-size (usually defined in the HTML element). Using rem ensures consistent typography across your entire website.

What are some best practices for using CSS colors and fonts to improve readability?

Some best practices include using high contrast between text and background colors, choosing easy-to-read fonts, and adjusting line height and font size to improve readability on different devices and screen sizes.