CSS Basics: Selectors, Box Model, Flexbox, Grid, Responsive Design Techniques
1. CSS Selectors
Theory:
CSS selectors define the elements to which a style rule applies. They can be:
Basic selectors: Element (h1), class (.button), ID (#header)
Attribute selectors: [type="text"]
Combinators: Descendant (div p), Child (div > p), Adjacent (h1 + p),
General sibling (h1 ~ p)
Pseudo-classes: :hover, :nth-child(odd)
Pseudo-elements: ::before, ::after
Example Web Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
h1 { color: blue; } /* Element Selector */
.highlight { background-color: yellow; } /* Class Selector */
#main { font-size: 20px; } /* ID Selector */
a:hover { color: red; } /* Pseudo-class */
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p id="main">This is an introduction to CSS.</p>
<p class="highlight">This text has a yellow background.</p>
<a href="#">Hover over me</a>
</body>
</html>
2. Box Model
Theory:
Every element in CSS is a rectangular box consisting of:
Content: The actual text or image
Padding: Space around the content
Border: The outline of the box
Margin: Space between elements
Example Web Page:
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">This is a box with padding, border, and margin.</div>
</body>
</html>
3. Flexbox
Theory:
Flexbox makes it easy to align items in one-dimensional layouts. Important properties:
display: flex; (Enables flex container)
justify-content: (flex-start, center, space-between)
align-items: (stretch, center, flex-start)
Example Web Page:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: lightgray;
}
.box {
width: 100px;
height: 100px;
background-color: steelblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
4. CSS Grid
Theory:
Grid allows two-dimensional layout control using:
display: grid; (Defines grid container)
grid-template-columns: repeat(3, 1fr);
gap: 10px;
Example Web Page:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.grid-item {
background-color: steelblue;
padding: 20px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
5. Responsive Design Techniques
Theory:
Responsive design ensures websites work on different screen sizes using:
Media Queries: @media (max-width: 600px) {}
Flexible Units: em, rem, %, vw, vh
Fluid Layouts: Using relative units
Responsive Images: max-width: 100%; height: auto;
Example Web Page:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
@media (max-width: 600px) {
.container {
width: 100%;
}
h1 {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design Example</h1>
<p>Resize the browser to see the effect.</p>
<img src="https://via.placeholder.com/600" alt="Placeholder Image">
</div>
</body>
</html>
