How to Use CSS

Beginner
7 min read
Updated: Nov 2026
4 examples
Attach a rule to HTML
How to use CSS — a rule applied with the style attribute, a style element, or a class
Definition

How to Use CSS

You use CSS by writing a rule and attaching it to HTML. A rule has a selector and one or more declarations. Each declaration is a property and a value: color: #0f766e;.

The selector names the elements. p means every paragraph. .note means every element with class="note". The browser matches the selector, then paints those elements with the declarations.

One shape, three places to put it.

The rule itself stays selector { property: value; }. You place that rule on a style attribute, inside a style element, or in a .css file the page links.

Syntax

How to Write a CSS Rule

A selector, then declarations inside braces. End each declaration with a semicolon:

CSS
selector {
  property: value;
}

p {
  color: #0f766e;
  font-size: 1.05rem;
}

.note {
  background: #fef3c7;
  padding: 0.75rem 1rem;
}
Reference

Where You Use the Rule

The same declarations can live in any of these places. The selector changes which HTML receives them.

How you use itYou writeWhat it styles
Style attributestyle="color: #2563eb;"That one element
Style element<style> in headThis document
External filehref="styles.css"Every page that links the file
Element selectorp { color: #b45309; }Every p
Class.note { } and class="note"Elements that carry the class
A later rulep { color: #0f766e; } secondThe later color, same selector

An external file holds the same rules as a style element. The page loads it from head:

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

How to Use CSS: Examples

Four ways to put a rule to work. View Output shows the color or background the browser paints. Try It Yourself opens the full page in the editor.

Example 1 — How to use the style attribute

Declarations sit on the element. The first paragraph is blue. The second has no style attribute, so it keeps the default color.

HTML
<p style="color: #2563eb;">This paragraph is blue.</p>
<p>This paragraph keeps the default color.</p>
Try It Yourself

How It Works

  1. style="color: #2563eb;" is a declaration list with no selector. It belongs to that p.
  2. The second p has no style attribute, so this snippet does not set its color.
  3. Open Try It Yourself and change #2563eb to see the first paragraph update on its own.

Example 2 — How to use a style element

One rule in head styles every paragraph. The heading stays in the default color because the selector is p.

CSS
p {
  color: #b45309;
}
Try It Yourself

How It Works

  1. <style> in head holds a normal stylesheet for this HTML file. Try It Yourself shows the full element.
  2. The p selector matches both paragraphs, so both are #b45309.
  3. The h1 is a different element, so this rule leaves it alone. Those same lines can move into styles.css.

Example 3 — How to use a class

Name the rule with a dot, then put that name in class. The note gets the background. The plain paragraph does not.

CSS
.note {
  background: #fef3c7;
  padding: 0.75rem 1rem;
  border-radius: 6px;
}
Try It Yourself

How It Works

  1. .note is the selector. The dot means “elements whose class list includes note”.
  2. class="note" on the first paragraph is how the HTML opts in.
  3. The second paragraph has no class, so the background and padding stay off it. Add class="note" in the editor to use the same rule again.

Example 4 — How to use a later rule

Two rules share the selector p. The rule that appears later supplies the color the page uses.

CSS
p {
  color: #64748b;
}

p {
  color: #0f766e;
}
Try It Yourself

How It Works

  1. Both rules select p, so they compete for the same elements.
  2. The second rule comes later in the stylesheet and sets color: #0f766e.
  3. The paragraph is teal. Swap the two rules in Try It Yourself and the color follows whichever rule is last.

Frequently Asked Questions

Write a rule in the form selector { property: value; }. Attach that rule with the style attribute on one element, a style element in head for the current document, or a .css file linked from head. The selector names the HTML the declaration styles.
Put declarations on the element: <p style="color: #2563eb;">. There is no selector. The declarations apply to that element only. A second paragraph with no style attribute keeps the color from the stylesheet, or the browser default.
Place <style> in head and write normal CSS inside it. A rule such as p { color: #b45309; } styles every paragraph in that document. The same rules can move into a .css file later.
Save the rules in a file such as styles.css. In head, add <link rel="stylesheet" href="styles.css">. The browser loads that file and applies its rules. One file can style many HTML pages.
When two rules share the same selector, the browser uses the declaration that comes later in the stylesheet. p { color: #64748b; } followed by p { color: #0f766e; } paints the paragraph teal.

Next: CSS Editors

Pick a tool that colors your rules while you write them.

CSS editors tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

CSS Introduction CSS Editors