CSS Tutorial / What CSS Does and How It Differs from HTML

CSS (Cascading Style Sheets) controls the appearance and layout of an HTML document, including colors, fonts, spacing, and element placement. HTML describes the content and its structure; CSS determines how that structure is presented.

How HTML and CSS divide responsibilities

Imagine you are creating a garden information page. The fact that “Small Garden” is the most important title on the page is represented by h1 in HTML. CSS determines whether the title is displayed in green and what the font size is. Just because the color is green doesn't mean a regular paragraph has the meaning of a title.

JavaScript is a programming language that adds behavior to web pages. CSS can also change the shape or show animation when the mouse is hovered over, so changing the screen does not necessarily mean JavaScript has been used. Here we first focus on separating content and appearance.

Why a page has styles before you write CSS

Browsers have default styles. This is why titles appear large, there is space between paragraphs, and links appear underlined without having to write CSS directly. Default fonts and margins may vary depending on browser and user settings. By adding CSS, you can customize the look you need.

Paste the following HTML into a text editor, save it as index.html in UTF-8 format, and open it in your browser. Make sure the file name is not index.html.txt. If the file extension is hidden, check the extension in the editor's save format and file properties.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

This fragment is an example of the structure of the text. If you want to get started right away, use the full example below. If you read the title and guide text first, it is easy to distinguish whether the actual content or only the appearance has changed when changing CSS.

Read selectors, properties, and values

h1 {
  color: #087f5b;
}

h1 is the selector, color is the property, and #087f5b is its value. A property and value joined by a colon form a declaration, such as color: #087f5b;. The six-digit hexadecimal color represents red, green, and blue components. For further detail, see CSS Syntax: Selectors, Declarations, Comments, and Errors.

This rule changes the text color of the h1 element in HTML to green. It does not translate sentences or add paragraphs. To distinguish and decorate only the guidance text, add class="notice" to HTML and select .notice from CSS. The dot is a class selector notation in CSS and is not included in the class name in HTML.

An explanation that CSS is responsible for the expression of web documents can also be found in MDN's Introduction to CSS.

Run the complete Small Garden example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

When you open the saved file, you will see a green title on a light background, and the operating hours information will have a border and space. The content inside the style element is CSS. The following table provides a minimum description for reading the properties used in the examples.

You do not need to memorize every property at this stage. First identify which element the selector matches and which aspect of that element each declaration changes. An external stylesheet lets you reuse the same design across the two pages of this example. For further detail, see Apply CSS with Inline, Internal, and External Styles.

Change three values and compare the results

1. Replace color in h1 with #1d4ed8. If you save and reload, only the large title will be blue. The colors of the h2 and general paragraphs of the visitor guide are not subject to this rule.
2. Change line-height of body from 1.7 to 2. The body line height will be larger. You can more easily see the differences by inserting a paragraph with more than two lines or narrowing the window.
3. Replace background-color in .notice with #fff4cc. Only the background of the operating hours information turns yellow. The entire page background is specified separately in the body, so it remains the same.

Instead of changing all three values at once, save and check each time you modify one item. If the results are different, check whether the changed file and the file opened in the browser are the same and whether the braces and colons remain. When you're done with the exercise, reset the three values to their original state, refresh, and compare to the original screen. During this process, the key is to maintain the HTML title, paragraph, and link structure.