Upon completing this lesson, you will understand what CSS is and how it works with HTML to style web pages. You will be able to write CSS rules using selectors, properties, and values. You will know how to link CSS files to HTML documents and apply styles to HTML elements. You will also understand the basic CSS properties for controlling colors, fonts, spacing, and borders, which form the foundation for all visual styling.
You should be comfortable creating HTML documents with proper structure, using semantic HTML5 elements, and understanding how HTML tags work. This lesson builds on your HTML knowledge by adding visual styling capabilities.
CSS stands for Cascading Style Sheets. CSS is a language designed to describe how HTML elements should be displayed visually. While HTML provides the structure and meaning of web content, CSS controls the presentation - things like colors, fonts, spacing, layout, and visual effects. The separation between HTML structure and CSS presentation is fundamental to web development, allowing you to change the appearance of a website without modifying the underlying HTML content.
The word "cascading" in CSS refers to how multiple style rules can apply to the same element, with some rules taking precedence over others based on specificity and order. This allows you to define general styles that apply broadly, then override them with more specific rules where needed. The cascade also means that styles can be defined in multiple places - in external stylesheets, internal style blocks, or inline within HTML attributes - and CSS has rules for determining which styles take effect when there are conflicts.
CSS works by targeting HTML elements using selectors and then applying visual properties to those elements. A CSS rule consists of a selector that identifies which elements to style, followed by a declaration block containing one or more property-value pairs that describe how those elements should look. The browser reads both the HTML and CSS files, matches the selectors to HTML elements, and applies the specified styles when rendering the page. This process happens separately from the HTML structure, which means you can completely redesign how a page looks by changing only the CSS file, without touching the HTML.
Understanding CSS matters because it transforms plain HTML documents into visually appealing, branded, and user-friendly websites. Every website you visit uses CSS extensively to create its visual design. Learning CSS gives you control over typography, color schemes, spacing, layout, and visual hierarchy - all the elements that make websites engaging and easy to use.
To see the power of CSS in action, look for the 🎨 theme switcher button in the bottom-right corner of this page. Click it to open the theme switcher, then try selecting different themes like "Classic", "Dark Mode", or "Colorful".
What you'll notice:
This demonstrates the core principle of CSS: separation of structure (HTML) and presentation (CSS). The same HTML can look completely different depending on which CSS file is applied. This is why web designers can create multiple design options for the same content, or why websites can offer "dark mode" without changing their HTML structure.
The theme switcher uses JavaScript to dynamically swap CSS stylesheets, but the key lesson is that different CSS files produce dramatically different visual results from the same HTML. Try switching themes while reading this lesson to see how CSS transforms the page!
There are three ways to include CSS with your HTML:
Each method has appropriate uses, though external stylesheets are preferred for most situations because they separate styling from content and allow you to style multiple pages with a single CSS file.
The most common and recommended approach is using an external stylesheet. This involves creating a separate file with a .css extension that contains all your CSS rules.
To connect this file to your HTML document, you add a <link> element in the <head> section of your HTML. The link element requires two attributes:
rel="stylesheet" - Tells the browser this is a stylesheethref - Specifies the path to your CSS fileExample: If your CSS file is named styles.css and is in the same folder as your HTML file:
<link rel="stylesheet" href="styles.css">Benefits of external stylesheets:
Internal style blocks involve placing CSS directly within your HTML file using a <style> element in the head section:
<head>
<style>
p {
color: blue;
}
</style>
</head>This is useful for:
Limitations: Internal styles don't provide the same separation of concerns as external stylesheets, and they can make HTML files harder to maintain when styles grow complex.
Inline styles apply CSS directly to individual HTML elements using the style attribute:
<p style="color: blue;">This paragraph is blue.</p>When to use: While this gives you precise control over specific elements, inline styles are generally discouraged except for special cases because:
For learning and building websites, you'll primarily use external stylesheets. This practice:
CSS follows a specific syntax that consists of selectors, properties, and values. Understanding this syntax is essential for writing effective CSS rules that target the right elements and apply the styles you want.
A CSS rule has three main parts:
color or font-size)blue or 18px)A CSS rule begins with a selector, which identifies which HTML elements the rule will apply to.
The simplest selector is an element selector, which targets elements by their tag name:
p targets all paragraph elementsh1 targets all first-level headingsbody targets the body elementAfter the selector comes a declaration block, which is enclosed in curly braces { }. Inside the declaration block, you write property-value pairs, each ending with a semicolon.
A property is the aspect of styling you want to change (like color or font-size), and the value is what you're setting that property to (like blue or 18px).
Multiple properties can be applied to the same selector by including them within the same declaration block. Each property-value pair typically goes on its own line for readability, though technically they can all be on one line.
Important: The semicolon (;) after each property-value pair tells CSS where one declaration ends and the next begins. The final property in a block can optionally omit the semicolon, but including it consistently helps prevent errors if you add more properties later.
p {
color: blue;
font-size: 16px;
margin-bottom: 20px;
}In this example:
p is the selector targeting all paragraph elementscolor: blue; - Sets text color to bluefont-size: 16px; - Sets font size to 16 pixelsmargin-bottom: 20px; - Creates 20 pixels of space below each paragraphWhen the browser renders any paragraph on the page, it will apply all three of these styles.
CSS property names use kebab-case, meaning words are separated by hyphens. For example:
background-color (not backgroundColor)font-family (not fontFamily)margin-bottom (not marginBottom)Each property accepts specific types of values:
Colors can be specified as:
"blue", "red", "darkgray""#ff0000" (red), "#00ff00" (green), "#000000" (black)rgb(255, 0, 0) (red)Sizes can be specified in:
16px - Fixed size units50% - Relative to parent elementem, rem, and vh in later lessonsCommon CSS properties you'll use include:
color - Text colorbackground-color - Background colorsfont-family - Font choicesfont-size - Text sizemargin - Spacing outside elementspadding - Spacing inside elementsborder - Borders around elementsSeveral CSS properties appear in almost every stylesheet you'll create. Understanding these fundamental properties gives you the building blocks to style any element on a web page.
The color property controls the text color of an element. You can specify colors using predefined names like "red", "blue", or "darkgray", or use more precise color formats like hex codes. Hex codes begin with a hash symbol followed by six characters representing red, green, and blue values. For example, #ff0000 is pure red, #00ff00 is pure green, and #000000 is black. Understanding color allows you to create visual hierarchy and establish the color scheme of your website.
The background-color property sets the background color of an element. This works similarly to the color property but affects the area behind the text rather than the text itself. Using background-color along with color allows you to create contrast and readability. For example, white text on a dark background or dark text on a light background ensures content remains readable.
The font-family property specifies which font should be used for text. You can list multiple font names separated by commas, and the browser will use the first available font. It's common to list a specific font first, then fallback fonts, and finally a generic font family like "sans-serif" or "serif". For example, font-family: Arial, Helvetica, sans-serif; tells the browser to use Arial if available, otherwise Helvetica, and if neither is available, any sans-serif font. This ensures your text displays appropriately even if users don't have specific fonts installed.
The font-size property controls how large text appears. Common units include pixels (px), which provide fixed sizes, and percentages or em units, which provide relative sizes. For beginners, pixels offer the most straightforward control. Typical body text might be 16px, while headings might be 24px or larger. Understanding font-size helps you create visual hierarchy, making important content stand out and improving readability.
The margin property creates space outside an element, separating it from surrounding elements. You can specify margin for all sides at once with a single value, or control each side individually using margin-top, margin-right, margin-bottom, and margin-left. Margins are essential for creating breathing room between elements and establishing the overall spacing rhythm of your page.
The padding property creates space inside an element, between the element's border and its content. Like margin, you can set padding for all sides or individual sides. Padding ensures that text or other content doesn't sit directly against an element's edges, improving readability and visual appeal.
The border property adds a border around an element. You typically specify three things: the border width (like 2px), the border style (like solid, dashed, or dotted), and the border color. For example, border: 2px solid black; creates a two-pixel-wide solid black border. Borders help separate sections, highlight important content, or create visual definition.
Creating a styled web page demonstrates how CSS transforms plain HTML into a visually designed page. We'll style a simple HTML page about a topic, applying colors, fonts, spacing, and other basic CSS properties to create an appealing design.
First, create an HTML file with some basic content. Include a heading, a few paragraphs, and perhaps a link. Save this file with an appropriate name. Then create a new file called styles.css in the same directory. This will be your external stylesheet.
In your HTML file's head section, add a link element to connect your CSS file: <link rel="stylesheet" href="styles.css">. This tells the browser to load and apply the styles from your CSS file when rendering the HTML page.
Now open your CSS file and begin writing styles. Start with the body element, which represents the entire page. Set a font-family to establish the default font for all text. Choose a readable font stack like font-family: Arial, Helvetica, sans-serif;. Set a background-color for the page, perhaps a light gray or off-white, and set a text color that contrasts well, like a dark gray or black.
Next, style your heading. Target the h1 element and set a larger font-size, perhaps 36px or 2.5rem. Choose a color that stands out, perhaps matching a theme color for your site. Add some margin-bottom to create space between the heading and the content that follows. You might also center the heading using text-align: center;.
Style your paragraphs by targeting the p selector. Set an appropriate font-size for readability, typically 16px to 18px. Add some margin-bottom to create space between paragraphs. You might set a maximum width using max-width: 600px; and margin: 0 auto; to center the text and prevent lines from becoming too long, which improves readability.
Style your links by targeting the a selector. Set a color that distinguishes links from regular text, and use text-decoration: underline; to make links recognizable. You can also style links when users hover over them using the a:hover pseudo-class, perhaps changing the color or removing the underline.
/* styles.css */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
font-size: 36px;
color: #2563eb;
text-align: center;
margin-bottom: 30px;
}
p {
font-size: 16px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto 20px;
}
a {
color: #2563eb;
text-decoration: underline;
}
a:hover {
color: #1e40af;
text-decoration: none;
}
After saving both files, open your HTML file in a web browser. You should see your content styled according to the CSS rules you wrote. The page should have a light background, centered and readable text, and styled headings and links. Experiment with changing values in your CSS file, saving, and refreshing the browser to see how different property values affect the appearance.
This process of writing HTML for structure and CSS for presentation demonstrates the separation of concerns that makes web development maintainable. You can completely redesign your page by modifying only the CSS file, without changing any HTML content.
Create an HTML page about a place you'd like to visit, and style it with an external CSS file. Include at least one heading, three paragraphs, and two links. In your CSS file, set different colors for the heading and body text, choose appropriate font sizes, add spacing using margins and padding, and style the links to change appearance when hovered over. Experiment with the background-color of the body and see how different color combinations affect readability and visual appeal.
After you've styled your page, try modifying various property values in your CSS file and observe how the changes affect the appearance. Understanding how each property impacts the visual design helps you develop an intuitive sense for CSS. Pay attention to how colors work together, how spacing affects readability, and how font choices influence the page's feel.
CSS controls the visual presentation of HTML content, working alongside HTML to create styled web pages. CSS rules consist of selectors that target HTML elements and declaration blocks containing property-value pairs that describe how those elements should appear. The most common way to include CSS is through external stylesheets linked in the HTML head section.
The fundamental CSS properties you've learned - color, background-color, font-family, font-size, margin, padding, and border - provide the building blocks for styling any web page. Understanding these properties and how to combine them allows you to create visually appealing, readable websites. Remember that CSS focuses on presentation while HTML focuses on structure, and keeping these concerns separate makes your code more maintainable and flexible.
Now that you understand basic CSS properties, Lesson 04 will explore CSS layout techniques. You'll learn how to control where elements appear on the page, how to create multi-column layouts, and how to position elements precisely using techniques like flexbox and CSS Grid.
Mozilla Developer Network. "CSS: Cascading Style Sheets." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS
Mozilla Developer Network. "CSS Basics." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
W3Schools. "CSS Tutorial." W3Schools. https://www.w3schools.com/css/
The Odin Project. "CSS Foundations." The Odin Project Curriculum. https://www.theodinproject.com/paths/foundations/courses/foundations