Modern CSS: Master the Key Concepts of CSS for Modern Web Development

© Joe Attardi 2020

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

3. Basic CSS Concepts

Joe Attardi¹ 

(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 ...