Scribd
Upload
2 views

CSS week 3 (1)

Uploaded by

waleedmukhtar844
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 views

CSS week 3 (1)

Uploaded by

waleedmukhtar844
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/ 4

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>

You might also like