CSS Basics

Styling Your Content

HTML gives a webpage its structure, but it doesn't make it look good. Think of HTML as the skeleton of a house. It defines the rooms and hallways, but it's just bare frames and drywall. To make it a home, you need paint, wallpaper, and furniture. In web development, that's where CSS comes in.

CSS (Cascading Style Sheets) defines the styling/presentation of a web page and the elements on it

CSS handles all the visual aspects: colors, fonts, spacing, and layout. This separation is powerful. It lets you change the entire look of a website without touching the HTML content. You can have one HTML file and multiple CSS files to create different themes, like a light mode and a dark mode.

The Language of Style

CSS works by applying rules to HTML elements. A CSS rule has two main parts: a selector and a declaration block.

The selector points to the HTML element you want to style (like <h1> or <p>). The declaration block, enclosed in curly braces {}, contains one or more style declarations separated by semicolons.

Each declaration is a pair: a property and a value. The property is the style attribute you want to change (like color or font-size), and the value is what you want to set it to.

p {
  color: blue;
  font-size: 16px;
}

In this example, p is the selector. It targets all paragraph elements. The declarations inside the curly braces will make the text in every paragraph blue and set its size to 16 pixels.

Adding Styles to HTML

There are three ways to apply CSS to an HTML document. While they all work, one method is considered the best practice for keeping your code clean and manageable.

1. Inline Styles You can add styles directly to an HTML element using the style attribute. This method is generally discouraged because it mixes content and presentation, making the code harder to maintain.

<p style="color: green; font-size: 12px;">This is a green paragraph.</p>

2. Internal Stylesheet You can place CSS rules inside a <style> tag, which goes within the <head> section of your HTML file. This is useful for single pages that have unique styling, but it's not ideal for styling an entire website.

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This paragraph will be red.</p>
</body>

3. External Stylesheet This is the most common and recommended method. You write your CSS in a separate file with a .css extension (e.g., style.css) and link to it from your HTML file using the <link> tag in the <head>.

This approach keeps your HTML focused on structure and your CSS focused on styling, making your project organized and easier to update.

<!-- In your index.html file -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* In your style.css file */
p {
  color: purple;
}

The 'Cascading' Part

The "C" in CSS stands for "Cascading." This means that styles are applied in a specific order of priority. If you have conflicting rules targeting the same element, the browser needs to decide which one wins. The cascade provides that order.

The basic rule is that more specific styles override less specific ones. Here’s the general hierarchy, from highest priority to lowest:

Priority	Style Type	Description
1 (Highest)	Inline Styles	Styles applied directly to an element.
2	Internal Stylesheet	Styles in a `<style>` tag in the document's head.
3	External Stylesheet	Styles in a linked `.css` file.
4 (Lowest)	Browser Default	The browser's own default styles.

So, if you set a paragraph's color to blue in an external stylesheet but set it to red with an inline style, the paragraph will be red. The inline style is closer to the element and therefore has higher priority.

Ready to test your knowledge? Let's see what you've learned about CSS.

Quiz Questions 1/5

In the analogy of building a house, if HTML provides the structure (the skeleton), what does CSS represent?

Quiz Questions 2/5

A CSS rule consists of a selector and a what?

Understanding these fundamentals—syntax, application methods, and the cascade—is the first step to mastering web design. You now have the tools to start transforming plain HTML into visually engaging webpages.

CSS Fundamentals for Web Design