Scribd
Upload
5 views4 pages

CSS Detailed Notes

CSS (Cascading Style Sheets) is used for styling HTML elements, including colors, fonts, and layout. It includes types such as inline, internal, and external CSS, along with various selectors and the box model. CSS3 features include transitions, transforms, animations, variables, and shadows, enabling responsive design through media queries and layout systems like Flexbox and Grid.

Uploaded by

Dad's Princess
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
5 views4 pages

CSS Detailed Notes

CSS (Cascading Style Sheets) is used for styling HTML elements, including colors, fonts, and layout. It includes types such as inline, internal, and external CSS, along with various selectors and the box model. CSS3 features include transitions, transforms, animations, variables, and shadows, enabling responsive design through media queries and layout systems like Flexbox and Grid.

Uploaded by

Dad's Princess
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/ 4

CSS Detailed Notes

Cascading Style Sheets (CSS)

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout HTML elements like setting colors, fonts, spacing,

and responsive design.

Types of CSS

1. Inline CSS: <h1 style="color:blue;">Hello</h1>

2. Internal CSS: <style> h1 { color: blue; } </style>

3. External CSS: <link rel="stylesheet" href="styles.css">

Syntax

selector { property: value; }

Selectors

- Universal: * {}

- Element: p {}

- Class: .className {}

- ID: #idName {}

- Grouping: h1, p {}

- Descendant: div p {}

- Pseudo-class: a:hover {}

Box Model

Each element is a box made of:


- Content

- Padding

- Border

- Margin

CSS Units

- Absolute: px, pt, cm

- Relative: %, em, rem, vw, vh

Positioning

- static, relative, absolute, fixed, sticky

Layout Systems

Flexbox:

.container {

display: flex;

justify-content: space-between;

align-items: center;

Grid:

.container {

display: grid;

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

gap: 20px;

}
Media Queries (Responsive Design)

@media (max-width: 600px) {

body {

background-color: lightblue;

CSS3 Features

- Transitions

button {

transition: background-color 0.3s;

- Transforms

div:hover {

transform: scale(1.2);

- Animations

@keyframes fadeIn {

from {opacity: 0;}

to {opacity: 1;}

- Variables

:root {

--main-color: #3498db;
}

body {

color: var(--main-color);

- Shadows

box-shadow: 0px 4px 8px rgba(0,0,0,0.2);

text-shadow: 1px 1px 3px gray;

You might also like