What is CSS | CSS Basics Tutorial

What is CSS?

CSS stands for Cascading Style Sheets. It's the language we use to style HTML elements – essentially, it controls how your website looks.

Think of HTML as the structure of a house (walls, doors, windows) and CSS as the interior design (paint color, furniture, flooring). HTML provides the content and meaning, while CSS provides the presentation.

Here's a breakdown of what CSS does:

Styling Text: Control fonts, colors, sizes, line heights, and more.
Layout Control: Position elements on the page, create columns, and manage spacing.
Visual Effects: Add things like shadows, gradients, animations, and transitions.
Responsiveness: Adapt your website's appearance to different screen sizes (desktops, tablets, phones).

Why use CSS?

Separation of Concerns: Keeps your HTML clean and focused on content, while CSS handles the styling. This makes your code more organized and easier to maintain.
Consistency: Apply the same styles across multiple pages, ensuring a unified look and feel for your website.
Efficiency: Instead of repeating style information within each HTML element, you define it once in CSS and apply it to many elements.
Accessibility: Well-structured CSS can improve the accessibility of your website for users with disabilities.

How does CSS work?

CSS uses rules to style elements. A rule consists of a selector and a declaration block.

Selector: Identifies the HTML element(s) you want to style (e.g., p, h1, div).
Declaration Block: Contains one or more declarations, separated by semicolons. Each declaration consists of a property and a value.

Example:

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

In this example:

p is the selector (targets all <p> paragraph elements).
color: blue; and font-size: 16px; are the declarations.
color and font-size are the properties.
blue and 16px are the values.

This CSS rule will make all paragraph text on your webpage blue and 16 pixels in size.

Ways to include CSS in your HTML:

Inline CSS: Applying styles directly within HTML elements using the style attribute (generally discouraged for larger projects).
Internal CSS: Embedding CSS within the <style> tag in the <head> section of your HTML document.
External CSS: Creating a separate .css file and linking it to your HTML document using the <link> tag (the preferred method for most projects).

We'll explore these methods and more in the following sections!