Introduction to CSS

Lecture 1: Introduction to CSS

Welcome to the first lecture of "Basic to Brilliance" - your journey to mastering CSS starts here!

---

What is CSS?

CSS, or Cascading Style Sheets, is the language used to describe the presentation of a web page. While HTML provides the structure and content, CSS is what makes the web pages look attractive and user-friendly. It controls the layout, colors, fonts, spacing, and much more.

Why is CSS Important?

• Separation of Concerns: CSS allows you to separate content (HTML) from presentation (CSS), making your code cleaner and easier to maintain.
• Consistency: You can apply consistent styling across multiple web pages by linking a single CSS file.
• Responsive Design: CSS is essential for creating websites that look good on all devices, from desktops to smartphones.

Basic CSS Syntax

CSS is made up of rules that target HTML elements. Each rule consists of a selector and a declaration block.

selector {
  property: value;
}

• Selector: Targets the HTML element you want to style.
• Property: The aspect of the element you want to change (e.g., color, font-size).
• Value: The specific value you want to apply to the property.

Example:

Let’s say you want to change the color of all

elements to blue.

HTML:

<h1>Hello, World!</h1>

CSS:

h1 {
  color: blue;
}

This simple rule will turn the text in all

elements to blue.

Adding CSS to HTML

There are three main ways to add CSS to your HTML document:

1. Inline CSS: Directly in the HTML element.

   <h1 style="color: blue;">Hello, World!</h1>

1. Internal CSS: Within a