CSS Basics | CX Tutorials

1

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a webpage, CSS is the skin, hair, and clothes. It controls how everything looks: colours, fonts, sizes, spacing, and layout.

CSS is written as a series of rules. Each rule says: "find this element, and apply these styles to it."

A CSS rule

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

This rule says: "Find all <h1> elements and make them red, 32px tall."

There are 3 ways to add CSS to an HTML page:

External stylesheet (best): a separate .css file linked with <link>
Internal: inside a <style> tag in the <head>
Inline: directly on an element with the style attribute

2

Selectors

A selector tells CSS which HTML element(s) to style. There are several types:

Types of selector

/* Tag selector: targets ALL <p> elements */
p { color: #333; }

/* Class selector: targets elements with class="highlight" */
.highlight { background: yellow; }

/* ID selector: targets the element with id="title" */
#title { font-size: 40px; }

/* Targeting multiple at once */
h1, h2, h3 { font-family: Georgia, serif; }

Use classes most of the time. IDs can only be used once per page. Classes can be reused on as many elements as you like.

3

Colours & Text

CSS gives you full control over text appearance. Here are the most commonly used properties:

Property	What it does	Example
`color`	Text colour	`color: #333`
`font-size`	Text size	`font-size: 18px`
`font-family`	Typeface	`font-family: Arial`
`font-weight`	Bold / thin	`font-weight: bold`
`text-align`	Alignment	`text-align: center`
`background-color`	Background	`background-color: blue`

Colour formats

color: red;              /* named colour */
color: #FF0000;          /* hex code */
color: rgb(255, 0, 0);   /* RGB values */
color: rgba(255,0,0,0.5);/* RGB with transparency */

Try it: change the styles

4

The Box Model

Every HTML element is a rectangle, known as a box. The CSS box model describes the space around that box:

Content: the actual text or image
Padding: space inside the box, between content and border
Border: a line around the padding
Margin: space outside the box, between this element and others

Box Model

.card {
  width: 300px;
  padding: 20px;          /* all sides */
  border: 2px solid #ccc;
  margin: 16px;
  border-radius: 8px;    /* rounded corners */
  background: white;
}

Use padding to add space inside a box. Use margin to add space between boxes.

5

Classes & IDs

Classes let you style specific elements without affecting all elements of that type. Add a class to any HTML element with the class attribute, then target it in CSS with a dot:

Classes in action

<!-- HTML -->
<p class="intro">This has the intro style.</p>
<p>This is a plain paragraph.</p>
<p class="intro highlight">Two classes!</p>

/* CSS */
.intro { font-size: 18px; font-weight: bold; }
.highlight { background: yellow; }

6

Style Your Page

Let's add CSS to the HTML page you built in the previous tutorial. Paste this into a <style> block inside your <head>:

Try it: a styled full page

Amazing! Your page now has real visual style. Next up: JavaScript, making your pages interactive.