Adding Color with CSS

In this lesson you'll learn the basics of adding text and background colors with CSS, so you can understand the difference in roles between HTML and CSS. This is for people searching "CSS color usage" or "CSS basics how to write."

CSS is written in the form selector { property: value; }. Picture it as specifying, as a set, "which element (selector)," "what (property)," and "how (value)." color specifies text color, and background specifies background color. If HTML builds the "skeleton" of a document's structure, CSS is in charge of "visual decoration" — the color and spacing applied on top of it.

The sample code writes two rules inside a <style> tag — h1 { color: #ff6fd8; } and p { background: #f0f0ff; padding: 10px; } — specifying the heading's text color and the paragraph's background color respectively. Colors can be specified either as a hexadecimal value like #ff6fd8, or as a name like red.

A common beginner stumbling block is forgetting the space between the selector and the curly brace, the colon : between property and value, or the trailing semicolon ;. If even a small part of CSS syntax is wrong, that rule alone gets ignored and nothing is applied — so it's important to build the habit of carefully checking each piece one at a time.

In real web development, the basic division of labor is building structure with HTML and styling appearance with CSS. Once you get comfortable thinking of these as two separate concerns, changing the design and maintaining the code both become much easier.