HTML and CSS Basics

Every HTML file follows the same basic structure before any visible content appears.

<!DOCTYPE html>Tells the browser that a current HTML version is being used

<html>Wraps the entire page

<head>Contains invisible information like the title and linked files

<body>Contains the visible content of the page

HTML describes a page's structure using so called tags, usually in pairs of a start and an end.

<h1> to <h6>Headings, h1 the most important, h6 the least

<p>A paragraph of text

<a href="...">A link to another page

<img src="...">Embeds an image, has no separate end tag

<div>A generic container with no meaning of its own, only used for grouping

<ul> and <li>A list and its individual items

Extra information inside a start tag that describes the element in more detail.

class="..."Assigns a name that CSS or JavaScript can use to target the element

id="..."Like class, but unique, may only appear once per page

src="..."Gives the file path for images or scripts

alt="..."Alternative text for an image, important for accessibility

CSS controls how HTML looks, not what it means.

<link rel="stylesheet" href="style.css">Links an external CSS file in the head, the usual approach

style="..."CSS directly on an element, only suitable for quick tests

<style>...</style>CSS directly in the page's head, without an external file

Selectors decide which elements a CSS rule applies to.

h1 { }Applies to all h1 elements on the page

.card { }Applies to all elements with class="card"

#header { }Applies to the one element with id="header"

a:hover { }Applies to a link only while the mouse hovers over it

Inside the curly braces sit the actual styling rules.

colorText color

backgroundBackground color or background image

font-sizeFont size

marginSpace outside an element

paddingSpace inside an element, between the border and the content

display: flexArranges child elements side by side, the basis of modern layouts

CSS treats every HTML element as a rectangular box, made of four layers from the inside out.

ContentThe actual content, for example the text

PaddingInner spacing between the content and the border

BorderThe border itself

MarginOuter spacing to other elements