HTML and CSS Exercises
Exercise 1: Selectors
<style>
.selector-example {
color: red;
}
</style>
<div class="selector-example">
This text is red.
</div>
Exercise 1: Selectors Result
This example demonstrates how to use a class selector to apply styles to specific elements. The text is colored red using the .selector-example class.
Exercise 2: Colors
<style>
.color-example {
background-color: lightblue;
color: white;
padding: 10px;
}
</style>
<div class="color-example">
This div has a light blue background.
</div>
Exercise 2: Colors Result
This example shows how to set background and text colors using CSS. The div has a light blue background with white text.
Exercise 3: Margins
<style>
.margin-example {
margin: 20px;
background-color: lightcoral;
padding: 10px;
}
</style>
<div class="margin-example">
This div has a margin.
</div>
Exercise 3: Margins Result
This example shows how to apply margins to create space around an element.
Exercise 4: Padding
<style>
.padding-example {
padding: 20px;
background-color: lightgreen;
}
</style>
<div class="padding-example">
This div has padding.
</div>
Exercise 4: Padding Result
This example demonstrates how to use padding to create space inside an element.
Exercise 5: Borders
<style>
.border-example {
border: 2px solid black;
padding: 10px;
}
</style>
<div class="border-example">
This div has a border.
</div>
Exercise 5: Borders Result
This example shows how to add a border around an element using CSS.
Exercise 6: Font Styles
<style>
.font-example {
font-size: 20px;
font-weight: bold;
font-family: 'Arial', sans-serif;
}
</style>
<div class="font-example">
This text has different font styles.
</div>
Exercise 6: Font Styles Result
This example demonstrates how to change the font size, weight, and family of text using CSS.
Exercise 7: Flexbox
<style>
.flexbox-example {
display: flex;
justify-content: space-between;
}
.flexbox-item {
background-color: #f0a;
padding: 10px;
}
</style>
<div class="flexbox-example">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
<div class="flexbox-item">Item 3</div>
</div>
Exercise 7: Flexbox Result
This example demonstrates how to use Flexbox to create a layout with evenly spaced items.
Exercise 8: Grid
<style>
.grid-example {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
}
</style>
<div class="grid-example">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
Exercise 8: Grid Result
This example demonstrates how to use CSS Grid to create a layout with multiple columns.
Exercise 9: Positioning
<style>
.position-example {
position: relative;
top: 20px;
left: 30px;
background-color: lightyellow;
padding: 10px;
}
</style>
<div class="position-example">
This div is relatively positioned.
</div>
Exercise 9: Positioning Result
This example demonstrates how to use relative positioning to offset an element from its normal position.
Exercise 10: Transitions
<style>
.transition-example {
background-color: lightgrey;
padding: 10px;
transition: background-color 0.5s;
}
.transition-example:hover {
background-color: grey;
}
</style>
<div class="transition-example">
Hover over this div to see the transition.
</div>
Exercise 10: Transitions Result
This example demonstrates how to use CSS transitions to create a smooth color change when hovering over an element.
Exercise 11: Absolute vs Relative Positioning
<style>
.positioning-container {
position: relative;
width: 200px;
height: 200px;
border: 2px solid black;
background-color: #f0f0f0;
}
.absolute-box {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: red;
}
.relative-box {
position: relative;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="positioning-container">
<div class="absolute-box"></div>
<div class="relative-box"></div>
</div>
Exercise 11: Absolute vs Relative Positioning Result
The red box is absolutely positioned within the container, while the blue box is relatively positioned. The container has relative positioning, creating a positioning context for the absolute box. The relative box is offset from its normal position in the document flow.
