CSS | Notion

What is CSS?

CSS (Cascading Style Sheets) is a language used to style and layout HTML elements on a webpage.

It allows you to control:
- Colors, fonts, and text styles
- Spacing, margins, and padding
- Positioning and layout of elements
- Responsive design for different screen sizes
Example:
```
<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>
<p>This is a styled paragraph.</p>
```
In short: CSS separates content (HTML) from design (style), making webpages look visually appealing and easier to maintain.
Difference between class and id selector
- Class Selector (.):
  - Syntax: .classname { ... }
  - Can be applied to multiple elements on the same page.
  - Used for grouping elements with the same style.
- ID Selector (#):
  - Syntax: #idname { ... }
  - Must be unique, applied to only one element per page.
  - Used for specific styling of a single element.
Example:
```
/* Class selector */
.box {
  background-color: yellow;
}

/* ID selector */
#header {
  font-size: 24px;
}
```
In short:
- Class = reusable styling
- ID = unique styling for a single element
Types of CSS

There are three main ways to apply CSS to HTML:
1. Inline CSS
  - Added directly to the HTML element using the style attribute.
  - Example:
```
<p style="color: blue; font-size: 16px;">Hello World</p>
```
  - Pros: Quick for small changes.
  - Cons: Hard to maintain for large projects.
2. Internal CSS (Embedded CSS)
  - Written inside the <style> tag within the <head> section of HTML.
  - Example:
```
<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }
  </style>
</head>
```
  - Pros: Styles apply to the entire page.
  - Cons: Not reusable across multiple pages.
3. External CSS
  - Written in a separate .css file and linked using <link> tag.
  - Example:
```
<link rel="stylesheet" href="style.css">
```
  - Pros: Reusable across multiple pages and easy to maintain.
  - Cons: Requires an extra HTTP request (minor performance cost).
In short:
- Inline = quick & specific
- Internal = page-level styling
- External = reusable & maintainable for large projects
What is specificity?

Specificity in CSS determines which CSS rule takes precedence when multiple rules target the same element.

It is calculated based on the types of selectors used:
- Inline styles → Highest specificity (style="...")
- ID selectors (#id) → Higher specificity
- Class, attribute, and pseudo-class selectors (.class, [attr], :hover) → Medium specificity
- Element and pseudo-element selectors (p, h1, ::before) → Lowest specificity
Example:
```
/* Element selector */
p { color: blue; }

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

/* ID selector */
#demo { color: green; }
```
If a <p id="demo" class="text"> exists, the text will be green because the ID selector has higher specificity than the class or element selectors.

In short: Specificity decides which CSS rule wins when multiple rules conflict.
CSS box model

CSS Box Model is the concept that every HTML element is a rectangular box, made up of four layers that determine its size and spacing:
1. Content – The actual text, image, or element content.
2. Padding – Space between content and border.
3. Border – The edge around padding/content.
4. Margin – Space outside the border, separating the element from others.
Visual Example:
```
+---------------------------+
|        Margin             |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+
```
Example in CSS:
```
div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
```
In short: The box model controls the total size of elements and spacing between them, helping with layout and design.

Difference between display none and visibility hidden

Difference between display: none and visibility: hidden in CSS:

Property	Effect on Element	Space in Layout	Accessibility
`display: none`	Element is completely removed from the page, not visible and not clickable.	No space is reserved; it’s as if the element doesn’t exist.	Not visible to screen readers.
`visibility: hidden`	Element is invisible, but still occupies space.	Space is reserved in layout.	Still exists in DOM, may be read by screen readers in some cases.

Example:

/* display none */
.hidden1 {
  display: none;
}

/* visibility hidden */
.hidden2 {
  visibility: hidden;
}

In short:

display: none → removes element completely.
visibility: hidden → hides element but keeps its space.

Position properties

CSS Position Properties determine how an element is positioned on a webpage. There are five main types:
1. static (default)
2. relative
3. absolute
4. fixed
5. sticky
Example:
```
div.static { position: static; }
div.relative { position: relative; top: 10px; left: 20px; }
div.absolute { position: absolute; top: 50px; left: 100px; }
div.fixed { position: fixed; bottom: 0; right: 0; }
div.sticky { position: sticky; top: 0; }
```
In short: Position properties control where and how an element appears, and how it interacts with other elements on the page.
Difference between relative and absolute
What is z-index?
Flexbox basics
Difference between flex and grid
What is media query?
Explain responsive design
What is rem vs em?
What is vh and vw?
What is pseudo-class?
Pseudo-element difference
What is inheritance in CSS?
What is overflow?
What is opacity?