Published by Patrick Mutisya · 14 days ago
Be able to create external styles to be tagged in a web page including h1, h2, h3, p and li.
An external stylesheet is a separate file (normally with a .css extension) that contains all the style rules for one or more web pages. Keeping the CSS in its own file makes the site easier to maintain, reduces page size, and allows the same style to be applied to many pages.
To apply an external stylesheet to an HTML document, place a <link> element inside the <head> section of the page.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
…
</body>
</html>
The following table shows the simplest selectors that target the required HTML elements.
| Selector | HTML element(s) affected | Typical use |
|---|---|---|
h1 | All <h1> headings | Main page title – larger font, bold, centred |
h2 | All <h2> headings | Section headings – slightly smaller than h1 |
h3 | All <h3> headings | Sub‑section headings – smaller than h2 |
p | All paragraph elements (<p>) | Body text – line‑height, margin, font‑size |
li | All list items (<li>) | Bullet or numbered list styling |
Save the following code in a file called styles.css. The rules illustrate how each selector can be used.
/* styles.css *//* 1. Main page title */
h1 {
font-family: Arial, sans-serif;
font-size: 2.5rem;
color: #003366;
text-align: center;
margin-top: 0;
}
/* 2. Section headings */
h2 {
font-family: Verdana, sans-serif;
font-size: 2rem;
color: #006699;
margin-bottom: 0.5rem;
}
/* 3. Sub‑section headings */
h3 {
font-family: Georgia, serif;
font-size: 1.5rem;
color: #0099CC;
margin-top: 1rem;
}
/* 4. Paragraph text */
p {
font-family: "Times New Roman", Times, serif;
font-size: 1rem;
line-height: 1.5;
color: #333333;
margin-bottom: 1rem;
}
/* 5. List items */
li {
font-family: Helvetica, sans-serif;
font-size: 0.95rem;
color: #444444;
margin-left: 1.5rem;
}
website on your computer.index.html and styles.css.<link> example from the “Linking an external stylesheet” section into the index.html file.<h1>, two <h2>, one <h3>, two paragraphs, and an ordered list with three items.styles.css and save both files.index.html in a web browser. Observe how the external stylesheet controls the appearance of each element.styles.css and refresh the browser to see the effect.<link> element in the head, the separate styles.css file, and the rendered page.