Back to Unit 6

Unit 6 Website Development - Tutorial 1

1.2 Understand the difference between HTML and CSS

Learn the different jobs HTML and CSS will do in the static website you are building across these tutorials.

The Difference

HTML gives a web page its content and structure. It is used for headings, paragraphs, images, links, lists and sections.

CSS controls how the HTML content looks. It is used for colours, fonts, spacing, layout, borders and backgrounds.

HTML Example

<h1>My Hobby Website</h1>
<p>This page is about the School Coding Club.</p>
<a href="gallery.html">View my gallery</a>

This creates the actual page content.

CSS Example

body {
    font-family: Arial, sans-serif;
    background-color: #f2f6ff;
}

h1 {
    color: #123c8c;
}

This changes the appearance of the content.

Quick Comparison

HTML CSS
Creates structure and content. Controls presentation and layout.
Uses tags such as <h1> and <p>. Uses rules such as h1 { color: blue; }.
Saved in files such as index.html. Saved in files such as style.css.

Success Checklist