Links
- Styling Links involves customizing the appearance of anchor elements (<a>). CSS can be used to change their color, text decoration, and behavior when hovered, clicked, or visited.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Links</title>
<style>
a {
color: blue;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">Styled Link</a>
</body>
</html>
Lists
- Styling Lists includes modifying unordered lists (<ul>), ordered lists (<ol>), and list items (<li>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Lists</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
background: #eee;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</body>
</html>
Drop-downs
- Styling Drop-downs refers to customizing the appearance of <select> elements and their options (<option>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Drop-down</title>
<style>
select {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</body>
</html>
Tables
- Styling Tables involves applying styles to table elements (<table>, <tr>, <th>, <td>) to improve readability and aesthetics.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Images
- Styling Images can enhance the presentation of images (<img>) by adjusting their size, borders, and other visual effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Images</title>
<style>
img {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 300px;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Styled Image">
</body>
</html>
Image-Sprite, Image-Filters
- Image Sprites are a way to reduce the number of HTTP requests by combining multiple images into one and displaying only parts of it using CSS.
- Image Filters apply visual effects such as grayscale, blur, or brightness to images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Sprite & Filters</title>
<style>
.sprite {
width: 50px;
height: 50px;
background: url('sprite.png') no-repeat;
}
.sprite1 { background-position: 0 0; }
.sprite2 { background-position: -50px 0; }
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="sprite sprite1"></div>
<div class="sprite sprite2"></div>
<img src="image.jpg" alt="Filtered Image">
</body>
</html>
Clip-Path
- Clip-Path is used to create complex shapes by clipping an element to a basic shape or a polygon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip-Path</title>
<style>
.clip-path {
width: 200px;
height: 200px;
background: url('image.jpg') no-repeat center/cover;
clip-path: circle(50%);
}
</style>
</head>
<body>
<div class="clip-path"></div>
</body>
</html>
Forms
- Styling Forms includes customizing form elements such as <input>, <textarea>, <button>, etc., to make them more user-friendly and visually appealing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Form</title>
<style>
form {
display: flex;
flex-direction: column;
width: 300px;
margin: auto;
}
input, textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Name">
<textarea placeholder="Message"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>
No comments:
Post a Comment