HTML Styles & Colours

HTML decides what each piece of content is. How it looks, its colour, size and spacing, is decided by CSS (Cascading Style Sheets). You will learn CSS properly in its own course, but every HTML author needs to know where CSS goes and how to write a colour.

In this lesson you will use the style attribute, write colours in four common formats, move your styles into a <style> element and then into a separate stylesheet file, and learn why that last step matters.

The style attribute

Every element accepts a style attribute. Its value is one or more CSS declarations. A declaration is a property name, a colon and a value. Separate declarations with semicolons.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Notice board</title>
</head>
<body>
  <h1 style="color: navy; font-family: Georgia, serif;">Kochi Public Library</h1>
  <p style="background-color: lightyellow; padding: 12px; border: 2px solid orange;">
    The library is closed on Monday for Onam. Books due that day can be returned on Tuesday.
  </p>
  <p style="font-size: 14px; color: gray; text-align: right;">Posted by Meera, front desk</p>
</body>
</html>

Change navy to darkgreen and run it again. Then change 14px to 20px. Each declaration controls one thing about one element.

Here are the properties you will use most often while learning HTML:

Notice that CSS uses American spelling: color and center. Writing colour: red is a very common mistake for Indian and British learners, and the browser silently ignores it.

Writing colours

A colour value can be written in several ways. All of them end up as the same thing on screen: an amount of red, green and blue light for each pixel.

Colour names

CSS knows nearly 150 colour names, from red and black to tomato, teal, orange and rebeccapurple. Names are easy to read and great for quick tests, but you cannot get an exact brand colour from them.

Hex codes

A hex code starts with # and has six characters: two for red, two for green and two for blue. Each pair is a number in hexadecimal (base 16), which counts 0 to 9 and then a to f. The smallest pair is 00 (none of that colour) and the largest is ff (255, full strength).

• #ff0000 is full red, no green, no blue.
• #000000 is black and #ffffff is white.
• When each pair repeats, you can use a three-character short form: #f00 is the same as #ff0000.
• An extra pair at the end sets transparency: #ff000080 is red at about half opacity.

Designers usually hand you hex codes, so you will see this format the most.

rgb()

rgb() writes the same three amounts as ordinary numbers from 0 to 255, separated by spaces. Add a slash and a value to set transparency (the alpha value): rgb(255 0 0 / 50%) is red at half opacity.

hsl()

hsl() describes a colour the way people think about it:

• Hue: the position on a colour wheel, from 0 to 360. 0 is red, 120 is green, 240 is blue.
• Saturation: how strong the colour is, from 0% (grey) to 100% (vivid).
• Lightness: from 0% (black) through 50% (normal) to 100% (white).

HSL makes shades easy. Keep the hue, change only the lightness, and you get a lighter or darker version of the same colour.

