Styling Text with CSS

Tutorial 2 of 5

Introduction

In this tutorial, our goal is to explore how we can style text using CSS (Cascading Style Sheets). CSS is a language used for describing the look and formatting of documents written in HTML. We'll specifically focus on the various CSS properties related to text styling and how to use them effectively.

By the end of this tutorial, you'll learn:

How to change the font size, color, and style of text
How to adjust the line height and letter spacing
How to apply text transformation and decoration

Prerequisites: Basic knowledge of HTML and CSS. Familiarity with the concept of CSS selectors is beneficial but not required.

Step-by-Step Guide

Font Properties

CSS provides a range of properties that can be used to style fonts.

font-family: This property specifies the typeface that should be used to display the text.

css p { font-family: Arial, sans-serif; }
This sets the font of all paragraphs to Arial, and if Arial is not available, the browser will use any sans-serif font.

font-size: This property sets the size of the font.

css h1 { font-size: 36px; }
This sets the font size of all h1 elements to 36 pixels.

font-weight: This property sets how thick or thin characters in text should be displayed.

css strong { font-weight: bold; }
This sets the font weight of all text within strong tags to bold.

Text Properties

There are also several CSS properties to alter the appearance and layout of text.

text-align: This property sets the horizontal alignment of a block element or table cell block.

css p { text-align: center; }
This centers the text of all paragraph elements.

text-decoration: This property sets the decoration added to text.

css a { text-decoration: none; }
This removes the underline from all hyperlinks.

text-transform: This property controls the capitalization of text.

css h1 { text-transform: uppercase; }
This transforms the text of all h1 elements to uppercase.

line-height: This property sets the distance between lines.

css p { line-height: 1.6; }
This sets the line height of all paragraph elements to 1.6 times the font size.

letter-spacing: This property sets the spacing behavior between text characters.

css h1 { letter-spacing: 2px; }
This increases the spacing between characters in all h1 elements by 2 pixels.

Code Examples

Example 1

Let's start with a basic example of applying font and text properties to HTML elements.

HTML:

<body>
  <h1>My First CSS Example</h1>
  <p>This is a paragraph.</p>
  <a href="#">This is a link</a>
</body>

CSS:

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

h1 {
  font-size: 36px;
  text-transform: uppercase;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

a {
  text-decoration: none;
  font-weight: bold;
}

In the above CSS, we're setting the font for the entire body to Arial. The h1 has been transformed to uppercase and centered with a size of 36px. The paragraph p has a 1.6 line height and 18px font size. The link a is bold and has no underline.

Example 2

Now, let's look at a more advanced example where we use CSS classes to style text.

HTML:

<body>
  <h1 class="my-heading">My First CSS Example</h1>
  <p class="my-paragraph">This is a paragraph.</p>
  <a href="#" class="my-link">This is a link</a>
</body>

CSS:

.my-heading {
  font-family: 'Times New Roman', serif;
  font-size: 36px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
}

.my-paragraph {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
}

.my-link {
  text-decoration: none;
  font-weight: bold;
  color: red;
}

In this example, we've assigned CSS classes to each of our HTML elements. The .my-heading class applies several styles to our h1 element, including changing the font, size, case, alignment, and letter spacing. The .my-paragraph and .my-link classes style our paragraph and link respectively.

Summary

In this tutorial, we covered various CSS properties related to text styling. We've learned how to change the font family, size, weight, and style of text. We've also explored how to adjust line height, letter spacing, and apply text transformations and decorations.

Your next steps could include exploring other CSS properties not covered in this tutorial. You might also want to learn more about CSS selectors and how they can be used to apply styles to specific elements.

Additional resources:

Practice Exercises

Create a webpage with a title, two paragraphs, and two links. Apply different styles to each paragraph and link using CSS classes.
Modify the webpage from the previous exercise. This time, style the elements using CSS id selectors instead of classes.
Create a webpage with a title, three paragraphs, and three links. The first paragraph and link should be styled with a CSS class. The second paragraph and link should be styled with a CSS id selector. The third paragraph and link should be styled using HTML tag selectors.

Solutions and explanations for these exercises can be found in the comment section of this tutorial. For further practice, try experimenting with different fonts, colors, and text properties.