Understand the distinct roles of HTML for content structure and CSS for visual presentation, and learn how they work together to create web pages.
What it is
HTML (HyperText Markup Language) defines the structure and meaning of content. It tells the browser what elements exist on a page, such as headings, paragraphs, lists, and images. Think of HTML as the skeleton or blueprint of a building.
CSS (Cascading Style Sheets) controls the presentation and layout. It dictates how those HTML elements look, including colors, fonts, spacing, and positioning. Think of CSS as the paint, furniture, and interior design applied to that skeleton.
Related terms include selectors (how CSS targets HTML), properties (what aspect is being changed), and values (the specific setting).
Why it matters
- Maintainability: Changing the look of an entire site requires editing only one CSS file, not every HTML page.
- Accessibility: Proper HTML structure ensures screen readers can interpret content correctly, regardless of visual styling.
- Responsiveness: CSS allows layouts to adapt to different screen sizes without changing the underlying HTML content.
- Separation of Concerns: Developers can focus on logic/structure in HTML while designers handle visuals in CSS independently.
Syntax or steps
HTML uses tags enclosed in angle brackets, often paired with closing tags. CSS uses selectors followed by declaration blocks containing property-value pairs.
- Create an HTML element with a semantic tag (e.g.,
<h1>). - Add a class or ID attribute if you need to target it specifically.
- In your CSS file, write a selector matching that element or class.
- Define styles inside curly braces using
property: value;.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Section */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- HTML Section -->
<h1>Welcome to My Site</h1>
<p>This is a normal paragraph.</p>
<p>This text is <span class="highlight">important</span>.</p>
</body>
</html>Explanation: The <h1> and <p> tags define the content hierarchy. The <style> block contains CSS rules. The body selector applies global font and background settings. The .highlight selector targets any element with the class "highlight," turning its text red and bold. The <span> tag groups inline text so CSS can style just that word.
Common mistakes
- Using HTML for layout: Avoid using
<br>for spacing or tables for page structure. Use CSS margins and flexbox/grid instead. - Inline styles everywhere: Writing
style="color:red"directly in HTML makes updates difficult. Use classes and external CSS files. - Non-semantic tags: Using
<div>for everything loses meaning. Use<header>,<nav>, or<article>where appropriate. - Forgetting specificity: If CSS isn't applying, check if another rule has higher specificity or if the selector matches the HTML correctly.
When to use it
| Task | Use HTML | Use CSS |
|---|---|---|
| Adding text content | Yes (<p>) | No |
| Changing text color | No | Yes (color) |
| Defining a list | Yes (<ul>) | No |
| Aligning items side-by-side | No | Yes (flex/grid) |
Practice
Guided Exercise: Create an HTML page with a heading and two paragraphs. Add a CSS rule to make all paragraphs blue and italicized.
Challenge: Add a class called urgent to one paragraph. Write CSS so that .urgent overrides the general paragraph style to be red and bold.
Hint: Ensure your CSS selector for .urgent comes after the general p selector, or has higher specificity.
Quick check
Question: Can you change the font size of an element using only HTML?
Answer: No. While older HTML had deprecated attributes like size, modern standards require CSS properties like font-size for presentation changes.
Summary
HTML provides the necessary structure and semantics for web content, ensuring accessibility and logical organization. CSS handles all visual aspects, allowing for flexible, maintainable, and responsive designs. Keeping these layers separate is fundamental to professional web development.