CSS basics

Understanding the Basics of CSS

CSS (Cascading Style Sheets) is the language used for describing the presentation and styling of a document written in a markup language like HTML. While HTML gives your content **structure**, CSS gives it **style**. It controls the layout of multiple web pages at once, including colors, fonts, spacing, and responsive design.

If HTML is the structural blueprint of a house, CSS is the interior design—choosing the paint colors, arranging the furniture, and setting the aesthetics. By separating content (HTML) from presentation (CSS), you make websites easier to maintain, faster to load, and more flexible for adapting to different screen sizes.

CSS Syntax: Selectors, Properties, and Values

A CSS rule consists of a **selector** and a **declaration block**. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons.

• Selector: The HTML element name, class name (e.g., .title), or ID (e.g., #header) you want to target.
• Property: The style attribute you want to change (e.g., color, font-size, margin).
• Value: The specific setting for that property (e.g., blue, 16px, 10px 20px).

/* Example of a CSS Rule */
h1 {
  color: #333333; /* Property: color, Value: #333333 */
  font-size: 24px; /* Property: font-size, Value: 24px */
}

The Crucial CSS Box Model

Every single HTML element on a webpage is treated by the browser as a rectangular box. Understanding the **CSS Box Model** is fundamental to layout and spacing. This model consists of four layers, from the inside out:

1. Content: The actual text or image.
2. Padding: The space between the content and the border.
3. Border: A line separating the padding from the margin.
4. Margin: The transparent space outside the border, separating the element from its neighboring elements.

How to Include CSS in HTML

There are three main ways to apply CSS styles to an HTML document:

• External Stylesheet (Recommended): Linking a separate .css file using the <link> tag in the HTML <head>.
• Internal Stylesheet: Placing CSS rules inside a <style> tag within the HTML <head>.
• Inline Styles: Applying styles directly to an HTML element using the style attribute (e.g., <p style="color: red;">...</p>). This method is generally discouraged for large projects.