1. Changing Text Color and Font
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a blue-colored paragraph with Arial font.</p>
</body>
</html>
2. Styling a Button
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>
3. Creating a Simple Box Layout
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 150px;
background-color: lightcoral;
border: 2px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">This is a styled box.</div>
</body>
</html>
4. Styling a Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: #333;
overflow: hidden;
}
.nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>
5. Responsive Image Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<img src="https://via.placeholder.com/400" alt="Sample Image">
</body>
</html>
6. Using CSS Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
}
.flex-container div {
background-color: lightblue;
padding: 20px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h2>Flexbox Example</h2>
<div class="flex-container">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
7. CSS Hover Effect on Links
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: navy;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Visit <a href="https://example.com">Example Website</a></p>
</body>
</html>
8. Simple Card Design
<!DOCTYPE html>
<html>
<head>
<style>
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
width: 250px;
box-shadow: 2px 2px 12px #aaa;
}
</style>
</head>
<body>
<div class="card">
<h3>CSS Card</h3>
<p>This is a simple card layout using CSS.</p>
</div>
</body>
</html>
9. Simple Grid Layout
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-container div {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS Grid Example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
10. Centering Content with CSS
<!DOCTYPE html>
<html>
<head>
<style>
.center-box {
width: 200px;
height: 100px;
background-color: peachpuff;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="center-box">
Centered Box
</div>
</body>
</html>
Conclusion
These CSS examples are simple yet powerful for college students learning web design. You can copy and test them in any browser or online HTML editor. With practice, you’ll better understand how CSS affects layout, style, and interaction on a webpage.