Scribd
Upload
5 views9 pages

CSS Selectors Step-by-Step Example With Explanation

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
5 views9 pages

CSS Selectors Step-by-Step Example With Explanation

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/ 9

CSS Basics: Selectors, Box Model, Flexbox, Grid,

Responsive Design Techniques


1. CSS Selectors
Step-by-Step Example with Explanation:

1. Create an HTML file with a paragraph


and a button.
2. Apply different CSS selectors to style
them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>CSS Selectors
Example</title>
<style>
p { color: green; } /* Styles
all <p> elements with green color */
.highlight { font-weight: bold;
} /* Styles elements with class
'highlight' as bold */
#unique { text-decoration:
underline; } /* Styles element with ID
'unique' with underline */
button:hover { background-
color: yellow; } /* Changes button
color when hovered */
</style>
</head>
<body>
<p>This is a paragraph.</p> <!--
This paragraph will be green -->
<p class="highlight">This paragraph
is highlighted.</p> <!-- This paragraph
will be bold -->
<p id="unique">This paragraph has
an ID.</p> <!-- This paragraph will be
underlined -->
<button>Hover over me</button> <!--
Button changes color on hover -->
</body>
</html>

2. Box Model
Step-by-Step Example with Explanation:

1. Create a box using a div.


2. Apply padding, border, and margin.
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model
Example</title>
<style>
.box {
width: 200px; /* Sets width
of the box */
padding: 15px; /* Space
inside the box around content */
border: 3px solid red; /*
Adds a red border */
margin: 20px; /* Adds space
outside the box */
background-color:
lightblue; /* Sets background color */
}
</style>
</head>
<body>
<div class="box">This is a
box.</div>
</body>
</html>
3. Flexbox
Step-by-Step Example with Explanation:

1. Create a container with multiple items.


2. Use flexbox properties to align them.
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Example</title>
<style>
.container {
display: flex; /* Enables
Flexbox */
justify-content: space-
between; /* Distributes items with
space between them */
align-items: center; /*
Centers items vertically */
height: 100vh; /* Full
viewport height */
background-color:
lightgray;
}
.item {
width: 80px;
height: 80px;
background-color:
steelblue;
margin: 10px;
text-align: center;
line-height: 80px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>

4. CSS Grid
Step-by-Step Example with Explanation:

1. Create a grid container.


2. Define grid columns and rows.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid; /* Enables
Grid layout */
grid-template-columns:
repeat(3, 1fr); /* 3 equal columns */
grid-gap: 10px; /* Space
between grid items */
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


Step-by-Step Example with Explanation:

1. Make a responsive container.


2. Apply a media query for small screens.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design
Example</title>
<style>
body {
font-family: Arial, sans-
serif;
}
.container {
width: 80%; /* Default
width */
margin: auto;
text-align: center;
}
img {
max-width: 100%; /* Makes
image responsive */
height: auto;
}
@media (max-width: 600px) {
.container {
width: 100%; /* Full
width on small screens */
}
h1 {
font-size: 18px; /*
Smaller font size on small screens */
}
}
</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="Responsive Image">
</div>
</body>
</html>
Each example now includes comments explaining the
purpose of each line of code.

You might also like