The example below uses the colours of the Indian flag as they are often given for the web. The saffron stripe is written four different ways, and they all look identical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Colour formats</title>
</head>
<body>
  <p style="background-color: #ff9933; padding: 8px;">Hex: #ff9933</p>
  <p style="background-color: rgb(255 153 51); padding: 8px;">rgb(255 153 51)</p>
  <p style="background-color: hsl(30 100% 60%); padding: 8px;">hsl(30 100% 60%)</p>
  <p style="background-color: hsl(30 100% 85%); padding: 8px;">A lighter saffron: only the lightness changed</p>
  <p style="background-color: #138808; color: white; padding: 8px;">India green: #138808</p>
  <p style="color: navy; border: 2px solid navy; padding: 8px;">The chakra blue is the named colour navy (#000080)</p>
  <p style="background-color: rgb(19 136 8 / 30%); padding: 8px;">Green at 30% opacity</p>
</body>
</html>

Newer colour tools

Modern CSS adds more powerful formats, such as oklch(), which produces evenly bright colour scales, and functions such as color-mix() and light-dark(). They belong to CSS rather than HTML, and you will meet them in CSS Colours.

Choosing readable colours

Colour is not only decoration. Light grey text on a white background may look elegant, but many people cannot read it, especially on a phone in sunlight. Accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text. Browser developer tools show this ratio when you inspect text. Also, never use colour alone to carry meaning, such as "fields in red are compulsory"; add a word or symbol too. See Accessibility Basics.

From style attributes to stylesheets

The style attribute styles one element. Real pages have hundreds of elements, so CSS normally lives in one of two other places.

A <style> element in the <head> holds rules. A rule has a selector, which chooses the elements, and a block of declarations in curly braces.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fee list</title>
  <style>
    body { font-family: Arial, sans-serif; color: #222; }
    h1 { color: hsl(210 70% 30%); }
    .fee { background-color: hsl(210 70% 95%); padding: 8px 12px; border-left: 4px solid hsl(210 70% 40%); }
    .discount { color: #138808; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Pune Coding Club fees</h1>
  <p class="fee">Web basics: ₹1,299 per month</p>
  <p class="fee">Python for beginners: ₹1,499 per month</p>
  <p class="discount">Students from the same family get 10% off.</p>
</body>
</html>

Both fee paragraphs share one rule through the class fee. To change their colour, you edit one line instead of two attributes. You will learn more about classes in Classes & IDs.

The best place is a separate stylesheet file, such as css/style.css, connected with a <link> element in the <head>:

<head>
  <meta charset="utf-8">
  <title>Pune Coding Club</title>
  <link rel="stylesheet" href="css/style.css">
</head>

/* css/style.css: one file shared by every page */
body { font-family: Arial, sans-serif; color: #222; }
h1 { color: hsl(210 70% 30%); }
.fee { background-color: hsl(210 70% 95%); padding: 8px 12px; }

The rel="stylesheet" part says what kind of file it is, and href is the path to the file, written the same way as a link. Paths are explained in File Paths & URLs.

Why CSS belongs in CSS files

• One change, every page. Twenty pages can share one stylesheet. Change the heading colour once and the whole site updates.
• Faster pages. The browser downloads the stylesheet once and keeps it in its cache while the visitor moves from page to page.
• Cleaner HTML. Your markup shows structure only, so it is easier to read and edit.
• Easier overrides. A style attribute beats almost every rule in a stylesheet, so later design changes turn into a fight. You will see why in Cascade, Specificity & Inheritance.
• Security settings. Some sites use a Content Security Policy that blocks inline styles, so style attributes simply stop working there.

The style attribute still has honest uses: quick experiments, values that JavaScript sets while the page runs, and passing one value to the stylesheet through a CSS variable, such as style="--progress: 40%". Start with the CSS Introduction when you are ready for the full picture.

Common mistakes

• British spelling in CSS. colour and centre are ignored. Write color and center.
• Using = instead of :. style="color=red" does nothing. Write style="color: red".
• Forgetting the #. color: ff9933 is invalid; write #ff9933.
• Styling every element with style attributes. Move repeated styles into a stylesheet and use classes.
• Low-contrast text. Pale grey on white looks neat and is hard to read.

Key points

• The style attribute holds CSS declarations, property: value, separated by semicolons.
• Colours can be names, hex codes (#ff9933), rgb(255 153 51) or hsl(30 100% 60%); add / 50% for transparency.
• HSL makes lighter and darker shades easy: change only the lightness.
• A <style> element holds rules for one page; a stylesheet linked with <link rel="stylesheet"> serves the whole site.
• Keep CSS in stylesheet files and give text enough contrast to read.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Today's menu</title>
  <style>
    h1 { color: #800000; }
    .dish { background-color: hsl(55 100% 90%); padding: 8px; border: 1px solid rgb(200 160 0); }
  </style>
</head>
<body>
  <h1>Today's menu at Awadh Dhaba</h1>
  <p class="dish">Galouti kebab, ₹220</p>
  <p class="dish">Dal tadka, ₹140</p>
  <p class="dish">Sheermal, ₹40</p>
</body>
</html>