Introduction to CSS 🚀

Problem Statement & Scenario

The Problem

Applying CSS

CSS can be applied in various ways:

1. Inline Style

<p style="color: red;">This is a red paragraph.</p>

2. Internal Style (Within HTML Document)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3. External Style (In Separate CSS File)

<head>
  <link href="style.css" rel="stylesheet" />
</head>

Multiple CSS Rules

You can list multiple CSS rules to apply different styles to various elements:

p {
  color: red;
}

a {
  color: blue;
}

A selector can target one or more items:

p, a {
  color: red;
}

Selectors and Spacing

Selectors can target one or more items, and spacing is insignificant in CSS:

p,a {
  color: red;}

p,a {              color: red;
         }

Best Practices

Each declaration in the declaration block should end with a semicolon (;).
Proper indentation and spacing enhance readability but are not required by the browser.

Understanding these fundamental concepts equips you to enhance the visual aspects of your HTML documents using CSS. As you delve deeper, you'll discover the versatility and power CSS brings to web development. Stay tuned for more insights into advanced CSS techniques and best practices.

Real-World Usage Example

Usage Example

CSS Rule Example

Here's a basic example of a CSS rule that styles paragraph tags:

p {
  color: red;
}

Selector (p): Identifies the HTML element to which the styling rules will be applied.
Declaration Block ({ color: red; }): Contains one or more declarations. Each declaration comprises a property (color) and its corresponding value (red).