Visual Layout with CSS

One-sentence summary

CSS is the language that sets the colours, fonts, alignment and spacing of a page you built with HTML, turning it into something tidy and easy to read.

Why does it matter?

HTML defines the content and structure of a page: headings, paragraphs, lists. But a page built with HTML alone looks plain; everything is black text on a white background.

CSS (Cascading Style Sheets) describes how that content should look. You can display the same HTML page in completely different ways just by changing the CSS. This separation matters: you write the content once and can change its appearance as many times as you like.

An everyday comparison: HTML is the list of things in a room (a table, a chair, a lamp). CSS is the arrangement that sets their colour, position and the space between them. With the same objects you can build very different rooms.

What is CSS and how is it written?

CSS is made of a list of rules. Each rule has two parts: a selector that says which element it affects, and declarations (a property and a value) that say what to do to that element.

The shape of a CSS rule

The rule below makes every paragraph dark grey and a little larger.

p {
  color: #333333;
  font-size: 18px;
}

Here p is the selector. What sits inside the curly braces are the declarations. color and font-size are properties; #333333 and 18px are their values. Each declaration ends with a semicolon.

Example: same content, different look

Suppose we have this HTML:

<h1>Robotics Club</h1>
<p>We meet every Friday.</p>

On their own these two lines look plain. With the CSS below we make the heading blue and the paragraph grey:

h1 {
  color: #1a5fb4;
}
p {
  color: #555555;
}

We changed the appearance completely without touching the content.

Selectors: tag, class and id

To apply a rule only to certain elements, we use three basic types of selector.

Tag selector

If you write a tag name directly, such as p, h1 or ul, every element of that type is affected. The examples above used tag selectors.

Class selector

When you want to style a group of elements the same way, you use a class. You give a class name in the HTML and put a dot before it in the CSS.

<p class="warning">Bring a helmet to the workshop.</p>
<p>A normal paragraph.</p>

.warning {
  color: #b30000;
  font-weight: bold;
}

Only the paragraph with class="warning" becomes red and bold. You can give the same class to as many elements as you like.

id selector

An id is a unique name given to just one element on the page. In CSS you put a hash (#) before it.

<h1 id="main-title">Robotics Club</h1>

#main-title {
  color: #1a5fb4;
}

The rule to remember: the same class can be on many elements, but the same id is used only once per page.

Colour, fonts and alignment

Colour

You can write colours by name (red, blue) or with a hexadecimal (hex) code. A hex code starts with # and has six characters: #1a5fb4. color sets the text colour, while background-color sets the background.

body {
  background-color: #f5f5f5;
  color: #222222;
}

Font and size

font-family sets the typeface and font-size sets its size. It is a good habit to list backup fonts; if the first is missing, the browser tries the next.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

Alignment

text-align places text on the left, in the centre or on the right.

h1 {
  text-align: center;
}

The box model: content, padding, border, margin

The browser treats every HTML element like a box. This box has four layers, and the structure is called the box model.

• content: The inner area holding the text or image.
• padding: The space between the content and the border.
• border: The line around the box.
• margin: The space between the box and other elements.

From the inside out the order is: content → padding → border → margin.

Example: designing a box

.card {
  padding: 16px;
  border: 2px solid #1a5fb4;
  margin: 20px;
  background-color: #ffffff;
}

This rule gives 16 pixels of inner space around the content, a blue border, 20 pixels of space on the outside, and a white background. To keep padding and margin straight, remember: padding is inside the border, margin is outside it.

Ways to add style to a page

You can attach CSS to HTML in three ways. The third is usually best.

1. Inline

You write style directly on the element. It is not recommended except for tiny tests, because content and style get mixed together.

<p style="color: red;">Caution.</p>

2. Internal

You put a <style> tag inside <head>. This is fine for a single-page task.

3. External stylesheet (recommended)

You write the rules in a separate .css file and link it with <link>. This lets you reuse the same style across many pages.

<head>
  <link rel="stylesheet" href="style.css">
</head>

An external file is the tidiest method: the content stays in index.html, the appearance in style.css.

Hands-on mini task

You will colour your own intro card. First create a file called card.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h1 id="name">Robotics Club</h1>
    <p class="sub">We meet every Friday.</p>
  </div>
</body>
</html>

Then write a style.css file in the same folder:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
}
.card {
  background-color: #ffffff;
  border: 2px solid #1a5fb4;
  padding: 20px;
  margin: 30px;
  text-align: center;
}
#name {
  color: #1a5fb4;
}
.sub {
  color: #555555;
}

Your tasks:

1. Change the padding inside .card to 40px and watch what happens.
2. Change the #name colour to a colour you like.
3. Add font-size: 20px; to the .sub paragraph.

Common mistakes

Forgetting the semicolon

Every declaration must end with ;. If you forget it, the next rule often stops working.

/* Wrong */
color: red
font-size: 18px;

Mixing up the class and id marks

In HTML you write class="card", but in CSS you use .card (a dot). For an id, HTML uses id="name" and CSS uses #name (a hash).

Confusing padding with margin

Padding is the space inside the border, margin is the space outside it. If two elements sit too close together, the fix is usually to add margin.

Forgetting to link the CSS file

If an external .css file does not work, first check the <link> tag and that the file name is spelled correctly.

Safety note

CSS only changes appearance; it does not collect any personal data. Even so, when you build a page, do not put personal details like your address, phone number, school name or full name on pages that will be published. Use made-up names such as "Robotics Club" in your practice. Remember that anyone can see a page shared on the internet, so checking it with an adult is a good habit.

Lesson summary

• CSS is the style language that sets the colour, font, alignment and spacing of HTML content.
• Every CSS rule has a selector and declarations; each declaration ends with a semicolon.
• Tag (p), class (.name) and id (#name) are the three basic selector types.
• The box model runs from the inside out through content, padding, border and margin.
• The tidiest way to add style is an external .css file linked with <link>.

Check questions

1. What is the job of CSS and how is it different from HTML?
2. Which elements does the .warning selector affect? And #warning?
3. In the box model, what is the difference between padding and margin?
4. What do the color and background-color properties change?
5. Which tag do we use to link an external CSS file to HTML?

Answers

1. CSS sets a page's appearance (colour, font, spacing, alignment), while HTML defines the content and structure. Content is written once, and the look is changed with CSS.
2. .warning affects every element with class="warning". #warning affects the single element with id="warning"; the same id is used only once per page.
3. Padding is the inner space between the content and the border. Margin is the outer space between the border and neighbouring elements.
4. color changes the text colour, while background-color changes the background colour.
5. It is linked with <link rel="stylesheet" href="style.css"> placed inside <head>.

Source and verification note

For “Visual Layout with CSS”, verification focuses on whether the relationship between What is CSS and how is it written? and Example: same content, different look remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.

Next lesson

Responsive Design: You will learn how to make your page flexible so it looks right on phones, tablets and computers.