Scribd
Upload
2 views3 pages

CSS Easy Guide by ChatGP

This document provides a beginner-friendly overview of CSS, explaining its purpose in styling web pages. Key concepts include selectors, properties, the box model, positioning, display properties, colors, flexbox, grid layouts, transitions, animations, and media queries for responsive design. Each section includes examples to illustrate the concepts effectively.

Uploaded by

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

CSS Easy Guide by ChatGP

This document provides a beginner-friendly overview of CSS, explaining its purpose in styling web pages. Key concepts include selectors, properties, the box model, positioning, display properties, colors, flexbox, grid layouts, transitions, animations, and media queries for responsive design. Each section includes examples to illustrate the concepts effectively.

Uploaded by

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

🎨 CSS Made Super Easy (For Beginners)

🔹 What is CSS?
CSS (Cascading Style Sheets) is used to style and design web pages. It tells the browser how
HTML elements should look.

🔹 1. Selectors
Selectors are used to target HTML elements.

p { color: red; }
#title { font-size: 30px; }
.box { background: yellow; }

🔹 2. Properties and Values


Each CSS rule has a property and value.

color: red;
background-color: blue;
font-size: 20px;

🔹 3. Box Model
Every element is a box:

Content -> Padding -> Border -> Margin

Use margin for outside space, padding for inside space.

🔹 4. Positioning
Control where elements are placed.
position: static; /* default */
position: relative; /* move slightly */
position: absolute; /* move freely */
position: fixed; /* sticks to screen */
position: sticky; /* sticks while scrolling */

🔹 5. Display Property
Defines how elements behave.

display: block; /* full width */


display: inline; /* inside text */
display: flex; /* layout magic */
display: grid; /* grid layout */

🔹 6. Colors and Units

color: #ff0000;
background: rgb(0,255,0);
font-size: 2rem;
width: 50%;

🔹 7. Flexbox
Easily center or space items.

display: flex;
justify-content: center;
align-items: center;

🔹 8. Grid
Create structured layouts.
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;

🔹 9. Transitions and Animations


Make styles change smoothly.

transition: all 0.3s;


:hover { background: red; }

@keyframes slide {
from { left: 0; }
to { left: 100px; }
}

🔹 10. Media Queries (Responsive Design)


Make your website mobile-friendly.

@media (max-width: 600px) {


body {
background: pink;
}
}

You might also like