// web development

What Is CSS?

CSS is the language used to control the appearance and layout of web pages. HTML describes the structure of the content, while CSS determines how that content should look.

// definition

CSS means Cascading Style Sheets

CSS stands for Cascading Style Sheets.

It is a stylesheet language used to describe the presentation of HTML and other structured documents.

CSS can control colours, fonts, spacing, borders, positioning, page layout, animations and how a website adapts to different screen sizes.

// example

What does CSS look like?

Suppose a web page contains this HTML:

<h1>Freelance Coder</h1>

We could style that heading using CSS:

h1 { color: blue; font-size: 40px; text-align: center; }

The HTML identifies the content as a heading. The CSS controls how that heading is displayed.

// css rule

CSS is written as rules

p { color: #20262d; font-size: 18px; }

A CSS rule contains a selector and one or more declarations.

Selector

Identifies which HTML elements should receive the styling.

Declaration

Specifies the property that should change and the value it should receive.

// property + value

Properties and values control the design

color: blue;

In this declaration:

Part	Meaning
color	The CSS property
blue	The value assigned to the property

A colon separates the property from the value, and declarations normally end with a semicolon.

// selectors

CSS selectors choose what to style

CSS provides several ways to target HTML elements.

/* Every paragraph */ p { color: black; } /* Elements with class="button" */ .button { background: blue; } /* Element with id="header" */ #header { padding: 20px; }

Element Selector Class Selector ID Selector Attribute Selector Pseudo-class

// classes

Classes make styles reusable

An HTML element can be given a class:

<a class="button">Contact Me</a>

CSS can then target that class:

.button { background: #001eff; color: white; padding: 10px 18px; border-radius: 6px; }

The same class can be applied to multiple elements, allowing the styling to be reused.

// colours

CSS controls colour

Colours can be represented in several ways.

color: blue; color: #001eff; color: rgb(0, 30, 255); color: rgba(0, 30, 255, 0.5);

Your Freelance Coder site, for example, uses:

Normal link: #001eff Hover: #00d719 Visited link: #5b3fd6

// typography

CSS controls text appearance

p { font-family: Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.7; }

CSS can control the typeface, size, weight, spacing and alignment of text.

// box model

HTML elements are treated like boxes

One of the most important CSS concepts is the box model.

An element can have:

Content

The text, image or other content inside the element.

Padding

Space between the content and the border.

Border

A line surrounding the element and its padding.

Margin

Space outside the element separating it from surrounding elements.

.card { padding: 20px; border: 1px solid #e3e8ee; margin: 20px; }

// dimensions

CSS controls dimensions

.container { width: 100%; max-width: 720px; min-height: 300px; }

Widths and heights can be expressed using pixels, percentages, viewport units and other CSS units.

// flexbox

CSS can arrange elements with Flexbox

.container { display: flex; gap: 20px; align-items: center; justify-content: space-between; }

Flexbox is useful for arranging elements along a row or column and controlling their alignment and spacing.

// grid

CSS Grid can create page layouts

.services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

This creates two equal-width columns.

CSS Grid is particularly useful for layouts involving rows and columns.

// responsive design

CSS can adapt a website to different screens

Media queries allow styles to change depending on properties such as the width of the screen.

@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }

A two-column desktop layout could therefore become a single-column layout on a phone.

// interaction

CSS can respond to user interaction

Pseudo-classes such as :hover can apply styles when a user interacts with an element.

a { color: #001eff; } a:hover { color: #00d719; }

This is the same basic idea behind the green hover effects used throughout Freelance Coder.

// transitions

CSS can create smooth transitions

a { color: #001eff; transition: color 0.25s ease; } a:hover { color: #00d719; }

Instead of the colour changing instantly, the browser transitions smoothly between the two colours.

// animation

CSS can also create animations

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .card { animation: fadeIn 0.6s ease; }

CSS animations can change properties over time without requiring JavaScript for every visual effect.

// cascade

Why is it called "Cascading" Style Sheets?

More than one CSS rule can potentially apply to the same element.

The browser must therefore determine which declaration wins.

The result depends on factors including:

Origin Importance Specificity Scope Source Order

The cascade is a core part of CSS. It provides a defined system for resolving competing style declarations.

// inheritance

Some CSS properties are inherited

Certain properties can pass from a parent element to its descendants.

body { color: #20262d; font-family: Arial, sans-serif; }

Text inside many child elements may inherit these properties automatically unless another rule overrides them.

// adding css

CSS can be added in several ways

Method	Example
External stylesheet	styles.css
Internal stylesheet	<style> ... </style>
Inline style	style="color: blue;"

Larger websites usually benefit from reusable stylesheets rather than repeating styles directly inside individual HTML elements.

// external stylesheet

CSS can live in its own file

A stylesheet might be saved as:

styles.css

HTML can then load it using:

<link rel="stylesheet" href="styles.css" >

This separation allows one stylesheet to control the appearance of many pages.

// html + css + javascript

HTML, CSS and JavaScript have different roles

HTML

Defines the structure and meaning of the content.

CSS

Defines the presentation, design and layout.

JavaScript

Adds programming logic, behaviour and interactivity.

Together

They form the core technologies behind much of modern front-end web development.

// separation

Structure and presentation can be separated

HTML might contain:

<button class="contact-button"> Contact Me </button>

CSS can separately define how it looks:

.contact-button { background: #001eff; color: white; padding: 12px 18px; border: 0; border-radius: 8px; } .contact-button:hover { background: #00d719; }

The HTML describes the button. CSS controls its presentation.

// css vs html

CSS does not replace HTML

CSS normally styles an existing document structure.

Without HTML or another document language providing the content and structure, there is little for ordinary CSS to style.

HTML describes what the content is. CSS describes how that content should be presented.

// uses

What is CSS used for?

Colours Typography Layouts Spacing Responsive Design Hover Effects Animations Navigation Forms Web Design

// summary

Structure becomes design.

CSS is the stylesheet language used to control how web content is presented. It works alongside HTML to control colours, typography, spacing, dimensions, layouts, responsive behaviour, hover effects and animations, making it one of the fundamental technologies of the modern web.