Learning CSS - Prerequisite Skills & Environment Setup
Before touching CSS, you need to master basic HTML, document structure, and the tools used to write and test stylesheets. In this episode you set up a text editor, browser, live server, and your first project containing index.html and style.css, then verify the styling output in DevTools.
#Introduction
Welcome to the Learning CSS series! This series will take you through mastering CSS — the styling language that shapes how web pages look — from selector fundamentals to modern, responsive, animated, and optimized techniques for production websites. There are 23 episodes in total, organized into four phases.
But before writing your first CSS declaration, there are a few basic skills and software you must have. Why do these prerequisites matter? Because CSS does not stand alone. CSS works on top of HTML — the content structure — and is rendered by the browser. If you don't yet understand how HTML elements are structured, every selector will feel like guesswork.
This Episode 0 is your roadmap: we'll make sure you have the basic skills, set up your tooling, create your first project, and verify that your stylesheet actually loads in the browser. Once this episode is done, the rest of the series can be followed comfortably.
#Basic Skills You Must Master
#Understanding HTML Structure
CSS targets HTML elements, so you should know basic tags like h1, p, a, img, div, and span. Also understand the parent and child concepts, attributes such as class and id, and a valid document with doctype, head, and body.
Example of a minimal HTML document:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Pertamaku</title>
</head>
<body>
<h1>Halo Dunia</h1>
<p>Ini paragraf pertama.</p>
</body>
</html>This is the structure CSS will decorate later on. All the following episodes will write similar markup, so make sure the pattern above already feels familiar.
#Browser and DevTools
The browser is the CSS runtime. Use the latest versions of Google Chrome, Firefox, or Microsoft Edge. All modern browsers come with DevTools, which becomes your laboratory: inspect elements, edit CSS live, and simulate screen sizes.
Open DevTools by pressing F12 or Ctrl+Shift+I. In the Elements panel, you can click any element and see the stylesheet that affects it. The habit of exploring through DevTools will be used in nearly every episode of this series.
#Software You Need to Prepare
#Text Editor
You need a text editor. The main recommendation is Visual Studio Code because it's free, lightweight, and has a great ecosystem of extensions for frontend work. Alternatives: Neovim, Sublime Text, or any IDE you're comfortable with.
For VS Code, install these two extensions: Live Server for preview with automatic reload, and Prettier for consistently formatted code.
node --version
npm --versionNode.js isn't actually required for pure CSS, but it's useful for running modern tooling like bundlers and linters in the later episodes. Verify the versions with the commands above; if they're missing, download them from the official Node.js website.
#Live Server and Browser
With the Live Server extension installed, you just right-click index.html and choose Open with Live Server. The browser will open the page at localhost:8080 and automatically refresh every time a file changes.
As an extension-free alternative, run a static server via Node:
npx serve .A static server matters because some features and conventions only work over the HTTP protocol, not with local files opened directly.
#Setting Up Your First Project
#Folder Structure
Create a project folder with a clean structure from the start:
mkdir belajar-css
cd belajar-css
touch index.html
mkdir css
touch css/style.cssWith this structure, all stylesheets live in the css subfolder. Consistent folder structure will make things easier for you as the project grows in episodes 19 and 20.
#Linking a Stylesheet to HTML
Now fill in index.html and link an external stylesheet:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Judul Halaman</h1>
<p>Paragraf yang siap dihias.</p>
</body>
</html>The link line connects the HTML to css/style.css. Notice the attribute order: rel marks this as a stylesheet, and href holds the path to the CSS file. You'll always use this link rel="stylesheet" pattern on every page.
#Writing Your First CSS
Fill css/style.css with a simple rule:
h1 {
color: #2563eb;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
color: #374151;
}The rules above target the h1 and p elements and change the text color and size. Open index.html in Live Server — the heading is now blue, and the paragraph is easier to read.
#Verifying the Environment
#Making Sure the Stylesheet Loads
Open the page in the browser, press F12, and select the Elements panel. Click the h1 element. On the right side you should see a color property with the value #2563eb coming from css/style.css. If it doesn't show up, check the path in the link tag and make sure the file is in the right folder.
You can also run a quick verification from the terminal:
curl -s http://localhost:8080/css/style.cssIf the server is running, this command returns the contents of the stylesheet. The command curl -s http://localhost:8080/css/style.css shows that the CSS file can be reached over HTTP — confirmation that your project structure is correct.
#Readiness Checklist
Before moving on to episode 1, make sure everything is in place:
- A valid HTML document saved as
index.html. - A modern browser installed and DevTools can be opened.
- Text editor and Live Server extension ready.
- The external stylesheet loads successfully and is proven in DevTools.
- Node.js is verified if you want to use additional tooling.
If anything is missing, stop here and complete it. A solid foundation will make the next 22 episodes feel much lighter.
Info
Keep this project safe. The index.html and css/style.css structure will keep being used as your practice workspace throughout the series, so make it comfortable to develop in.
#Closing
Key takeaways:
- CSS works on top of HTML and is rendered by the browser, so master basic HTML structure.
- DevTools is your primary laboratory for inspecting and testing CSS.
- Use a text editor with Live Server for a fast workflow.
- Keep stylesheets in a separate file and connect them with the
linktag. - Verify that the stylesheet loads through DevTools or
curl. - A tidy folder structure becomes the foundation for maintenance in the later episodes.
In the next episode, episode 1, we'll cover what CSS is and how to include it — the definition and brief history of CSS, three ways to include a stylesheet (inline, internal, and external), plus the order-of-precedence rules that apply. Make sure your environment is ready, because the Learning CSS journey is just beginning!