Basic CSS

The foundation of web styling - where every brilliant design begins

CSS Selectors

Selectors are the backbone of CSS - they let you target HTML elements with surgical precision. From simple element selectors to complex pseudo-selectors, mastering these is essential.

Element Selectors

This paragraph is styled with an element selector

This span has different styling

/* Target all paragraphs */
p {
    color: var(--colour-primary);
    font-weight: 500;
}

/* Target all spans */
span {
    color: var(--colour-accent);
    font-style: italic;
}

Class Selectors

Classes add reusable styles

Multiple classes? No problem!

Different class, different style

/* Single class */
.highlight {
    background: var(--colour-warning-light);
    padding: 0.5rem;
    border-radius: 0.25rem;
}

/* Multiple classes */
.highlight.important {
    border-left: 4px solid var(--colour-error);
    font-weight: bold;
}

.subtle {
    opacity: 0.7;
    font-size: 0.875rem;
}

ID Selectors

IDs are unique - use sparingly!

Prefer classes for reusability

/* ID selector - high specificity */
#unique-element {
    background: linear-gradient(
        45deg, 
        var(--colour-primary), 
        var(--colour-secondary)
    );
    color: white;
    padding: 1rem;
    text-align: center;
}

Attribute Selectors

External link Internal link

/* Target by attribute */
input[type="email"] {
    border-color: var(--colour-primary);
}

/* Target external links */
a[target="_blank"] {
    padding-right: 1.25rem;
    position: relative;
}

a[target="_blank"]::after {
    content: "↗";
    position: absolute;
    right: 0;
}

Pseudo-class Selectors

First item (special styling)
Regular item
Regular item
Last item (special styling)

/* Interactive states */
button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Structural pseudo-classes */
li:first-child {
    color: var(--colour-primary);
    font-weight: bold;
}

li:last-child {
    color: var(--colour-secondary);
}

Combinators

Direct child paragraph

Nested paragraph (descendant)

Another direct child

Adjacent sibling

/* Direct child */
.parent-demo > p {
    border-left: 3px solid var(--colour-primary);
    padding-left: 1rem;
}

/* Descendant */
.parent-demo p {
    margin: 0.5rem 0;
}

/* Adjacent sibling */
p + span {
    color: var(--colour-accent);
    font-weight: bold;
}

Essential CSS Properties

CSS properties are the tools that bring your designs to life. Here are the fundamental properties every developer should master.

Colour Properties

Hex colour: #2563eb

RGB: rgb(37, 99, 235)

HSL: hsl(217, 91%, 60%)

Gradient background

/* Different colour formats */
.element {
    /* Hexadecimal */
    color: #2563eb;
    
    /* RGB with alpha */
    background-color: rgba(37, 99, 235, 0.1);
    
    /* HSL - great for variations */
    border-color: hsl(217, 91%, 60%);
    
    /* CSS Variables */
    box-shadow: 0 4px 6px var(--colour-primary);
}

Typography Properties

Bold and Large

Italic with letter spacing

Uppercase text

This paragraph has increased line height for better readability. Notice how the text breathes with proper spacing.

/* Typography styling */
.heading {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.body-text {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
    text-indent: 2rem;
}

.accent-text {
    font-style: italic;
    text-transform: uppercase;
    text-decoration: underline;
}

Display Properties

Block element (full width) Inline elements flow Inline-block combines both Hidden element

/* Display values */
.display-block {
    display: block;
    background: var(--colour-surface);
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.display-inline {
    display: inline;
    background: var(--colour-primary-light);
    padding: 0.25rem;
}

.display-inline-block {
    display: inline-block;
    background: var(--colour-secondary-light);
    padding: 0.5rem;
    margin: 0.5rem;
}

.display-none {
    display: none; /* Completely hidden */
}

The Cascade & Specificity

Understanding how CSS rules cascade and which styles take precedence is crucial for writing maintainable stylesheets. It's like a pecking order for your styles!

Specificity Calculator

Which colour wins? (Hint: it's green!)

/* Specificity: 0-0-1 (1 element) */
p { color: blue; }

/* Specificity: 0-1-0 (1 class) */
.text { color: red; }

/* Specificity: 1-0-0 (1 ID) */
#specific { color: purple; }

/* Specificity: 1-1-1 (1 ID + 1 class + 1 element) */
p#specific.text { color: orange; }

/* Inline styles: 1-0-0-0 (highest specificity) */
style="color: green;"

/* Calculation: ID=100, Class=10, Element=1 */

Inheritance

Parent element

Child inherits colour and font-size

But can override inherited styles

/* Some properties inherit */
.parent {
    color: var(--colour-primary);
    font-size: 1.1rem;
    font-family: var(--font-sans);
}

/* Children automatically inherit */
.parent p {
    /* Inherits color and font */
}

/* Properties that DON'T inherit:
   - margin, padding
   - border
   - background
   - display
   - position */

!important (Use Sparingly!)

This text is red, despite other rules

/* Normal rule */
.important-demo {
    color: blue;
}

/* Higher specificity */
p.important-demo.override-attempt {
    color: green;
}

/* !important wins (but avoid this!) */
.important-demo {
    color: red !important;
}

/* Better approach: use specificity */
/* or restructure your CSS */

CSS Units

Choosing the right unit is like picking the right tool for the job. From pixels to percentages, each has its perfect use case.

Absolute Units

200px wide

15rem wide

2in wide

/* Absolute units */
.pixel-box {
    width: 200px;  /* Fixed pixels */
    height: 100px;
}

.rem-box {
    width: 15rem;  /* Relative to root font-size */
    padding: 1rem;
}

/* Other absolute units:
   cm, mm, in, pt, pc
   (rarely used in web) */

Relative Units

100% of parent

50% of parent

1.5em font, 1em padding

/* Relative units */
.percentage {
    width: 100%;     /* Of parent */
    max-width: 1200px;
}

.em-sizing {
    font-size: 1.5em;  /* 1.5x parent font */
    padding: 1em;      /* Relative to element font */
}

.viewport-units {
    width: 80vw;   /* 80% viewport width */
    height: 50vh;  /* 50% viewport height */
    
    /* New viewport units */
    height: 100dvh; /* Dynamic viewport */
}

Modern Units

min(100%, 400px)

clamp(200px, 50%, 400px)

20ch wide (character units)

/* Modern CSS units & functions */
.responsive-box {
    /* Minimum of two values */
    width: min(100%, 600px);
    
    /* Maximum of two values */
    height: max(300px, 50vh);
    
    /* Clamp between min and max */
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.text-measure {
    /* ch = width of '0' character */
    max-width: 65ch; /* Optimal reading */
}

Pro Tips

💡

Start with a Reset

Use a CSS reset or normalise stylesheet to ensure consistent styling across browsers.

🎯

Specificity Over !important

Instead of reaching for !important, understand and use specificity properly.

📏

REM for Consistency

Use REM units for sizes to respect user's font preferences and ensure scalability.

🎨

CSS Variables FTW

Define your colours and sizes as CSS variables for easy theming and maintenance.

Ready for More?

You've mastered the basics! Time to explore how these fundamentals come together in more complex scenarios.

📦

Box Model

Understand spacing, borders, and element dimensions

🔤

Typography

Create beautiful, readable text designs