Scribd
Upload
170 views5 pages

CSS Complete Notes

This document provides comprehensive notes on CSS, covering its introduction, syntax, selectors, box model, flexbox, grid, responsive design, animations, and advanced topics. It explains various CSS types and properties with examples for better understanding. Additionally, it touches on CSS variables, preprocessors, and frameworks to enhance styling capabilities.

Uploaded by

mdsamadabdul28
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
170 views5 pages

CSS Complete Notes

This document provides comprehensive notes on CSS, covering its introduction, syntax, selectors, box model, flexbox, grid, responsive design, animations, and advanced topics. It explains various CSS types and properties with examples for better understanding. Additionally, it touches on CSS variables, preprocessors, and frameworks to enhance styling capabilities.

Uploaded by

mdsamadabdul28
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Complete Notes: Basics to Advanced

1. Introduction to CSS

- CSS (Cascading Style Sheets) is used to style and layout web pages.

- It controls the color, font, size, spacing, positioning, and animations.

- Types of CSS:

- Inline CSS

- Internal CSS

- External CSS

2. CSS Syntax

- CSS is written in the form of rules.

- Syntax: selector { property: value; }

Example:

p{

color: red;

font-size: 16px;

3. CSS Selectors

- Universal Selector (*)

- Type Selector (e.g., h1, p)

- Class Selector (.className)


- ID Selector (#idName)

- Attribute Selectors

- Pseudo-classes (:hover, :nth-child)

- Pseudo-elements (::before, ::after)

4. CSS Box Model

- The box model includes:

- Content

- Padding

- Border

- Margin

- Example:

div {

width: 100px;

padding: 10px;

border: 5px solid black;

margin: 20px;

5. CSS Flexbox

- A layout model for aligning and distributing space.

- Key properties:

- display: flex;

- justify-content
- align-items

- flex-wrap

- flex-grow, flex-shrink, flex-basis

6. CSS Grid

- A two-dimensional layout system.

- Properties:

- display: grid;

- grid-template-rows

- grid-template-columns

- gap

- Example:

.container {

display: grid;

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

gap: 10px;

7. Responsive Design

- Use media queries to make designs responsive.

- Example:

@media (max-width: 600px) {

body {

background-color: lightblue;
}

8. CSS Animations and Transitions

- Transitions: Change properties smoothly.

Example:

div {

transition: background-color 0.5s ease;

- Animations: Create complex animations.

Example:

@keyframes example {

0% {background-color: red;}

100% {background-color: yellow;}

9. Advanced Topics

- CSS Variables: Define reusable values.

Example:

:root {

--main-color: blue;

p{

color: var(--main-color);
}

- CSS Preprocessors: SCSS, LESS

- CSS Frameworks: Tailwind, Bootstrap

You might also like