CSS Basics

Styling the Web

Think of an HTML document as the skeleton of a webpage. It provides the structure and holds all the content, like headings, paragraphs, and images. But a skeleton by itself isn't very appealing. That's where Cascading Style Sheets, or CSS, comes in. CSS is the language used to style and visually arrange the content defined in HTML. It's like the clothing, hair, and makeup for the skeleton.

CSS (Cascading Style Sheets) is like the paintbrush of the web. It brings your HTML skeleton to life, adding colors, shapes, layouts, and interactivity.

Without CSS, every webpage would look like a plain, black-and-white document. The web browser does apply some very basic default styles, which is why a <h1> heading is bigger and bolder than a <p> paragraph tag. But these defaults are minimal and vary between browsers.

CSS allows us to override these defaults and take full control over the presentation. We can change colors, fonts, spacing, and layout to create a unique and user-friendly experience.

The Anatomy of a CSS Rule

CSS works by defining rules that the browser then applies to HTML elements. Each rule has a specific syntax composed of three main parts: a selector, a property, and a value.

Selector: This targets the HTML element(s) you want to style. It can be a simple element name like h1 or p.
Property: This is the style attribute you want to change, like color, font-size, or background-color.
Value: This is the setting you want to apply to the property. For color, it could be red; for font-size, it could be 24px.

A property and its value together are called a declaration. You can have multiple declarations for a single selector, all wrapped inside curly braces {}.

/* This CSS rule targets all paragraph elements */
p {
  color: navy; /* Sets the text color to navy */
  font-size: 16px; /* Sets the font size to 16 pixels */
}

Applying CSS to HTML

There are three ways to connect your CSS rules to your HTML document. Each has its own use case.

Method	Description	Use Case
Inline Styles	CSS is placed directly inside an HTML tag using the `style` attribute.	Quick tests or styling a single, specific element.
Internal Stylesheet	CSS is placed within a `<style>` tag in the `<head>` section of the HTML file.	Styling a single webpage.
External Stylesheet	CSS is saved in a separate `.css` file and linked from the HTML file.	The most common and recommended method for styling an entire website.

Let's see each method in action.

Inline Style: Directly on the element.

<p style="color: green; font-size: 20px;">
  This paragraph is styled with an inline style.
</p>

Inline styles are powerful but should be used sparingly. They mix content (HTML) with presentation (CSS), which can make your code harder to read and maintain.

Internal Stylesheet: Inside the <head>.

<head>
  <title>My Page</title>
  <style>
    p {
      color: purple;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This paragraph is styled by the internal stylesheet.</p>
</body>

This method is useful for single pages or when you have styles that only apply to one specific page.

External Stylesheet: A separate .css file.

This is the standard and best practice. You create a file named something like styles.css and write all your CSS rules there.

/* Inside styles.css */
p {
  color: #333333; /* A dark gray color */
  font-family: Arial, sans-serif;
}

Then, you link this file in the <head> section of your HTML document using a <link> tag.

<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This paragraph is styled by an external stylesheet.</p>
  <p>So is this one, consistently.</p>
</body>

Using an external stylesheet keeps your HTML clean and allows you to reuse the same styles across many pages, ensuring a consistent look and feel for your entire website.

Resetting Browser Styles

As mentioned, every browser has its own default stylesheet. This can cause frustrating inconsistencies—your site might look slightly different on Chrome, Firefox, and Safari. To combat this, developers often use a CSS reset.

A CSS reset is a small set of CSS rules that removes or neutralizes the default browser styling. This gives you a clean slate to work from, ensuring your styles are applied more predictably across different browsers.

/* A very simple example of a CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The asterisk * is a universal selector that targets every single element on the page. This simple reset removes all default margins and padding, which is a common starting point for many projects. It's usually the very first thing in an external stylesheet.

Quiz Questions 1/5

What is the primary role of CSS (Cascading Style Sheets) in web development?

Quiz Questions 2/5

A CSS rule consists of a selector, a property, and a ______.

With these basics, you have the foundation to start transforming your plain HTML documents into well-designed webpages.

CSS Fundamentals