---
# System prepended metadata

title: CSS
tags: [WEB, Style Sheets, CSS]

---

# CSS
:::spoiler {state="open"} **🧷 Table of Content**
<br/>

- __Root:__ **[Web Development](/Kt7xgfDNQJq12DduZa0nfw)**
    - __Style Sheet__
    [TOC]
:::

<br/>

## 1. Introduction
- What is CSS?
- CSS Syntax
- How CSS Works

<br/>

## 2. CSS Selectors
- Basic Selectors
  - Element Selector
  - Class Selector
  - ID Selector
- Grouping Selectors
- Attribute Selectors
- Pseudo-classes
- Pseudo-elements

<br/>

## 3. CSS Box Model
- Content
- Padding
- Border
- Margin
- Box-sizing

<br/>

## 4. CSS Layout
- Display Property
  - Block
  - Inline
  - Inline-block
  - None
- Positioning
  - Static
  - Relative
  - Absolute
  - Fixed
  - Sticky
- Flexbox
  - Flex Container
  - Flex Items
  - Flex Properties
- Grid
  - Grid Container
  - Grid Items
  - Grid Properties

<br/>

## 5. Typography
- Font Properties
  - Font-family
  - Font-size
  - Font-weight
  - Font-style
- Text Properties
  - Color
  - Text-align
  - Text-transform
  - Line-height
  - Letter-spacing
  - Word-spacing

<br/>

## 6. Colors and Backgrounds
- Color Values
  - Named Colors
  - Hex Colors
  - RGB & RGBA
  - HSL & HSLA
- Background Properties
  - Background-color
  - Background-image
  - Background-repeat
  - Background-position
  - Background-size

<br/>

## 7. Transitions and Animations
- CSS Transitions
  - Transition Properties
  - Transition Timing Functions
- CSS Animations
  - Keyframes
  - Animation Properties

<br/>

## 8. Responsive Design
- Media Queries
- Responsive Units
  - % (Percent)
  - vw (Viewport Width)
  - vh (Viewport Height)
  - em
  - rem
- Mobile-first Design

<br/>

## 9. Advanced CSS
- Custom Properties (CSS Variables)
- CSS Grid vs Flexbox
- Advanced Selectors
- CSS Functions
  - calc()
  - var()

<br/>

## 10. CSS Frameworks
- Overview of Popular Frameworks
  - Bootstrap
  - Foundation
  - Tailwind CSS

<br/>

## 11. Best Practices
- Code Organization
- Performance Optimization
- Accessibility Considerations

<br/>

## 12. Resources
- CSS Specifications
- Online Tools and Validators
- Further Reading

<br/>
