CSS Basic - Styling the Web

After creating the structure of our website, we will style the website. For styling we use CSS.
CSS Stand for cascading style sheets.
Browser have some default styling. this stylesheet is called user agent stylesheets. you cannot change stylesheet code but use can override code using CSS.
Cascading means override.
we give styling in key value pair in CSS.

CSS Margin

Margins create empty space around an element, separating it from other elements.
Margin is use to control the space on all sides or specific sides
you can give margin using margin key. for example.
```
  margin: 20px;
```

CSS Padding

Padding creates space inside an element, between its content and its border.
Padding is used to control the space inside an element on all sides or specific sides.
you can give padding using padding key. for example.
```
  padding: 20px;
```

CSS Border

Borders are used to create a line around an element, sitting between the padding and the margin.
You can customize the border's width, style, and color using the border property.
Example:
```
  cssCopyEditborder: 2px solid black;
```

CSS Height and Width

Height and width define the size of an element. You can set how tall (height) and wide (width) an element should be.
Example:
```
  width: 200px;
  height: 100px;
```

The CSS Box Model defines how the elements on a webpage are structured
Content: The actual content of the element, like text or images.
Padding: The space between the content and the border. It adds space inside the element.
Border: A line around the padding (if defined), separating the content from the outside.
Margin: The space outside the border, creating space between the element and other elements.

Example

  element {
    width: 200px;
    padding: 20px; 
    border: 2px solid black; 
    margin: 30px; 
  }

The total width and height of an element are calculated by adding content, padding, border, and margin together.

CSS specificity determines which styles are applied when there are conflicting rules.
It is calculated based on a scoring system where different selectors are given different weights.
CSS specificity can be thought of as a 4-part value:

→ Inline styles

→ ID selector

→ Class selector

→ Element selector
For example specificity value is like:

→ Inline styles: (1, 0, 0, 0)

→ ID selector: (0, 1, 0, 0)

→ Class selector: (0, 0, 1, 0)

→ Element selector: (0, 0, 0, 1)
Higher specificity wins.
If specificity is the same, the last rule defined in the CSS file takes precedence.

Key Rule

More specific rules (higher specificity) override less specific ones. Use this algorithm to understand why certain styles apply!

All About Box model and Specificity Algorithm in CSS