Day 2 - What is CSS?

Welcome to CSS! In this lesson, you'll learn what CSS is, why it's essential for web development, and the three ways to apply styles to your HTML.

---

1. What is CSS?

CSS stands for Cascading Style Sheets. It is a language used to control the appearance and layout of HTML elements on a webpage.

The standard file extension for a CSS file is .css (e.g., styles.css).

---

2. Why Use CSS?

Using CSS offers several key benefits for web development:

• Separates Content from Design: HTML handles the content and structure, while CSS specifically handles the visual look.
• Saves Time: You can style multiple pages simultaneously using just one CSS file.
• Improves Consistency: It ensures your website maintains a clean, professional, and uniform look throughout.
• Responsive Design: It allows you to easily adapt styles for different devices — mobile phones, tablets, and desktops.

---

1. The CSS Syntax

A CSS rule consists of a Selector and a Declaration Block.

• Selector: Points to the HTML element you want to style (e.g., h1, .class).
• Property: The style attribute you want to change (e.g., color, font-size).
• Value: The setting for the property (e.g., blue, 16px).

selector {
  property: value;
  another-property: value;
}

2. Basic Example

Let's style a paragraph clearly using a class selector .styled-text.

Code:

/* CSS */
.styled-text {
    color: blue;
    font-size: 20px;
    font-weight: bold;
}

<!-- HTML -->
<p class="styled-text">This text is styled with CSS!</p>

Output:

---

3. Multiple Properties

You can apply as many properties as you need to a single element.

Code:

/* CSS */
.multi-property-box {
    width: 200px;
    height: 100px;
    background-color: purple;
    color: white;
    text-align: center;
    border-radius: 10px;
}

<!-- HTML -->
<div class="multi-property-box">I am a Box!</div>

Output:

---

4. CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.

Code:

/*
This is a multi-line comment
explaining the code below
*/
p {
    color: red;
} /* This is an inline comment */