Introduction to CSS
Welcome to your journey into modern web design! [CSS] (Cascading Style Sheets) is the structural stylesheet language used to describe the presentation and design of a document written in HTML. While HTML defines the structural anatomy of a page, CSS styles its presentation, including layout, typography, colors, and responsive visual states.
In 2026, modern CSS features like native element nesting and native variables are fully standardized across all web browsers. This lesson guides you through establishing your development workflow, linking CSS rules to your HTML, and using essential selector types to style elements with absolute control.
---
Step-by-Step Software Setup
To build and test styles dynamically, you need a streamlined coding environment. Follow these setup steps:
- Download a Code Editor: Download and install Visual Studio Code (VS Code) from its official web portal.
- Install Live Server Extension: In VS Code, navigate to the Extensions pane on the left menu (shortcut:
Ctrl+Shift+XorCmd+Shift+X), search for "Live Server" by Ritwick Dey, and click Install. This creates a local server environment that refreshes your web browser instantly whenever you save changes. - Create Your Project Directory: Create a folder named
css-beginner-courseon your desktop. Open this folder within VS Code by going to File > Open Folder.
---
Creating Your Files
- Inside your project directory in VS Code, create two files:
index.html(the structural backbone)styles.css(the design definitions)
#### The HTML File Setup (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Styled Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="main-title">Hello World in CSS</h1>
<p class="intro-text">This paragraph is custom-styled using external CSS files.</p>
<button class="action-btn">Click Me</button>
</body>
</html>
#### The CSS File Setup (styles.css)
/* Reset margin styles for clarity */
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
background-color: #f4f6f8;
}
/* Element selector targeting the main heading */
#main-title {
color: #111827;
font-size: 2.5rem;
}
/* Class selector targeting paragraph text */
.intro-text {
color: #4b5563;
line-height: 1.6;
font-size: 1.125rem;
}
/* Interactive button styles */
.action-btn {
background-color: #2563eb;
color: #ffffff;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.2s ease;
/* Native 2026 CSS nesting for hover states */
&:hover {
background-color: #1d4ed8;
}
}
---
Visual Output Demonstration
When you openindex.html with Live Server, you will see a clean, modern web interface. Rather than raw browser-default layout fonts and unstyled text blocks:
- The entire page has custom margin paddings and standard system sans-serif fonts.
- The header displays in a dark shade (#111827).
- The paragraph displays with customized line heights (1.6) for enhanced reading comfort.
- The blue primary CTA button smoothly transitions to a darker blue shade when hovered over by a pointer.
---
Three Ways to Apply CSS
- You can insert CSS styles into your HTML project through three different methods:
- External CSS (Recommended): Using a `
tag within the HTML document's. This isolates structure from design, allowing you to control multiple pages from one stylesheet. - Internal CSS: Defining styles inside
tags directly within the HTML. This is useful for single-page files with unique structural aesthetics. - Inline CSS: Writing styles directly within individual HTML element attributes like
. Avoid this in production as it bypasses stylesheet organization and makes updates difficult.
---
Essential Selector Categories
- To style HTML elements, you must select them in your CSS. Here are the core selectors:
- Element Selectors: Target every instance of an HTML tag (e.g., p
,h1,button). - Class Selectors: Target elements containing a designated class
attribute (e.g.,.intro-text). They are reusable and denoted by a dot.. - ID Selectors: Target a single unique element with an id
attribute (e.g.,#main-title). They are denoted by a hash symbol#and cannot be repeated on the same page.
---
Frequently Asked Questions (FAQs)
#### Q1: Why is an external stylesheet preferred over inline styling?
An external stylesheet separates your structure (HTML) from visual presentation (CSS). This separation makes maintenance efficient, as a single modification to your CSS file instantly updates every page linked to it, keeping codebase sizes small.
#### Q2: What is native CSS nesting?
Introduced and universally supported in modern browsers by 2026, native nesting allows you to nest hover effects, active states, and child element selectors inside parent selector blocks (using the & symbol) directly within your native CSS file, eliminating the need for complex preprocessors like Sass.
#### Q3: What is the Cascade in CSS?
[Cascading]` refers to the structural order of rules applied to HTML elements. When conflicting declarations target the same element, browsers resolve conflicts based on stylesheet order, specificity (IDs override classes, which override element selectors), and inline overrides.
