CSS Introduction
Style the web with Cascading Style Sheets — selectors, properties, and layout
What you'll learn
Understand how CSS applies styles via selectors and declarations
Learn the three ways to add CSS: inline, internal, and external
Master fundamental selectors: element, class, ID, and combinators
Use the cascade and specificity to resolve conflicting rules
Apply CSS custom properties (variables) for consistent theming
Understand the box model and how it affects element sizing
CSS (Cascading Style Sheets) controls the presentation of HTML documents. It defines colors, fonts, spacing, layout, and responsive behavior.
How CSS Works
CSS applies styles to HTML elements using selectors and declarations:
/* selector { property: value; } */
h1 {
color: blue;
font-size: 2rem;
}
Three Ways to Add CSS
Inline
<p style="color: red; font-weight: bold;">Red bold text</p>
Internal (in <head>)
<style>
p {
color: red;
}
</style>
External (recommended)
/* styles.css */
p {
color: red;
}
<link rel="stylesheet" href="styles.css" />
Selectors
| Selector | Example | Targets |
|---|---|---|
| Element | p | All <p> elements |
| Class | .card | Elements with class="card" |
| ID | #header | Element with id="header" |
| Descendant | nav a | Links inside <nav> |
| Child | ul > li | Direct children of <ul> |
| Attribute | [type="text"] | Inputs with type "text" |
| Pseudo-class | a:hover | Links on hover |
/* Multiple selectors */
h1,
h2,
h3 {
font-family: sans-serif;
}
/* Descendant combinator */
article p {
line-height: 1.6;
}
/* Pseudo-class for states */
button:hover {
opacity: 0.9;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
The Box Model
Every element is a rectangular box with these layers:
.box {
width: 200px;
padding: 16px; /* Space inside the border */
border: 1px solid black;
margin: 16px; /* Space outside the border */
box-sizing: border-box; /* Width includes padding + border */
}
Colors
/* Named colors */
color: red;
/* Hex */
color: #ff0000;
color: #f00;
/* RGB */
color: rgb(255, 0, 0);
/* HSL */
color: hsl(0, 100%, 50%);
/* With opacity */
color: rgba(255, 0, 0, 0.5);
Typography
body {
font-family: "Inter", system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
Best Practices
- Use class selectors over ID selectors for reusability
- Keep specificity low to avoid override wars
- Use CSS custom properties (variables) for theme values
- Prefer
rem/emoverpxfor responsive design - Use
box-sizing: border-boxglobally - Write comments for complex rules
Next Steps
- Flexbox — Layout with flexbox
- JavaScript Introduction — Add interactivity
Key Takeaways
CSS controls visual presentation through selectors and declaration blocks
External stylesheets (linked CSS files) are the recommended approach for maintainability
The cascade resolves conflicting rules by specificity, source order, and importance
CSS custom properties (variables) enable consistent theming across a project
Every element is a box with content, padding, border, and margin layers
Class selectors strike the best balance between specificity and reusability