CSS tutorial

CSS (cascading style sheets) tutorial

🌐 1. What is CSS?

• CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, spacing, and overall look and feel of a web page.

 🧠 2. Why Use CSS?

• Separation of content and style
• Improved maintainability
• Reusability of styles
• Better control over layout and design
• Faster page load with external stylesheets

🔤 3. CSS Syntax

css

selector {

  property: value;

}

• Example:

css

p {

  color: red;

  font-size: 16px;

}

🎯 4. Types of CSS

1. Inline CSS

html

<p style="color: red;">Hello</p>

2. Internal CSS

html

<style>

  p { color: blue; }

</style>

3. External CSS

html

<link rel="stylesheet" href="styles.css">

🎯 5. CSS Selectors

Basic Selectors:

•  `*` – Universal selector
•  `p` – Type selector
•  `.class` – Class selector
•  `#id` – ID selector

Combinators:

•  `div p` – Descendant
•  `div > p` – Child
•  `div + p` – Adjacent sibling
•  `div ~ p` – General sibling

 Attribute Selectors:

•  `[type="text"]`
•  `[href^="https"]`
•  `[data-id]`

Pseudo-classes:

•  `:hover`, `:focus`, `:nth-child()`, `:first-child`

Pseudo-elements:

•  `::before`, `::after`, `::first-letter`, `::selection`

 🎨 6. Common CSS Properties

• Text and Fonts

css

color, font-family, font-size, font-weight, line-height, text-align, text-decoration

• Box Model

css

width, height, padding, margin, border

• Backgrounds

css

background-color, background-image, background-size, background-position, background-repeat

• Positioning

css

position (static, relative, absolute, fixed, sticky)

top, right, bottom, left, z-index

• Display and Visibility

css

display (block, inline, flex, grid, none)

visibility: visible | hidden

overflow: hidden | scroll | auto

• Flexbox

css

display: flex;

flex-direction, justify-content, align-items, flex-wrap

• Grid

css

display: grid;

grid-template-columns, grid-template-rows, grid-gap, grid-area

• Transitions and Animations

css

transition: all 0.3s ease;

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

animation: fadeIn 1s ease-in-out;

• Media Queries

css

@media (max-width: 768px) {

  body {

    background-color: lightgray;

  }

}

🧰 7. Advanced CSS Features

• Variables (Custom Properties)

css

:root {

  --main-color: #333;

}

p {

  color: var(--main-color);

}

• CSS Grid

css

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 10px;

• Flexbox Layout

css

display: flex;

justify-content: center;

align-items: center;

• Transitions and Animations

• Responsive Design

css

@media (min-width: 600px) { ... }

• Dark Mode

css

@media (prefers-color-scheme: dark) {

  body {

    background: #000;

    color: #fff;

  }

}

📏 8. CSS Units

• Relative:** `em`, `rem`, `%`, `vh`, `vw`
• Absolute:** `px`, `pt`, `cm`, `mm`, `in`

🔄 9. CSS Specificity & Cascade

 Specificity:

•  Inline styles: 1000
•  ID selectors: 100
•  Class selectors: 10
•  Element selectors: 1

Cascade Order:

1. Browser defaults

2. External stylesheets

3. Internal styles

4. Inline styles

5. `!important` overrides all

✅ 10. Best Practices

1. Keep styles in external CSS files
2. Use semantic class names
3. Minimize use of `!important`
4. Organize with comments and consistent formatting
5. Use shorthand properties where possible
6. Write mobile-first responsive styles

📚 11. Tools & Frameworks

1. Preprocessors: Sass, LESS
2. Frameworks: Bootstrap, Tailwind CSS, Bulma
3. Autoprefixing: PostCSS
4. Linting: Stylelint
5. Responsive Design Tools: Media queries, Flexbox, Grid