Phase 2 — CSS Fundamentals
#5 Introduction to CSS
selectors, properties, cascade
What is CSS?
CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. It defines colors, fonts, spacing, layout, and more — separating presentation from structure.
Three ways to add CSS
1. External stylesheet (recommended)
<!-- In your HTML <head> -->
<link rel="stylesheet" href="style.css">2. Internal stylesheet
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
</style>3. Inline styles (avoid when possible)
<p style="color: blue; font-size: 18px;">Styled text</p>Selectors
CSS selectors target HTML elements to style:
Common selectors
/* Element selector */
p { color: #333; }
/* Class selector */
.card { border: 1px solid #ddd; padding: 16px; }
/* ID selector */
#hero { background: linear-gradient(to right, #3b82f6, #8b5cf6); }
/* Descendant selector */
nav a { text-decoration: none; }
/* Attribute selector */
input[type="email"] { border-color: blue; }
/* Grouping */
h1, h2, h3 { font-weight: bold; }Properties and values
A CSS rule consists of a selector, properties, and values:
CSS rule structure
selector {
property: value;
property: value;
}
/* Example */
.button {
background-color: #3b82f6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}Specificity
When multiple rules target the same element, specificity decides which wins: inline styles > IDs > classes > elements.
Your turn
Try the CSS commands below:
terminal — browser