Class 2: Understanding How CSS Targets and Styles Your HTML
From Inline Styles to Professional CSS
In Class 1, we used inline styles directly on HTML elements. While this works, it's not maintainable for real projects. Imagine updating the color scheme on a 50-page website where every color is hardcoded in inline styles. You'd have to find and replace thousands of instances.
CSS (Cascading Style Sheets) solves this problem by separating presentation from content. Think of HTML as the structure of a house and CSS as the interior design. The house stands on its own, but CSS makes it beautiful.
Key Insight: Professional web developers keep their CSS in external files. This enables consistency across pages, easier maintenance, and better collaboration with design teams.
What You'll Learn Today
By the end of this class, you'll understand how to target any HTML element with precision, control which styles take priority when conflicts arise, and use modern CSS features like custom properties to build maintainable stylesheets.
Three Ways to Add CSS
CSS can be added to HTML documents in three different ways. Each has its place, but external stylesheets are the professional standard.
1. Inline CSS
Styles applied directly to an element using the style attribute. We used this extensively in Class 1.
This is inline CSS
When to use: Almost never in production. Only for quick tests or when you absolutely need to override other styles.
2. Internal CSS (Style Tag)
CSS written inside a
When to use: Single-page websites or when you want critical CSS to load immediately without an extra HTTP request.
3. External CSS (Preferred Method)
CSS written in a separate file and linked to your HTML. This is the professional standard.
HTML File (index.html)
CSS File (styles.css)
p {
color: blue;
font-size: 18px;
}
Best Practice: Always use external CSS files for multi-page websites. They load once and are cached by the browser, making subsequent page loads faster.
CSS Selectors: Targeting HTML Elements
Selectors are how you tell CSS which HTML elements to style. Think of them as the addressing system for your webpage. Just like you need an address to send mail to the right house, you need selectors to apply styles to the right elements.
Element Selector
Targets all elements of a specific type. This is the most basic selector.
CSS Code:
p {
color: #2c3e50;
line-height: 1.6;
}
Visual Result:
This paragraph has been styled with the element selector. All paragraphs on the page will have dark blue text and comfortable line spacing.
Class Selector (.)
Targets elements with a specific class attribute. Classes are reusable and can be applied to multiple elements. The class selector starts with a period.
:hover - Element being hovered by mouse Use for: Interactive feedback on links, buttons
:focus - Element has keyboard focus Use for: Form inputs, accessibility
:first-child - First child of parent Use for: Removing top margin from first paragraph
:last-child - Last child of parent Use for: Removing bottom margin from last element
:nth-child(n) - Specific position or pattern Use for: Zebra striping tables, every 3rd item
CSS Combinators: Relationships Between Elements
Combinators let you target elements based on their relationship to other elements. This is incredibly powerful for creating precise selectors without adding extra classes.
Descendant Selector (space)
Targets all elements that are descendants (children, grandchildren, etc.) of another element.
CSS Code:
nav a {
color: white;
text-decoration: none;
}
What it targets: All elements inside a , no matter how deeply nested.
Child Selector (>)
Targets only direct children of an element, not deeper descendants.
CSS Code:
ul > li {
list-style-type: square;
}
HTML Structure:
Direct child - styled ✓
Direct child - styled ✓
Grandchild - NOT styled ✗
Adjacent Sibling Selector (+)
Targets an element that immediately follows another element at the same level.
CSS Code:
h2 + p {
font-size: 1.2em;
color: #555;
}
What it targets: Only the first that directly follows an .
Section Title
This first paragraph is larger and gray - it's the adjacent sibling.
This second paragraph is normal style.
General Sibling Selector (~)
Targets all siblings that follow an element, not just the immediate next one.
CSS Code:
h2 ~ p {
margin-left: 20px;
}
What it targets: All elements that come after an at the same level.
Pro Tip: Combinators reduce the need for extra classes. Instead of adding class="intro-paragraph", use h2 + p to style introduction paragraphs automatically.
The Cascade: Understanding Specificity
When multiple CSS rules target the same element, the browser needs to decide which styles to apply. This is where the cascade and specificity come in. Understanding this is crucial for debugging CSS and avoiding frustration.
What is Specificity?
Specificity is how the browser determines which CSS rule wins when multiple rules target the same element. Think of it as a scoring system where more specific selectors get higher scores.
Specificity Hierarchy (Lowest to Highest)
1. Element Selectors p { color: blue; } Specificity: 0-0-1
2. Class Selectors .intro { color: green; } Specificity: 0-1-0
3. ID Selectors #header { color: red; } Specificity: 1-0-0
This text will be purple (highest specificity wins)
Important: Avoid using !important unless absolutely necessary. It breaks the natural cascade and makes debugging harder. If you find yourself using it often, your CSS architecture needs improvement.
Inheritance
Some CSS properties are inherited from parent elements to children automatically. This is separate from specificity but equally important to understand.
CSS Code:
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
Result: All text elements inside the body inherit these properties unless specifically overridden. You don't need to set the font-family on every paragraph, heading, and list.
Properties that inherit: color, font-family, font-size, line-height, text-align
Properties that don't inherit: margin, padding, border, background, width, height
CSS Custom Properties (Variables)
CSS variables, officially called custom properties, let you store values that you want to reuse throughout your stylesheet. They're like constants in programming but for CSS.
Why Use CSS Variables?
Imagine you use the color #3498db in 50 different places. Your client asks you to change it to a different blue. Without variables, you'd need to find and replace all 50 instances. With variables, you change it once.
Declaring Variables
Variables are declared in the :root selector (which targets the highest level element) and start with two dashes.
Best Practice: Define all your colors, spacing, and commonly used values as CSS variables at the start of your stylesheet. This makes your code more maintainable and consistent.
Class 2 Project: Professional Portfolio with External CSS
Now we'll take the portfolio from Class 1 and convert it to use an external stylesheet with CSS variables, proper selectors, and interactive states.
I am a passionate web developer with expertise in modern
frontend technologies. My journey in web development began
with a fascination for creating user-friendly interfaces.
Skills
HTML5 & CSS3
JavaScript (ES6+)
React.js
Node.js
Responsive Design
Git & GitHub
Projects
E-Commerce Platform
Full-stack application built with React and Node.js
featuring user authentication and payment processing.
