How CSS Works - Selectors and Properties
What is CSS?
Cascading Style Sheets (CSS) is the language that controls how HTML elements look on screen. While HTML defines structure and meaning, CSS defines appearance: colours, spacing, fonts, sizes, and layout.
Without CSS, every website would look like a plain text document. CSS is what turns raw HTML into a polished, visual experience.
How CSS Connects to HTML
There are three ways to apply CSS to an HTML page. The recommended approach for real projects is an external stylesheet — a separate .css file linked from the <head>:
<head>
<link rel="stylesheet" href="style.css" />
</head>
The other two approaches are less ideal but worth knowing:
Internal styles — written inside a <style> tag in the <head>:
<head>
<style>
h1 { color: teal; }
</style>
</head>
Inline styles — written directly on an element using the style attribute:
<h1 style="color: teal;">Hello</h1>
Inline styles are hard to maintain and should be avoided except for quick tests.
The Anatomy of a CSS Rule
Every CSS rule follows the same structure:
selector {
property: value;
}
- The selector targets which HTML elements to style
- The property is what aspect to change (colour, size, font, etc.)
- The value is what to set it to
A real example:
h1 {
color: #1a1a2e;
font-size: 2rem;
font-weight: bold;
}
This targets every <h1> element and applies three declarations to it.
Selectors
Selectors are how you tell CSS which elements to style. There are several types.
Type Selector
Targets all elements of a given HTML tag:
p {
color: #374151;
line-height: 1.7;
}
h2 {
font-size: 1.5rem;
}
Class Selector
Targets elements that have a specific class attribute. Class names are prefixed with a dot (.):
<p class="intro">Welcome to CareerEx.</p>
<p>This paragraph is not styled.</p>
.intro {
font-size: 1.2rem;
font-weight: 600;
color: #42BCB1;
}
Classes are the most commonly used selector in professional CSS. An element can have multiple classes:
<button class="btn btn-primary">Sign Up</button>
ID Selector
Targets a single element with a specific id attribute. IDs are prefixed with a hash (#):
<header id="site-header">...</header>
#site-header {
background: #0F1C3A;
padding: 20px;
}
Each id must be unique on the page. Use IDs sparingly — classes are more flexible.
Grouping Selector
Apply the same styles to multiple selectors at once using a comma:
h1, h2, h3 {
font-family: Montserrat, sans-serif;
color: #181A20;
}
Descendant Selector
Target elements that are nested inside another element:
/* Styles <a> elements only when they are inside a <nav> */
nav a {
color: white;
text-decoration: none;
}
The Cascade: Which Style Wins?
The word "Cascading" in CSS describes how conflicting rules are resolved. When multiple rules target the same element, the browser uses three factors to decide which wins:
- Specificity — more specific selectors override less specific ones. IDs beat classes, classes beat type selectors.
- Source order — when specificity is equal, the rule that appears last in the stylesheet wins.
- Importance —
!importantoverrides everything, but should almost never be used.
/* Specificity: low (type selector) */
p { color: black; }
/* Specificity: medium (class selector) — this wins */
.highlight { color: gold; }
<p class="highlight">This text is gold.</p>
Common CSS Properties
| Property | What it controls | Example value |
|---|---|---|
color | Text colour | #374151, red |
background-color | Element background | #F9F9F9, white |
font-size | Text size | 16px, 1rem |
font-weight | Text boldness | 400, 700, bold |
font-family | Typeface | Arial, sans-serif |
text-align | Horizontal text alignment | left, center, right |
margin | Space outside element | 16px, 0 auto |
padding | Space inside element | 12px 24px |
border | Border around element | 1px solid #E5E7EB |
width / height | Element dimensions | 300px, 100% |
Practice Exercise
Style a profile card using the selectors you have learned:
- Give the
.carda white background, rounded corners (border-radius: 12px), and padding - Style the
h2inside the card with a teal colour - Style the
.roleparagraph to be smaller and grey - Style the
.btnto have a teal background and white text
Try it yourself
Key Takeaways
- CSS (Cascading Style Sheets) controls the visual appearance of HTML elements
- A CSS rule consists of a selector, property, and value: selector { property: value; }
- Type selectors target HTML tags, class selectors use a dot prefix, and ID selectors use a hash prefix
- The cascade resolves conflicts by specificity first, then source order
- External stylesheets linked with <link> in the <head> are the recommended approach
- A single element can have multiple classes, making class selectors the most flexible option
Quick Quiz
1.What does the class selector syntax look like in CSS?
2.Which of the following correctly describes CSS specificity?
3.What is the recommended way to link CSS to an HTML page?
4.What does the descendant selector 'nav a' target?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx