CSS Basics & Box Model

The Core Concept of Cascading Style Sheets

CSS defines the visual layer of HTML documents. It targets elements using selectors and applies formatting rules.

# The CSS Box Model

Every element in CSS is represented as a rectangular box. The Box Model consists of: - **Content**: The text or image inside the box. - **Padding**: Clear space surrounding the content, inside the borders. - **Border**: A border wrapping the padding and content. - **Margin**: Clear space outside the border, separating it from sibling elements.

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #000;
  margin: 15px;
  box-sizing: border-box; /* Re-calculates margins inside width limits */
}