Introduction to CSS

💡 CSS Fundamentals

CSS (Cascading Style Sheets) is the language used to describe the style and layout of webpages.
It controls elements’ appearance such as colors, fonts, spacing, and positioning.
A CSS stylesheet is a set of rules that define the visual appearance of elements on a webpage.
A CSS rule is made up of a selector and a declaration block.
Check out the MDN CSS reference ↗

✅ Basic Structure of a CSS Rule

A CSS rule consist of a selector and a declaration block:

selector {
  property: value;
}

css

🔍 CSS Selectors

Selectors define which HTML elements the CSS rules apply to.

📝 Declaration Block

The declaration block contains one or more CSS declarations (property-value pairs) separated by semicolons (;). Each declaration consists of a property and its associated value.

Example:

selector {
  property: value;
}

css

Property: Defines what you want to change (e.g., color, font-size, margin).
Value: Specifies the value for the property (e.g., blue, 16px, 10px).

ID selector vs Type Selector vs Class Selector

A comparison table that highlights the differences between ID selector, type selector, and class selector in CSS:

Feature	ID Selector	Type Selector	Class Selector
Syntax	`#idName`	`elementName`	`.className`
Target Element(s)	Targets a single element with a specific `id`	Targets all elements of a specific type (e.g., `div`, `p`)	Targets all elements with a specific class
Uniqueness	Must be unique per page (only one element can have the same `id` value)	Not unique, applies to all elements of the specified type	Not unique, applies to all elements with the specified class
Specificity	High specificity (most specific)	Low specificity	Medium specificity
Use Case	When styling a single, unique element	When styling all instances of a specific type of element	When styling a group of elements with a shared class
Example	`#header { color: red; }`	`p { color: blue; }`	`.button { background: green; }`
Can Be Applied to	One specific element	All elements of a specific type	Multiple elements with the same class
Scope	Can only appear once in the document	Can appear multiple times in the document	Can appear multiple times in the document
Usage Priority	Highest priority when applied	Lowest priority when applied	Medium priority when applied

🎯 Ways to Include CSS in an HTML Document

External CSS: Linked in the <head> section of an HTML document.

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

html

Internal CSS: Within style tags in the <head> section of an HTML document.

<head>
    <style>
        /* CSS rules here */
    </style>
</head>

html

Inline CSS: Directly in the opening tag of an element.
```
<div style="color: blue;">
```
html

Types of CSS Selectors

1. Type (Element) Selector

Targets an element by its tag name.

p {
  color: blue;
}

css

This targets all <p> elements.

2. Class Selector

Targets elements by their class attribute.

.example {
  font-size: 16px;
}

css

This targets all elements with the class “example” (e.g., <div class="example">).

3. ID Selector

Targets an element by its ID attribute.

#header {
  background-color: #333;
}

css

This targets the element with id="header".

4. Universal Selector

Targets all elements on the page.

* {
  margin: 0;
  padding: 0;
}

css

This applies to every single element.

5. Attribute Selector

Targets elements based on the presence or value of an attribute.

input[type="text"] {
  border: 1px solid #ccc;
}

css

This targets <input> elements with type="text".

6. Descendant Selector

Targets elements that are nested within other elements.

div p {
  color: red;
}

css

This targets all <p> elements inside <div> elements.

7. Child Selector

Targets direct children of an element.

div > p {
  color: green;
}

css

This targets <p> elements that are direct children of a <div>.

8. Pseudo-classes Selector

Targets elements in specific states (e.g., hover, focus).

a:hover {
  color: red;
}

css

This targets <a> elements when the user hovers over them.

9. Pseudo-classes Selector

Targets part of an element (e.g., first letter, first line).

p::first-letter {
  font-size: 2em;
}

css

This targets the first letter of every <p> element.