Style your first page

One idea at a time

CSS stands for Cascading Style Sheets. A stylesheet is a file of presentation rules. Your browser already gives HTML a default appearance. CSS lets you change that appearance while keeping the same headings, paragraphs, and links. You do not need JavaScript to style a page. Keep the HTML from your first page and add a stylesheet beside it so you can see which file owns the content and which owns its appearance.

Read a rule as a small instruction: find these elements, then apply these declarations. In p { color: navy; }, p is the selector. Inside the braces, color is a property and navy is its value. A colon separates property and value; a semicolon ends the declaration. You can put several declarations inside one pair of braces.

What to remember first

Walk through an example

<!-- In head: -->
<link rel="stylesheet" href="styles.css" />
<!-- In body: -->
<h1>Hello, CSS!</h1>
<p>I am learning to style my page.</p>

body {
  background-color: #f0f9ff;
}
h1 {
  color: #1e3a8a;
}
p {
  font-size: 18px;
}

Create styles.css in the same folder as index.html. Put the link inside the existing head, then the heading and paragraph inside body. The CSS file contains only CSS, without style tags. Save both files and open index.html. The page surface becomes pale blue, the heading dark blue, and the paragraph uses the requested size.

See it happen: try a small change

/* No lesson CSS added yet. */

Look a little closer

There are three ways to attach CSS. External CSS uses link and a separate file, which is convenient when several pages share styles. Internal CSS puts rules between <style> and </style> in head. Inline CSS puts declarations in a style attribute on one element. These are different locations for CSS, not three different languages.

Use the external file for this course so the workflow stays consistent. The interactive preview embeds the selected rules for you; it does not create files on your computer. If an edit does not appear locally, confirm the filename in href, save the stylesheet, and refresh the HTML page before changing unrelated code.

Recognize the other two locations

A style element holds a whole rule; a style attribute holds declarations without a selector or braces. These small alternatives demonstrate the same text color. Try one location at a time so conflicting rules do not distract from the result.

<!-- Internal: inside head -->
<style>
  p {
    color: navy;
  }
</style>
<!-- Inline: on one paragraph in body -->
<p style="color: navy">One styled paragraph.</p>

Try it in your own project

Create styles.css beside index.html and add the link shown above to the existing head. Put only the heading and paragraph inside body; the HTML comments mark the two locations. Save the CSS without style tags, then save both files and refresh index.html. Change the heading color first to confirm that the connection works.

The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.

A common wrong turn

A CSS file named styles.css.txt will not match href="styles.css". Also do not paste <style> into the external stylesheet. The browser expects rules there, not HTML tags. Fix the connection before experimenting with more properties.

Go to the source

• MDN: Style your first page ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.