Chapter 1: Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a web page. It allows you to separate the content of a webpage (written in HTML) from its design and layout.

Why Use CSS?

Separation of Concerns: Separates content from design, making the HTML code cleaner and easier to maintain.
Consistency: Provides a way to apply consistent styles across multiple pages of a website.
Flexibility: Allows for more complex and dynamic styling options compared to inline styles.
Responsiveness: Enables responsive design to adapt the layout for different devices and screen sizes.

Basic CSS Syntax

CSS rules consist of a selector and a declaration block. Here's the basic syntax:

selector {
  property: value;
}

Selector: Targets the HTML element you want to style.
Property: Defines the style attribute you want to apply (e.g., color, font-size).
Value: Specifies the value of the property (e.g., red, 16px).

Example: Applying Basic Styles

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Introduction</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to CSS</h1>
    <p>This is a paragraph styled with CSS.</p>
  </body>
</html>

CSS (styles.css):

/* Apply styles to the <h1> element */
h1 {
  color: blue; /* Text color */
  font-family: Arial, sans-serif; /* Font family */
  text-align: center; /* Center-align text */
}

/* Apply styles to the <p> element */
p {
  color: green; /* Text color */
  font-size: 18px; /* Font size */
  line-height: 1.6; /* Line height */
}

How CSS is Applied

CSS can be applied to HTML in three ways:

Inline Styles: Directly within HTML elements using the style attribute.

<p style="color: red; font-size: 20px;">This is a styled paragraph.</p>

Internal Stylesheet: Within the <style> tag in the <head> section of an HTML document.

<style>
  p {
    color: red;
    font-size: 20px;
  }
</style>

External Stylesheet: In a separate CSS file linked from the HTML document.
```
<link rel="stylesheet" href="styles.css" />
```

Understanding CSS Specificity

CSS specificity determines which styles are applied when multiple rules could apply to the same element. The hierarchy is:

Inline Styles: Highest specificity.
IDs: #id selectors.
Classes, Attributes, and Pseudo-classes: .class, [attribute], :pseudo-class.
Element and Pseudo-elements: element, ::pseudo-element.

Example: CSS Specificity

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Specificity</title>
    <link rel="stylesheet" href="specificity.css" />
  </head>
  <body>
    <p class="text">This text has multiple CSS rules applied.</p>
  </body>
</html>

CSS (specificity.css):

/* Element selector */
p {
  color: gray;
}

/* Class selector */
.text {
  color: blue;
}

/* Inline style in HTML (highest specificity) */
<p style="color: red;">This text has inline styles applied.</p>

In this example, the inline style has the highest specificity and will override other styles.

CSS Comments

CSS comments are used to explain or annotate the code. They are ignored by browsers and are useful for making notes in your stylesheets.

Syntax:

/* This is a CSS comment */

Example:

/* This CSS rule styles all <h1> elements */
h1 {
  color: blue;
}