2.2 Basics

Introduction

CSS can be applied in three ways:

Inline: directly in the HTML element using `style=""`

In `<style>` tag: within the `<head>` of the HTML file

External file: `.css` file linked via `<link>`

Syntax: A CSS rule consists of a selector and properties.

selector {
    property: value;
}

/* Example: */
p {
    color: red;
    font-size: 16px;
}

Box Model

Every HTML element is treated as a rectangle consisting of:

`content`: the actual content (text, image)

`padding`: space between content and border

`border`: the edge around the element

`margin`: space to neighboring elements

`box-sizing` and `border-box`: border-box: ensures padding and border are included in the total width