📚 CSS Week 2 - Interactive Study Guide

div { padding: 20px; } /* सभी sides पर 20px */ div { padding: 10px 20px; } /* Top/Bottom: 10px, Left/Right: 20px */ div { padding: 10px 20px 30px 40px; } /* Top, Right, Bottom, Left (clockwise) */

div { border: 5px solid red; } /* width, style, color */ div { border-width: 5px; } div { border-style: solid; /* solid, dashed, dotted */ } div { border-color: red; } div { border-radius: 10px; /* rounded corners */ }

div { margin: 30px; } /* सभी sides पर 30px */ div { margin: 20px auto; } /* Top/Bottom: 20px, Left/Right: auto (center करता है) */ div { margin-top: 10px; } div { margin-bottom: 20px; }

div { width: 200px; padding: 20px; border: 5px solid; box-sizing: content-box; } /* Total width = 200 + 20 + 20 + 5 + 5 = 250px */

* { box-sizing: border-box; } /* सभी elements के लिए */ div { width: 200px; padding: 20px; border: 5px solid; } /* Total width = 200px (padding और border included) */

div { display: block; } /* Default: div, p, h1, section, etc. */

span { display: inline; } /* Default: span, a, strong, em, etc. */

button { display: inline-block; } /* Buttons, badges, small cards */

color: red; color: blue; color: tomato; color: dodgerblue;

color: #FF0000; /* Red */ color: #00FF00; /* Green */ color: #0000FF; /* Blue */ color: #667eea; /* Custom purple */

color: rgb(255, 0, 0); /* Red */ color: rgb(0, 255, 0); /* Green */ color: rgb(0, 0, 255); /* Blue */ color: rgb(102, 126, 234); /* Custom */

color: rgba(255, 0, 0, 1); /* Fully opaque */ color: rgba(255, 0, 0, 0.5); /* 50% transparent */ color: rgba(255, 0, 0, 0.2); /* 80% transparent */

color: hsl(0, 100%, 50%); /* Red */ color: hsl(120, 100%, 50%); /* Green */ color: hsl(240, 100%, 50%); /* Blue */ color: hsla(240, 100%, 50%, 0.5); /* Blue with transparency */

background-color: #667eea; background-color: rgba(102, 126, 234, 0.5);

background-image: url('image.jpg'); background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */ background-size: cover; /* contain, 100px, 50% */ background-position: center; /* top, bottom, left, right */

