Create your first CSS stylesheet

What you need and why there is no CSS installer

You need a plain-text editor, a browser and a folder you can save files in. VS Code is one option, but any editor that saves plain-text files will work. Browsers already understand CSS; you do not install the CSS language or run a compiler for this first page. Some larger projects use build tools, but they are optional here.

Create a folder called first-css-page. Inside it, create two files named index.html and styles.css. The .html file holds the page structure; the .css file holds presentation rules. Check the extensions carefully: styles.css.txt is a text file with the wrong name. Both files must be saved in the same folder for the relative path in this example to work.

Write the HTML and link the stylesheet

Copy the complete index.html below. Its head contains a link element with rel="stylesheet", which tells the browser that the linked file contains CSS. The href="styles.css" value is a relative path: it means “look for styles.css alongside this HTML file”. The body contains a heading and paragraph for the CSS to style.

Copy the styles.css file below into the same folder. The body rule sets a readable font, outer margin and text colour. The h1 rule sets the heading colour and size. In the h1 rule, color: #1d4ed8; is a declaration: color is the property and #1d4ed8 is its value. The browser matches h1 to the heading and applies that declaration.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first styled page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Welcome to my page</h1>
    <p>CSS gives this page its colours and spacing.</p>
  </main>
</body>
</html>

styles.css

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  color: #1f2937;
}

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

• Understand the HTML document
• Read each part of a CSS rule

Open the page and make a change

Save both files, then open index.html in your browser, for example by double-clicking it or dragging it into a browser window. You should see a blue heading, dark paragraph text and space around the page. This small project can be opened directly from disk; it does not require a web server.

Change the heading colour in styles.css, save that file, then refresh the browser tab. Refreshing reloads the HTML and stylesheet from disk. If the heading stays the same, first confirm the CSS file was saved and that the browser is showing the index.html from the same folder. The interactive CSS example below uses a sample card rather than this local heading, so you can practise the same property without creating files.

When the CSS does not apply

Check the filename and the link path character by character. If the stylesheet is in a subfolder named css, change the HTML to href="css/styles.css"; leaving href="styles.css" would point to the wrong location. Paths in href are relative to the HTML document URL, not to the location of your editor or terminal. A leading slash points to the site root rather than to the current folder, so avoid it for this simple local example.

Make sure the link is inside head, the CSS has braces around declarations, and property names and values are separated by a colon. A misspelled property or invalid value may be ignored while other valid declarations still work. If a rule seems correct but has no effect, confirm its selector matches an element and check whether another rule overrides it. Browser developer tools can show loaded stylesheets, matched rules and declarations that were crossed out.

• Other ways to add CSS
• Basic Selectors
• Specificity

Keep practising

Add a class to the paragraph and style it with a class selector; then explore the Box Model to understand why margin and padding create different kinds of space. As projects grow, one external stylesheet can be linked from several HTML pages, allowing shared rules to stay consistent.

• The Box Model
• Color Values
• Return to the CSS introduction

Syntax

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

Examples

.card h2 {
  color: #1d4ed8;
  font-size: 32px;
}

<article class="card"><h2>My first styled heading</h2><p>This paragraph keeps its normal size while the heading changes.</p></article>

Best practices

• Keep index.html and styles.css together until you are comfortable with relative paths.
• Save both files before refreshing the browser and check the browser developer tools when a rule seems absent.
• Use an external stylesheet when several pages should share styles.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Related CSS documentation

Specifications & further reading

• MDN: Getting started with CSS
• MDN: What is CSS?