# CSS Tutorial

## Table of Contents
1. [Introduction to CSS](#introduction-to-css)
2. [CSS Syntax](#css-syntax)
3. [Selectors](#selectors)
4. [Colors](#colors)
5. [Backgrounds](#backgrounds)
6. [Borders](#borders)
7. [Margins](#margins)
8. [Padding](#padding)
9. [Height and Width](#height-and-width)
10. [Box Model](#box-model)
11. [Text](#text)
12. [Fonts](#fonts)
13. [Icons](#icons)
14. [Links](#links)
15. [Lists](#lists)
16. [Tables](#tables)
17. [Display](#display)
18. [Positioning](#positioning)
19. [Z-index](#z-index)
20. [Overflow](#overflow)
21. [Float and Clear](#float-and-clear)
22. [Flexbox](#flexbox)
23. [Grid](#grid)
24. [Media Queries](#media-queries)
25. [Transitions](#transitions)
26. [Animations](#animations)
27. [Transforms](#transforms)
28. [Pseudo-classes](#pseudo-classes)
29. [Pseudo-elements](#pseudo-elements)
30. [Variables](#variables)
31. [Functions](#functions)
32. [Responsive Design](#responsive-design)
33. [Best Practices](#best-practices)

---

## Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

---

## CSS Syntax

A CSS rule consists of a selector and a declaration block:
```css
selector {
  property: value;
}
```
Example:
```css
p {
  color: red;
}
```

---

## Selectors

Selectors are used to target the HTML elements you want to style.

### Types of Selectors
- **Universal Selector (`*`)**
- **Element Selector (`element`)**
- **ID Selector (`#id`)**
- **Class Selector (`.class`)**
- **Attribute Selector (`[attribute]`)**
- **Pseudo-class Selector (`:pseudo-class`)**
- **Pseudo-element Selector (`::pseudo-element`)**
- **Group Selector (`selector1, selector2`)**

---

## Colors

Colors can be defined using names, HEX values, RGB, RGBA, HSL, and HSLA.

### Examples
```css
color: red; /* Name */
color: #ff0000; /* HEX */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */
```

---

## Backgrounds

### Properties
- `background-color`
- `background-image`
- `background-repeat`
- `background-attachment`
- `background-position`
- `background-size`
- `background`

### Example
```css
body {
  background-color: lightblue;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
```

---

## Borders

### Properties
- `border`
- `border-width`
- `border-style`
- `border-color`
- `border-radius`

### Example
```css
div {
  border: 2px solid black;
  border-radius: 10px;
}
```

---

## Margins

Margins are used to create space around elements, outside of any defined borders.

### Properties
- `margin-top`
- `margin-right`
- `margin-bottom`
- `margin-left`
- `margin`

### Example
```css
div {
  margin: 20px;
}
```

---

## Padding

Padding is used to create space around an element's content, inside of any defined borders.

### Properties
- `padding-top`
- `padding-right`
- `padding-bottom`
- `padding-left`
- `padding`

### Example
```css
div {
  padding: 20px;
}
```

---

## Height and Width

### Properties
- `height`
- `width`
- `max-height`
- `max-width`
- `min-height`
- `min-width`

### Example
```css
div {
  height: 100px;
  width: 100px;
}
```

---

## Box Model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

### Components
- `content`
- `padding`
- `border`
- `margin`

### Example
```css
div {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
```

---

## Text

### Properties
- `color`
- `text-align`
- `text-decoration`
- `text-transform`
- `text-indent`
- `letter-spacing`
- `line-height`
- `text-shadow`
- `word-spacing`

### Example
```css
p {
  color: blue;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.5;
}
```

---

## Fonts

### Properties
- `font-family`
- `font-style`
- `font-size`
- `font-weight`
- `font-variant`
- `font`

### Example
```css
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
```

---

## Icons

Icons can be added using various icon libraries like Font Awesome.

### Example
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-camera"></i>
```

---

## Links

### Properties
- `a:link`
- `a:visited`
- `a:hover`
- `a:active`

### Example
```css
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: orange;
}
```

---

## Lists

### Properties
- `list-style-type`
- `list-style-position`
- `list-style-image`
- `list-style`

### Example
```css
ul {
  list-style-type: square;
  list-style-position: inside;
}
```

---

## Tables

### Properties
- `border-collapse`
- `border-spacing`
- `caption-side`
- `empty-cells`
- `table-layout`

### Example
```css
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
  padding: 8px;
}
```

---

## Display

### Values
- `none`
- `block`
- `inline`
- `inline-block`
- `flex`
- `grid`

### Example
```css
div {
  display: block;
}
```

---

## Positioning

### Types
- `static`
- `relative`
- `absolute`
- `fixed`
- `sticky`

### Example
```css
div {
  position: absolute;
  top: 50px;
  left: 100px;
}
```

---

## Z-index

The `z-index` property specifies the stack order of an element.

### Example
```css
div {
  position: absolute;
  z-index: 1;
}
```

---

## Overflow

### Values
- `visible`
- `hidden`
- `scroll`
- `auto`

### Example
```css
div {
  overflow: scroll;
}
```

---

## Float and Clear

### Float Property
- `left`
- `right`
- `none`

### Clear Property
- `left`
- `right`
- `both`
- `none`

### Example
```css
div {
  float: left;
}
div.clear {
  clear: both;
}
```

---

## Flexbox

Flexbox is a layout model that provides a more efficient way to lay out, align, and distribute space among items in a container.

### Properties
- `display: flex;`
- `flex-direction`
- `justify-content`
- `align-items`
- `align-content`
- `flex-wrap`
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `flex`
- `order`

### Example
```css
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
```

---

## Grid

CSS Grid Layout is a two-dimensional layout system for the web.

### Properties
- `display: grid;`
- `grid-template-columns`
- `grid-template-rows`
- `grid-gap`
- `grid-column`
- `grid-row`
- `grid-area`

### Example
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
```

---

## Media Queries

Media queries are used to apply different styles for different devices or screen sizes.

### Example
```css
@media screen and (max-width: 600px) {
  body

 {
    background-color: lightblue;
  }
}
```

---

## Transitions

CSS transitions allow you to change property values smoothly (over a given duration).

### Properties
- `transition-property`
- `transition-duration`
- `transition-timing-function`
- `transition-delay`
- `transition`

### Example
```css
div {
  transition: width 2s;
}
div:hover {
  width: 200px;
}
```

---

## Animations

CSS animations allow you to animate transitions from one CSS style configuration to another.

### Properties
- `@keyframes`
- `animation-name`
- `animation-duration`
- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- `animation`

### Example
```css
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation-name: example;
  animation-duration: 4s;
}
```

---

## Transforms

CSS transforms allow you to rotate, scale, skew, or translate an element.

### Properties
- `transform`
- `transform-origin`

### Example
```css
div {
  transform: rotate(45deg);
}
```

---

## Pseudo-classes

Pseudo-classes are used to define the special state of an element.

### Example
```css
a:hover {
  color: red;
}
```

---

## Pseudo-elements

Pseudo-elements are used to style specified parts of an element.

### Example
```css
p::first-line {
  color: blue;
}
```

---

## Variables

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.

### Example
```css
:root {
  --main-color: blue;
}

p {
  color: var(--main-color);
}
```

---

## Functions

CSS has several built-in functions, such as `calc()`, `var()`, `rgb()`, `hsl()`, and others.

### Example
```css
div {
  width: calc(100% - 50px);
}
```

---

## Responsive Design

Responsive design makes web pages render well on a variety of devices and window or screen sizes.

### Techniques
- **Flexible Grid Layouts**
- **Flexible Images**
- **Media Queries**

### Example
```css
img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
```

---

## Best Practices

### Tips
1. **Keep it Simple**: Use clear, maintainable, and reusable CSS.
2. **Use External Style Sheets**: Keep CSS in separate files.
3. **Comment Your Code**: Explain why specific styles are used.
4. **Organize Your CSS**: Group related styles together.
5. **Use Shorthand Properties**: Minimize the length of CSS rules.
6. **Avoid Inline Styles**: Use classes and IDs instead.
7. **Optimize for Performance**: Minimize the use of large images and redundant styles.
8. **Stay Updated**: Keep up with new CSS features and best practices.

---

This tutorial provides a comprehensive overview of CSS, from basic concepts to advanced techniques. By mastering these topics, you'll be able to create visually appealing and responsive web pages.

### Here is a link to a Youtube Tutorial which can help you learn the language in a better way <>
```
https://youtu.be/ESnrn1kAD4E?si=Z2gX5J0jf7CiBQbI
```