CSS Basics: 8 Easy Lessons for Your First Stylesheet

A page written only in HTML looks like a plain document: black text, blue links and everything stacked down the left side. CSS turns that document into a design, and CSS basics are simpler than they first appear because the whole language repeats one pattern.

This guide covers that pattern, the ways to attach CSS to a page and the everyday properties for color, size, text and backgrounds.

What CSS Does

CSS stands for Cascading Style Sheets. It tells the browser how HTML content should look: its colors, fonts, sizes and spacing.

Keeping the look separate from the content has a practical benefit. One CSS file can style every page of a site, so a single change updates all of them.

CSS Basics: How a Rule Is Written

CSS is a list of rules. Each rule has the same shape:

css

p {
  color: darkslategray;
  font-size: 18px;
}

• The selector (p) says which elements the rule applies to. Here, every paragraph.
• A property (color) is the thing you want to change.
• A value (darkslategray) is what you change it to.
• A property and value together form a declaration. Each one ends with a semicolon, and all of them sit inside curly braces.

To style only some elements, give them a class in the HTML, such as <p class="intro">, and target it with a dot:

css

.intro {
  font-weight: bold;
}

A comment is written between /* and */. The browser ignores it.

css

/* Styles for the opening paragraph */

Three Ways to Add CSS

Inline CSS goes in a style attribute on one element:

html

<p style="color: red;">Warning text</p>

Internal CSS goes in a <style> tag inside the page’s head:

html

<style>
  p { color: red; }
</style>

External CSS lives in its own file, such as styles.css, linked from the head:

html

<link rel="stylesheet" href="styles.css">

External is the preferred method. One file styles the whole site, the browser can save it and reuse it on every page, and your HTML stays clean. Inline styles affect one element only and are hard to maintain.

Colors

CSS accepts colors in several formats. Three are enough to start:

css

h1 { color: tomato; }
h2 { color: #1a73e8; }
p  { color: rgb(60, 60, 60); }

• Names such as red, navy and tomato are easy to read but limited in choice.
• Hex codes start with # followed by six characters. Each pair sets the amount of red, green and blue. #000000 is black and #ffffff is white.
• rgb() takes three numbers from 0 to 255 for red, green and blue. rgb(255, 0, 0) is pure red.

The color property sets the text color. Backgrounds have their own property, covered below.

Units

Sizes need a unit. These four cover most beginner work:

css

h1 { font-size: 2rem; }
.box { width: 50%; }

Browsers set the root font size to 16px by default, so 2rem equals 32px. Because rem follows that one root value, it stays predictable and respects a visitor’s own font size setting.

Fonts and Text Properties

css

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
h1 {
  font-weight: 700;
  text-align: center;
}

• font-family lists fonts in order of preference. The browser uses the first one available. End the list with a generic family such as serif or sans-serif as a fallback.
• font-size sets the text size.
• font-weight sets the thickness. 400 is normal and 700 is bold.
• line-height sets the space between lines. A number without a unit multiplies the font size.
• text-align aligns text left, right or center.

Two more are worth knowing: text-decoration: none removes the underline from links, and text-transform: uppercase displays text in capitals.

Backgrounds

css

body {
  background-color: #f5f5f5;
}
.hero {
  background-image: url("hills.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-color fills an element with a color. background-image loads a picture behind the content. With cover, the image scales to fill the whole element, and no-repeat stops it from tiling.

Always check that text is easy to read against its background.

The Cascade and Inheritance

The cascade is how the browser decides between rules that conflict. In the simplest case, when two equal rules set the same property, the later one wins:

css

p { color: blue; }
p { color: green; }

Paragraphs here are green. A more specific selector also beats a general one, so a class rule beats a plain element rule whatever the order. The full scoring system is explained in Introduction to CSS Selectors.

Inheritance means some properties pass from a parent element to everything inside it. Text properties such as color, font-family and line-height are inherited. That is why setting a font on body changes the whole page.

Properties such as background-color, width and borders are not inherited. They apply only to the element you target.

Frequently Asked Questions

Is CSS a programming language?

CSS is a style sheet language. It describes how things should look instead of giving step-by-step instructions, so most people do not call it programming.

Should I use px or rem for font sizes?

Prefer rem for text. It scales with the visitor’s browser font setting, which helps people who need larger text. px is fine for thin borders.

Why is my CSS not working?

The usual causes are a wrong file path in the <link> tag, a missing semicolon or brace, a misspelled class name, or another rule that overrides yours.

Final Thoughts

CSS basics rest on one pattern: a selector, then declarations made of a property and a value. Put your rules in an external file, learn the common color, unit and text properties, and remember that the cascade and inheritance decide the final result.

Related reading

• Introduction to CSS Selectors
• Understanding the CSS Box Model
• HTML Basics for Front-End Development