CSS Examples
Example 1: Basic Styling
<!DOCTYPE html>
<html>
<head>
<title>Basic Styling</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
text-align: center;
}
p{
color: green;
font-size: 20px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This is an example of basic CSS styling applied to HTML elements.</p>
</body>
</html>
Example 2: Styling Links
<!DOCTYPE html>
<html>
<head>
<title>Styling Links</title>
<style>
a{
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http://example.com">Visit Example</a>
</body>
</html>
Example 3: Button Styling
<!DOCTYPE html>
<html>
<head>
<title>Button Styling</title>
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
border-radius: 5px;
border: none;
}
.button:hover {
background-color: green;
}
</style>
</head>
<body>
<button class="button">Click Me</button>
</body>
</html>
Example 4: Flexbox Layout
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<style>
.container {
display: flex;
justify-content: space-around;
background-color: lightgray;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
Example 5: Grid Layout
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</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>
Example 6: CSS Transitions
<!DOCTYPE html>
<html>
<head>
<title>CSS Transitions</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 0.5s, transform 0.5s;
}
.box:hover {
background-color: lightgreen;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Example 7: CSS Animations
<!DOCTYPE html>
<html>
<head>
<title>CSS Animations</title>
<style>
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
animation: slide 2s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Example 8: Border and Padding
<!DOCTYPE html>
<html>
<head>
<title>Border and Padding</title>
<style>
.box {
border: 2px solid black;
padding: 20px;
margin: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">This box has border and padding</div>
</body>
</html>
Example 9: Text Alignment
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment</title>
<style>
.left {
text-align: left;
background-color: lightgray;
}
.center {
text-align: center;
background-color: lightblue;
}
.right {
text-align: right;
background-color: lightgreen;
}
</style>
</head>
<body>
<p class="left">This text is aligned to the left.</p>
<p class="center">This text is centered.</p>
<p class="right">This text is aligned to the right.</p>
</body>
</html>
Example 10: Background Images
<!DOCTYPE html>
<html>
<head>
<title>Background Images</title>
<style>
.background {
background-image: url('https://via.placeholder.com/300');
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
Example 11: Opacity
<!DOCTYPE html>
<html>
<head>
<title>Opacity</title>
<style>
.opaque {
background-color: lightblue;
padding: 20px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="opaque">This box is semi-transparent</div>
</body>
</html>
Example 12: Text Shadow
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow</title>
<style>
.shadow {
font-size: 24px;
color: black;
text-shadow: 2px 2px 4px gray;
}
</style>
</head>
<body>
<p class="shadow">This text has a shadow</p>
</body>
</html>
Example 13: Box Shadow
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Example 14: Hover Effects
<!DOCTYPE html>
<html>
<head>
<title>Hover Effects</title>
<style>
.hover-box {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
transition: background-color 0.5s, transform 0.5s;
}
.hover-box:hover {
background-color: lightgreen;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="hover-box"></div>
</body>
</html>
Example 15: Font Styling
<!DOCTYPE html>
<html>
<head>
<title>Font Styling</title>
<style>
.styled-font {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
color: darkblue;
}
</style>
</head>
<body>
<p class="styled-font">This text has custom font styling</p>
</body>
</html>