background: linear-gradient(to right, #667eea, #764ba2); background: linear-gradient(45deg, red, blue); background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);

background: radial-gradient(circle, #667eea, #764ba2); background: radial-gradient(ellipse at top, red, blue);

width: 200px; font-size: 16px; padding: 20px;

width: 50%; /* Parent ka 50% */ padding: 10%; /* Parent width ka 10% */

/* Parent font-size: 16px */ font-size: 2em; /* 32px (16 * 2) */ padding: 1.5em; /* 24px (16 * 1.5) */

/* Root font-size: 16px */ font-size: 2rem; /* 32px */ padding: 1.5rem; /* 24px */ margin: 2rem; /* 32px */

height: 100vh; /* Full screen height */ height: 50vh; /* Half screen height */

width: 100vw; /* Full screen width */ width: 50vw; /* Half screen width */ font-size: 5vw; /* Responsive font */

/* Single font */ font-family: Arial; /* Font stack (fallback) */ font-family: 'Helvetica Neue', Arial, sans-serif; /* Generic families */ font-family: serif; /* Times New Roman style */ font-family: sans-serif; /* Arial style */ font-family: monospace; /* Code style */ font-family: cursive; /* Handwriting style */

font-size: 16px; /* Fixed */ font-size: 1rem; /* Relative to root */ font-size: 1.5em; /* Relative to parent */ font-size: 2vw; /* Responsive */

font-weight: normal; /* 400 */ font-weight: bold; /* 700 */ font-weight: 100; /* Thin */ font-weight: 900; /* Extra bold */

font-style: normal; font-style: italic; font-style: oblique;

text-align: left; text-align: center; text-align: right; text-align: justify;

text-decoration: none; /* Remove underline from links */ text-decoration: underline; text-decoration: overline; text-decoration: line-through;

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

line-height: 1; /* Tight */ line-height: 1.5; /* Normal */ line-height: 2; /* Loose */

letter-spacing: normal; letter-spacing: 2px; letter-spacing: -1px;

word-spacing: normal; word-spacing: 10px; word-spacing: 20px;

<!-- In HTML head --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- In CSS --> body { font-family: 'Roboto', sans-serif; }

<!-- In HTML head --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Use icons --> <i class="fas fa-home"></i> Home <i class="fas fa-user"></i> User <i class="fas fa-heart"></i> Like <i class="fas fa-shopping-cart"></i> Cart

<!-- In HTML head --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Use icons --> <span class="material-icons">home</span> <span class="material-icons">favorite</span> <span class="material-icons">shopping_cart</span>

div { position: static; /* Default */ }

div { position: relative; top: 20px; /* Original position से 20px नीचे */ left: 30px; /* Original position से 30px दाएं */ }

/* Parent */ .container { position: relative; /* Reference point */ } /* Child */ .box { position: absolute; top: 20px; /* Parent के top से 20px */ right: 30px; /* Parent के right से 30px */ }

div { position: fixed; top: 0; /* Screen के top पर */ left: 0; width: 100%; }

div { position: sticky; top: 0; /* Scroll करने पर top पर stick हो जाएगा */ }

/* Lower z-index - पीछे */ .box1 { position: relative; z-index: 1; } /* Higher z-index - आगे */ .box2 { position: relative; z-index: 10; }

img { float: left; margin-right: 20px; } /* Clear float */ .clearfix::after { content: ""; display: table; clear: both; }

.container { display: flex; }

flex-direction: row; /* Default - left to right */ flex-direction: row-reverse; /* Right to left */ flex-direction: column; /* Top to bottom */ flex-direction: column-reverse; /* Bottom to top */

justify-content: flex-start; /* Start से */ justify-content: flex-end; /* End से */ justify-content: center; /* Center में */ justify-content: space-between; /* Equal space between */ justify-content: space-around; /* Equal space around */ justify-content: space-evenly; /* Perfectly equal space */

align-items: stretch; /* Default - full height */ align-items: flex-start; /* Top */ align-items: flex-end; /* Bottom */ align-items: center; /* Center */ align-items: baseline; /* Text baseline */

flex-wrap: nowrap; /* Default - single line */ flex-wrap: wrap; /* Multiple lines */ flex-wrap: wrap-reverse; /* Reverse order */

gap: 20px; /* All sides */ gap: 10px 20px; /* Row gap, Column gap */ row-gap: 10px; column-gap: 20px;

.item { flex-grow: 1; /* Equal distribution */ } .item-large { flex-grow: 2; /* Double space */ }

.item { flex-shrink: 1; /* Can shrink */ } .item-fixed { flex-shrink: 0; /* Won't shrink */ }

.item { flex-basis: 200px; /* Starting width */ flex-basis: 30%; /* Percentage */ flex-basis: auto; /* Content size */ }

/* flex: grow shrink basis */ flex: 1; /* flex: 1 1 0 - Equal distribution */ flex: 2; /* flex: 2 1 0 - Double space */ flex: 0 0 200px; /* Fixed 200px width */ flex: 1 0 auto; /* Grow but don't shrink */

.item { align-self: flex-start; align-self: flex-end; align-self: center; align-self: stretch; }

.container { display: flex; justify-content: center; align-items: center; height: 100vh; }

.navbar { display: flex; justify-content: space-between; align-items: center; }

.grid { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 300px; /* Min 300px, then grow */ }

.container { display: flex; } .sidebar { flex: 0 0 250px; /* Fixed 250px */ } .main { flex: 1; /* Take remaining space */ }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Landing Page</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; } .logo { font-size: 1.5rem; font-weight: 700; color: #667eea; } .nav-menu { display: flex; gap: 2rem; list-style: none; } .nav-menu a { text-decoration: none; color: #333; font-weight: 600; transition: color 0.3s; } .nav-menu a:hover { color: #667eea; } /* Hero Section */ .hero { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 2rem; margin-top: 60px; } .hero-content h1 { font-size: 3rem; margin-bottom: 1rem; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .btn { display: inline-block; padding: 1rem 2rem; background: white; color: #667eea; text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } /* Features Section */ .features { max-width: 1200px; margin: 4rem auto; padding: 2rem; } .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #667eea; } .features-grid { display: flex; flex-wrap: wrap; gap: 2rem; } .feature-card { flex: 1 1 300px; background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s; } .feature-card:hover { transform: translateY(-10px); } .feature-icon { font-size: 3rem; color: #667eea; margin-bottom: 1rem; } .feature-card h3 { font-size: 1.5rem; margin-bottom: 1rem; } /* Footer */ .footer { background: #333; color: white; text-align: center; padding: 2rem; } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; } .social-links a { color: white; font-size: 1.5rem; transition: color 0.3s; } .social-links a:hover { color: #667eea; } /* Responsive */ @media (max-width: 768px) { .hero-content h1 { font-size: 2rem; } .nav-menu { gap: 1rem; } } </style> </head> <body> <!-- Navigation --> <nav class="navbar"> <div class="nav-container"> <div class="logo">MyBrand</div> <ul class="nav-menu"> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-content"> <h1>Welcome to the Future</h1> <p>Build amazing websites with modern CSS</p> <a href="#features" class="btn">Get Started</a> </div> </section> <!-- Features Section --> <section class="features" id="features"> <h2 class="section-title">Our Features</h2> <div class="features-grid"> <div class="feature-card"> <i class="fas fa-rocket feature-icon"></i> <h3>Fast Performance</h3> <p>Lightning fast load times for better user experience</p> </div> <div class="feature-card"> <i class="fas fa-mobile-alt feature-icon"></i> <h3>Responsive Design</h3> <p>Works perfectly on all devices and screen sizes</p> </div> <div class="feature-card"> <i class="fas fa-shield-alt feature-icon"></i> <h3>Secure & Reliable</h3> <p>Built with security and reliability in mind</p> </div> </div> </section> <!-- Footer --> <footer class="footer"> <p>© 2024 MyBrand. All rights reserved.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </footer> </body> </html>

:root { /* Colors */ --primary-color: #667eea; --secondary-color: #764ba2; --text-color: #333; --bg-color: #f5f5f5; /* Spacing */ --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; /* Font sizes */ --font-sm: 0.875rem; --font-md: 1rem; --font-lg: 1.5rem; } /* Usage */ .button { background: var(--primary-color); padding: var(--spacing-md); font-size: var(--font-md); }