CSS
1. Colored Headings and Paragraph
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>This is a Red Heading</h1>
<p>This is a Green Paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Centered Text</title>
<style>
h2 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h2>This text is centered</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>This page has a background color!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: green;
color: white;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 8px;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
5. Box Model Example
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style>
.box {
border: 2px solid black;
padding: 20px;
margin: 30px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box">This is a box using CSS box model.</div>
</body>
</html>
6. Hover Effect
<!DOCTYPE html>
<html>
<head>
<title>Hover Example</title>
<style>
p {
color: black;
}
p:hover {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Hover over this text!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Font Styling</title>
<style>
p {
font-family: Arial, sans-serif;
font-size: 20px;
color: navy;
}
</style>
</head>
<body>
<p>This is styled with a different font and size.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Box with Shadow</title>
<style>
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px gray;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div class="card">
<h3>Hello CSS</h3>
<p>This box has rounded corners and shadow.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Nav Bar</title>
<style>
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
margin: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
10. Simple Layout using Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
text-align: center;
line-height: 100px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-transform: uppercase;
color: green;
}
</style>
</head>
<body>
<p>This text is uppercase</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<a href="#">Hover Me</a>
</body>
</html>
13. Rounded Box
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background: lightblue;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
margin: auto;
background: orange;
text-align: center;
}
</style>
</head>
<body>
<div class="box">Centered Box</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 5px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
button {
background: blue;
color: white;
padding: 10px;
}
button:hover {
background: red;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: white;
box-shadow: 5px 5px 10px gray;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
18. Text Shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px gray;
}
</style>
</head>
<body>
<h1>Text Shadow</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background: green;
margin: 5px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
background: black;
padding: 10px;
}
li {
display: inline;
margin: 10px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
21. Background Image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://via.placeholder.com/400");
}
</style>
</head>
<body></body>
</html>
22. Opacity Effect
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" />
</body>
</html>
23. CSS Border Styles
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px dashed red;
width: 200px;
}
</style>
</head>
<body>
<div>Dashed Border</div>
</body>
</html>
24. Padding vs Margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
padding: 20px;
background: yellow;
}
</style>
</head>
<body>
<div>Padding and Margin</div>
</body>
</html>
25. Fixed Position Header
<!DOCTYPE html>
<html>
<head>
<style>
header {
position: fixed;
top: 0;
width: 100%;
background: black;
color: white;
}
</style>
</head>
<body>
<header>Fixed Header</header>
<p style="margin-top: 60px">Scroll Content</p>
</body>
</html>
26. Flex Center Content
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: lightgray;
}
</style>
</head>
<body>
<div class="box">Centered</div>
</body>
</html>
27. CSS Gradient Background
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
background: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
28.Hide and Show on Hover
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: none;
}
div:hover span {
display: block;
}
</style>
</head>
<body>
<div>Hover Me <span>Hidden Text</span></div>
</body>
</html>
29. List Style Removal
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
30. Simple CSS Animation
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
div {
width: 50px;
height: 50px;
background: red;
position: relative;
animation: move 2s infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Comments
Post a Comment