CSS Colors, Fonts and Formatting

29 June, 2023

Contributors

Shruti Balasa

@shrutibalasa

CSS has hundreds of properties and we can never learn all of them. But in the next few shows, we’ll learn the essential ones. The most important set of properties when it comes to styling text are changing the color and fonts and formatting the text. Let’s look at each of them.

Colors

Colors play a crucial role in web design. They can evoke emotions, set the tone, and make your content visually appealing. To set the color of text - headings or paragraphs, we use the property color.

For specifying the value, we can use color names, hexadecimal codes, RGB values or even HSL values. Let's look at some examples:

Color Names

CSS provides a set of predefined color names such as green, skyblue, or tomato. You can use them directly in your CSS rules, like this:

h2 {
  color: tomato;
}

Here’s the complete list of 140 standard color names.

RGB Values

RGB stands for Red, Green and Blue - the primary colors of light. You can define custom colors by specifying their RGB values (each number represents the amount of each color). Here's an example:

p {
  color: rgb(0,0,255);
}

Note the syntax - We use the rgb() function with the 3 color values ranging from 0 to 255 separated by commas.

Hex Codes

Hexadecimal Colors (or simple hex codes) represent colors using a combination of numbers and letters. They start with a hash (#) followed by six characters. For example:

p {
  color: #0000ff;
}

Here, the first two characters represent the amount of red, the next two characters, green and the last two, blue. Each set of characters is hexadecimal numbers starting from 00 to ff (which is 0 to 255 in decimal). So the above color #0000ff is Red - 0, Green - 0 and Blue - 255. Which means the color is blue.

Of course you don’t have to decode any of this manually. You can use color picker tools to get hex codes or RGB values from visual colors or vice versa.

These color values are not only used to specify text colors, but also backgrounds, border colors, shadows and more. We’ll explore those properties soon.

Fonts

Fonts play a crucial role in setting the tone and style of your web page. The property used in CSS to set a font type is font-family. You set a font for the entire web page using a web safe font like so:

body {
	font-family: Arial, sans-serif;
}

As you can see, the value can be multiple comma-separated font names. In case “Arial” fails to load, the general “sans-serif” font is applied.

Although the more common and better way of specifying fonts these days is using a web font service like Google fonts.

Once you pick the font(s) of your choice, you’ll see this on the right:

Simply copy the <link> code and paste it above your stylesheet link in the <head> section. Now you can you do this in your CSS file:

body {
	font-family: 'Roboto', sans-serif;
}

See how your web page font changes to Roboto. Here’s the HTML and CSS, just in case you got lost in between:

HTML (index.html)

<!DOCTYPE html>
<html>
    <head>
        <title>Adding Fonts</title>
        <link rel="preconnect" href="<https://fonts.googleapis.com>" />
        <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
        <link href="<https://fonts.googleapis.com/css2?family=Roboto&display=swap>" rel="stylesheet" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1>Let's change this font today</h1>
        <p>Using Google fonts, we can change this to any font family.</p>
    </body>
</html>

CSS (styles.css)

body {
    font-family: "Roboto", sans-serif;
}

And just like that, you gave a fresh look to your web page!

Formatting

When it comes to styling text, CSS offers a range of properties to control the appearance of fonts, including font size, font weight, and font style. Let's dive into each of these properties and see how they can be used to customize the look of your text.

Font Weight

The font-weight property controls the thickness or boldness of the text. You can use values like normal, bold, light or numeric values like 100, 200 up to 900. For example:

h1 {
	font-weight: 900;
}
p {
	font-weight: light;
}

However, note that for these to work correctly, you should have imported the fonts with those thickness styles from Google fonts or similar service.

Font Style

The font-style property allows you to specify the style of the text, such as normal, italic or oblique. Italic and oblique styles can give your text a slanted or cursive appearance. So, you can try:

p {
	font-style: italic;
}

Line Height

This property is often ignored by beginners, but it’s as crucial as the other properties above to make the text look appealing. The property line-height is used to specify the height of text that reduces or increases spacing between lines of text.

p {
	line-height: 1.5;
}

The default line height is 1. So try adding the above rule on a long paragraph and you’ll immediately notice the difference. Greater line height makes it easy to read the text.

By combining these font properties and color, you have the power to create visually appealing and well-designed text on your web pages. Experiment with different font sizes, weights, and styles to find the perfect balance that suits your desired look and feel.