Styling Text with CSS

The Foundation: Inheritance

Before we dive into specific properties, we need to understand a core concept in CSS: inheritance. Many CSS properties, especially those related to text, are "inherited." This means that if you apply a style to a parent element, its child elements will automatically adopt that same style unless they are explicitly told otherwise. This is incredibly efficient. Instead of styling every single paragraph and list item, you can set a base font style on the <body> element, and your entire page will inherit it.

Let's start with a fantastic video from Kevin Powell that explains this concept and introduces many of the properties we'll cover today.

As you saw, the browser has its own default styles. Headings are bold, links are blue and underlined, etc. Our CSS rules can override these defaults. When our styles don't seem to work, the developer tools are our best friend for figuring out why.

1. The color Property and Its Values

The most basic way to style text is by changing its color using the color property. While you can use simple named colors like red or blue, you will almost always use more specific color codes in real projects to match a design. There are three main formats you should know.

Hex codes are the most common format you'll see. Don't worry about memorizing them; tools like the Adobe Color wheel mentioned in the article or color pickers built into code editors like VS Code make it easy to choose colors and get their codes.

2. Styling Fonts

Now let's move on to the properties that control the font itself. These typically start with font-.

font-family

This property sets the typeface. Since you can't be sure which fonts are installed on your user's computer, you should provide a "font stack": a comma-separated list of fonts. The browser will go down the list and use the first one it finds. It's a best practice to end the list with a generic family name like serif (fonts with small strokes on the ends of letters, like Times New Roman) or sans-serif (fonts without those strokes, like Arial or Helvetica).

font-size

This controls the size of the text. While you can use pixels (px), the modern standard is to use rem units. One rem is equal to the root font size of the browser, which is typically 16px. Using rem respects the user's browser settings, making your site more accessible. For example, a user with visual impairments might have their default font size set larger, and rem units will scale accordingly, whereas px values are absolute and will override their preference.

font-weight

This property controls the boldness of the text. It's often set using numeric values from 100 to 900. For most standard fonts:

• font-weight: 400; is normal.
• font-weight: 700; is bold.
  Some fonts offer more weights (e.g., 300 for "light", 900 for "black" or "heavy").

font-style

This is most commonly used to make text italic.

• font-style: italic; makes text italic.
• font-style: normal; removes any italic styling.

Let's return to the Kevin Powell video to see these font properties in action.

3. Styling Text Layout and Decoration

The final group of properties controls how text is arranged and decorated within its element.

line-height

This property controls the vertical space between lines of text. For body text, a line-height of around 1.5 to 1.7 dramatically improves readability compared to the browser default. It's best to use a unitless value, which acts as a multiplier of the font-size.

text-align

This controls the horizontal alignment of text within its container. The common values are left, right, center, and justify.

text-transform

This allows you to change the case of the text without altering the HTML. The most useful values are uppercase, lowercase, and capitalize.

text-decoration

This property adds or removes lines from text. You'll most often use text-decoration: none; to remove the default underline from links, particularly in navigation menus. You can also add lines with underline, overline, or line-through.

A crucial piece of advice: avoid removing the underline from links within a paragraph or body of text. The underline is a universally recognized indicator that text is clickable. Removing it can harm your site's usability.

Let's watch the final segments of the video to see these text properties demonstrated.

Practice Time

It's time to put theory into practice. Open your index.html and styles.css files. Let's transform the default browser text into something more refined.

1. Set Base Styles: In styles.css, target the body element. Let's set some inherited styles for the whole page. Choose a font from your computer (like Helvetica, Georgia, or Verdana) and create a font stack.

   body {
     font-family: Helvetica, Arial, sans-serif; /* A clean, modern font stack */
     font-size: 1.125rem; /* This will compute to 18px in most browsers (16 * 1.125) */
     line-height: 1.6;
     color: #333; /* A dark gray, softer than pure black */
   }
   

2. Style the Heading: Target your <h1>. Let's make it stand out.

   h1 {
     font-family: Georgia, 'Times New Roman', serif; /* A different font for the heading */
     font-weight: 700; /* Ensure it's bold */
     color: #005a9c; /* The same blue from our last lesson */
     text-align: center;
     text-transform: uppercase;
   }
   

3. Style the Links: Target all anchor (<a>) tags. Let's change their color but keep the underline for usability.

   a {
     color: #d9534f; /* A nice shade of red/coral */
   }
   

4. Create an "Emphasis" Class: In your CSS, create a new class for making text italic and a different color.

   .emphasis {
     font-style: italic;
     color: #5bc0de; /* A light blue */
   }
   

   Now, go to your index.html and add class="emphasis" to a <span> tag inside one of your paragraphs to style just a few words, or add it to an entire <p> tag.

5. Save and Refresh: Save both files and look at your index.html in the browser. You should see a dramatic change! Your page is starting to have a distinct personality. Experiment with different values to see what you can create.

Conclusion

You've just taken a huge step in learning CSS. You now have control over the core typographic and color elements of your website. These properties are the ones you will use constantly in every project you build.

Key Takeaways:

• Inheritance is a key CSS concept: styles on parent elements flow down to their children. Set base styles on the body.
• Use rem for font-size and unitless values for line-height to create flexible, accessible, and maintainable designs.
• A font stack (font-family) ensures your site looks acceptable even if the user doesn't have your preferred font.
• Use specific color codes (like Hex or RGB) instead of generic names for professional designs.
• Don't remove underlines from links within body text. Usability first!

In our next lesson, we will move from styling the content within an element to styling the element's container itself. You'll learn about the CSS Box Model, which governs how we control an element's margin, padding, and border—the very building blocks of page layout.