© Joe Attardi 2020
J. AttardiModern CSShttps://doi.org/10.1007/978-1-4842-6294-8_3

3. Basic CSS Concepts

Joe Attardi1 
(1)
Billerica, MA, USA
 

Now that we’ve looked in detail at how to select elements, let’s start to explore how to style them. The next step is to look at some of the basic concepts in CSS.

The box model

Every element in CSS is treated like a rectangular box. This is sometimes referred to as the box model. The box is made up of four parts. Starting from the outside and moving toward the center, these are the margin, border, padding, and content.

The margin is the space between an element’s border and its surrounding elements. It is specified with the margin property.

The border is an outline around the box. Borders can be styled with a ...

Get Modern CSS: Master the Key Concepts of CSS for Modern Web Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.