CSS Tutorial / Apply CSS with Inline, Internal, and External Styles

You can apply CSS through an element's style attribute, a style element in the HTML document, or a linked external stylesheet. External stylesheets are usually easier to maintain across several pages, while the other methods suit smaller, specific uses.

Compare the three ways to apply CSS

All three methods apply CSS. Ordinary internal and external rules compete according to the cascade, including their selectors and source order; an external file is not inherently weaker. Inline declarations usually take precedence over normal author stylesheet declarations, but conditions such as !important change that comparison. For further detail, see CSS Inheritance, Specificity, and the Cascade.

Write inline and internal styles

In inline styles, you write the declaration inside the style property of the element you want to decorate. No selectors or outer braces are included. The following code specifies the color and background for just one guide text.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

In the internal style sheet, rules including selectors and braces are written in the style element within head. Multiple sentences with the same class can be decorated with one rule. In the example below, the HTML class value is notice and the CSS selector is .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Both examples are HTML snippets to compare where they are written. When changing methods in this exercise, remove any declarations of the same properties you put in with the previous method. Leaving multiple methods at the same time makes it difficult to distinguish between connection failures and rule conflicts.

Link an external stylesheet

Create an empty garden folder and save the following three files: The CSS file contains only CSS and does not include the <style> tag. Both HTML files link to style.css in the same folder.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" means that the connected file is a style sheet, and href="style.css" is the location of the file to read. In HTML5 documents, there is no need to separately write type="text/css" in regular CSS connections. This exercise, which opens local files directly, requires no server or additional libraries.

When you open index.html in your browser, you will see a green title and a light information box. Click “View visitor information” to go to visit.html, and although the content is different, the title color and shape of the information box are the same. If you change the title color of style.css to #1d4ed8 and then reload both pages, both titles will turn blue. This is the advantage of using common files.

Choose a path for the folder structure

The path below is read based on the location of the HTML document. As in the example, the premise is a regular document whose base URL has not been replaced with the base element. If you move the CSS file, you must change not only the file name but also href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

For the last folder arrangement, write <link rel="stylesheet" href="../css/style.css"> in pages/index.html. The ../ segment goes up one directory. Web paths use forward slashes. A leading slash, as in /css/style.css, resolves from the site root and has a different meaning from this local-file relative path. See MDN: Getting started.

Diagnose loading, matching, and cascade problems

1. First, check the file connection. Check that the extension is not saved as .css.txt and that the href and actual folder placement match. The distribution server also matches the case of file names. If the page is opened on a web server, you can check the CSS request and response in Network in Developer Tools. Local files may not display the same HTTP status code.
2. Verifies that the target element is correct. is class="notice" in HTML, but if .notcie is written in CSS, the notice will not change even if the file is read normally. In Developer Tools, see the actual class name under Elements and find the convention under Styles.
3. Check whether the rule has been overwritten. If a different color declaration later wins, the original declaration may appear strikethrough in Styles. Please check the final application rules separately from problems with missing CSS files.

To check whether the stylesheet loads, temporarily add body { background-color: #fff4cc; } at its end and refresh. A yellow page confirms that the file is connected. Then inspect whether the notice selector matches and whether another declaration wins. Remove the temporary rule afterward. !important cannot repair a missing file or a misspelled selector. For further detail, see Inspect CSS with DevTools: Styles and Computed.