Styling with CSS

About 35 minutes · read, practise, then check your understanding

HTML says what things are; CSS decides how they look. Readable, well-spaced pages keep visitors, and employers notice careful styling in a portfolio.

You will learn

How a CSS rule is written
How to choose elements with selectors
How to set colour, font size and spacing
Where to put CSS in your page

Before you start

Lesson: Links, images and lists

The idea, simply

CSS (Cascading Style Sheets) is a list of rules. Each rule picks some elements with a selector, then sets properties on them.

h1 {
  color: darkgreen;
  font-size: 32px;
}

Selector (h1), then properties and values inside curly braces. Each line ends with a semicolon.

There are three selectors you will use most. An element selector (p) picks every paragraph. A class selector (.note) picks every element with class="note". An id selector (#main) picks the one element with id="main".

<p class="note">Exams start on Monday.</p>

<style>
  .note {
    background: lightyellow;
    padding: 12px;
  }
</style>

A class lets you style some paragraphs differently from others

color: text colour. background: background colour.
font-size: text size, for example 18px.
padding: space inside an element, between its content and its edge.
margin: space outside an element, between it and its neighbours.
max-width: stops text lines from getting too long to read comfortably.

For now, put your CSS inside a <style> tag in the <head>. Later you will move it into a separate .css file and link it, which is what real projects do.

See it in action

<style>
  body {
    font-family: sans-serif;
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
    line-height: 1.6;
  }
  h1 {
    color: #0f5132;
  }
  .tip {
    background: #e8f5e9;
    padding: 12px;
    border-left: 4px solid #2e7d32;
  }
</style>

<h1>Study plan</h1>
<p>Study 30 minutes every day, even on busy days.</p>
<p class="tip">Tip: finish one small task before stopping.</p>

A readable page in five rules: centred column, comfortable line height, one highlighted tip

Common mistakes

Forgetting the dot before a class name in CSS.: class="tip" in HTML becomes .tip in CSS.
Using many bright colours.: Pick one main colour and one accent. Consistency looks professional.
Testing only on a laptop.: Most visitors in India browse on phones. Check the narrow preview every time.

Key takeaways

A CSS rule is: selector { property: value; }
Element, .class and #id are the three main selectors.
Padding is inside, margin is outside; max-width and line-height make text readable.