If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

So far, we’ve learned some basic HTML constructs: paragraphs, headings, and lists. That’s a great start, but by themselves, these elements are fairly static. An h1 heading is just like any other h1 out there - or is it?

Fortunately, we can customize the appearance of any element, including h1, using Cascading Style Sheets (CSS). You may have already seen a hint of CSS when adjusting text color or background color. CSS can do much more than that - from typography to layout, spacing, and responsive design.

For inspiration, check out CSS Portal, which showcases how CSS can transform ordinary HTML into visually engaging web pages.

In this chapter, we’ll introduce a more efficient method of applying styles than what we’ve seen in earlier sections. At first, we’ll focus on color because it’s simple and makes the effect immediately visible. By the end of the chapter, you’ll be able to create rich, reusable styles that dramatically enhance your pages.

After completing this section, you should be able to:

• Create a style sheet for a single page or an entire website.
• Define reusable styles using CSS classes and IDs.
• Apply advanced font changes to any HTML element.
• Control padding, margins, and borders effectively.
• Align and indent text precisely.

The Styling Basics chapter includes the following sections:

The style Attribute

Introduces inline styles and the basic problem CSS is designed to solve: separating content from presentation.

Style Sheets

Explains how external or internal style sheets allow you to organize styling rules in one place, apply them consistently, and take advantage of cascading and inheritance.

Classes and IDs

Shows how to create specialized CSS rules using classes and IDs to target specific elements or groups of elements.

Div and Span

Describes the generic container elements div and span, which are used to apply styles or group content without adding semantic meaning.

Font Control

Covers more advanced font styling, including changing font family, size, weight, and style. We’ll also explore a slightly more complex stylesheet than those seen in earlier examples.

Borders

Explains how to style borders: setting color, thickness, individual sides, and shorthand notation for efficiency.

Margins and Padding

Discusses padding (space inside an element) and margins (space outside an element) to control layout and spacing.

Align and Indent

Covers text alignment and indentation, including horizontal alignment and hanging indents. (Block alignment and advanced positioning are covered in later sections.)