Styling with CSS

1. What CSS is

CSS stands for Cascading Style Sheets and is used to control how a web page looks, rather than what the content means. CSS works by applying visual rules to HTML elements so the browser knows how to display themin terms of colour, size, spacing, and layout.

CSS exists because mixing structure and appearance together makes websites hard to maintain, especially as pages grow larger. By separating design from structure, changes to appearance can be made without rewriting HTML, reducing errors and duplicated work.

  1. Look at a webpage you use often.
  2. Identify something that is about appearance rather than meaning.
  3. Explain why that styling should not be part of the HTML.

2. What CSS is used for

CSS is used to control colours, fonts, spacing, and layout across a website. It allows the same design rules to be applied consistently to many pages, instead of repeating instructions in each file.

Without CSS, web pages would display using browser default styles only. This would make most sites hard to read and visually unstructured, especially on different screen sizes.

  1. Find a webpage with strong visual design.
  2. List two things CSS is clearly controlling.
  3. Describe how the page would look without those styles.

3. How CSS differs from HTML

HTML describes the structure and meaning of content, while CSS controls presentation. HTML answers what something is, and CSS answers how it should lookwhen shown to the user.

Changing HTML affects the content or structure of the page. Changing CSS affects appearance only, leaving the underlying content unchanged, which is essential for accessibility.

  1. Identify one HTML element on a page.
  2. Identify one visual property applied to it.
  3. State which part belongs to HTML and which to CSS.

4. Creating a stylesheet

A stylesheet is a text file that contains CSS rules. Stylesheets are saved with the .css file extension so browsers know how to process them.

Keeping CSS in its own file makes projects easier to manage as they grow. One stylesheet can control the design of multiple HTML pages, ensuring consistency across a site.

  1. Create a new file called style.css.
  2. Save it inside a folder named css.
  3. Open the file in Visual Studio Code.
 
body {
}

5. Importing the stylesheet into HTML

HTML does not automatically know about CSS files. The stylesheet must be linked explicitly using a <link> tag in the HTML file.

This link tells the browser where to find the CSS rules. If the link path is wrong, none of the styles will apply, even if the CSS file itself is correct.

  1. Open your index.html file.
  2. Add a <link> tag inside the <head>.
  3. Check that the path matches your folder structure.
 
<head>
  <link rel="stylesheet" href="css/style.css">
</head>

6. What a selector and a rule are

A CSS rule is a complete styling instruction made of a selector and a block of properties. The selector chooses which HTML elements the rule applies to, so CSS can target content without changing the HTML.

Properties describe the visual changes, such as colour or spacing, using property: value;. If a selector does not match anything, or a property is written incorrectly, the browser ignores that partand uses its default styling instead.

  1. Read the CSS example below and identify the selector.
  2. In the same example, identify the two properties and their values.
  3. Explain which HTML elements would be affected by this rule.
 
p {
  color: navy;
  font-size: 18px;
}

7. Creating basic CSS rules

CSS rules use curly braces to contain one or more properties that apply to the selected elements. Each property changes one aspect of appearance, and most properties need a semicolon to end the lineso the browser can separate each instruction correctly.

Simple rules are useful because they confirm your stylesheet is linked and working. Starting with obvious changes makes errors easier to spot, because you can immediately see whether the browser applied the rule.

  1. Add a rule that changes the page background colour.
  2. Add a rule that changes the default text colour.
  3. Save style.css.
 
body {
  background-color: lightgray;
  color: black;
}

8. Applying rules to specific elements

Selectors can target specific element types such as p and h2 using the tag name. This allows different kinds of content to have different styling, which helps the reader see structure without needing extra HTML.

When you style an element selector, every matching element on the page is affected. If you accidentally target the wrong element, changes can appear everywhere and make the page harder to read, so small tests are important.

  1. Add a rule targeting p elements.
  2. Add a rule targeting h2 elements.
  3. Save the file.
 
p {
  line-height: 1.5;
}

h2 {
  color: darkblue;
}

9. Testing CSS in the browser

Browsers apply CSS rules when the page loads, so changes appear after a refresh. If you forget to save your files, refreshing will show no difference, which can look like the CSS is broken even when it is correct.

When styles do not appear, the most common cause is an incorrect href path in the <link>. Another common cause is a syntax error like a missing brace, which can stop later rules from being readdepending on where the mistake occurs.

  1. Open your page in a browser.
  2. Save index.html and style.css, then refresh.
  3. Confirm at least one style change is visible.

10. What breaks when CSS is incorrect

Incorrect CSS usually does not stop a page from loading, but it can cause parts of the design to fall back to defaults. This can make a site look inconsistent and make text harder to read, even though the HTML content is still present.

Small CSS mistakes can be difficult to notice because the browser ignores invalid lines without warning. Learning to check your file paths and braces early prevents bigger problems later, especially when you start writing longer stylesheets.

  1. Remove a semicolon from one of your CSS lines.
  2. Refresh the browser and observe what changes.
  3. Undo the change and confirm the styling returns.