CSS

CSS

CSS Tutorial: Master Web Design

Welcome to the complete CSS tutorial. Whether you are a beginner looking to build your first website or a developer refining your skills, this guide will take you from the basic concepts to advanced layouts and animations.

What is CSS?

CSS (Cascading Style Sheets) is the standard style sheet language used to design the layout, colors, and fonts of web pages. While HTML provides the structure (text, images, links), CSS provides the presentation.

CSS Versions

CSS has evolved significantly since its inception:

  • CSS 1 (1996): The first official W3C recommendation. It handled basic fonts, colors, and margins.
  • CSS 2 (1998): Added support for positioning (relative/absolute), z-index, and media types.
  • CSS 3 (Current Standard): Unlike previous versions, CSS3 is split into “modules.” It introduced modern features like Rounded Corners, Gradients, Transitions, Flexbox, and Grid.

Components of CSS

A CSS rule consists of three main parts:

  1. Selector: Points to the HTML element you want to style (e.g., h1, .button, #header).
  2. Property: The aspect you want to change (e.g., color, font-size).
  3. Value: The specific setting for that property (e.g., blue, 20px).

How CSS is Written (CSS Types)

There are three ways to apply CSS to an HTML document. Here are the two most common methods:

1. Inline CSS

Used to apply a unique style to a single HTML element. It uses the style attribute.

<h1 style="color: blue; text-align: center;">This is an Inline Styled Heading</h1>

2. External CSS

The professional way to style websites. You define all styles in a separate file (e.g., style.css) and link it in the HTML <head>.

The HTML:

&lt;head>
  &lt;link rel="stylesheet" href="style.css">
&lt;/head>

The CSS (style.css):

body {
  background-color: lightyellow;
}
p {
  color: darkred;
}

CSS Example with Explanation

Let’s look at a standard CSS block:

p {
  color: white;
  background-color: black;
  padding: 10px;
}

Explanation:

  • p: This is the selector. It tells the browser to find all <p> (paragraph) tags.
  • color: white;: Changes the text color to white.
  • background-color: black;: Makes the area behind the text black.
  • padding: 10px;: Adds 10 pixels of space inside the paragraph so the text doesn’t touch the edges.

Prerequisites to Learn CSS

Before starting this tutorial, you should have a basic understanding of:

  • HTML: You must know how to create tags like <div>, <h1>, and <p>.
  • File Management: Knowing how to create and save files on your computer.

Target Audience: Who Should Learn CSS?

  • Aspiring Web Developers: Anyone wanting to build professional websites.
  • UI/UX Designers: To understand how their designs are implemented in code.
  • Bloggers & Marketers: To customize layouts on platforms like WordPress or Shopify.
  • Students: Anyone looking to understand the core technology of the internet.
Next