Here are some common CSS codes that you can use to enhance the appearance of your website:
1. Text styling:
h1 { font-size: 36px; font-weight: bold; color: darkblue; text-align: center; } p { font-size: 18px; line-height: 1.5; color: gray; text-align: justify; }2. Box Model:
.box { width: 500px; padding: 20px; margin: 20px auto; border: 2px solid lightgray; border-radius: 10px; }3. Button styling:
button { padding: 10px 20px; font-size: 18px; background-color: lightblue; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: blue; }4. Responsive design:
@media (max-width: 767px) { .box { width: 100%; } }5. Image styling:
img { max-width: 100%; height: auto; border: 1px solid lightgray; border-radius: 5px; }6. Navbar styling:
nav { background-color: lightgray; display: flex; justify-content: space-between; padding: 20px; } nav ul { display: flex; list-style: none; margin: 0; padding: 0; } nav a { color: black; text-decoration: none; padding: 10px 20px; font-size: 18px; } nav a:hover { background-color: gray; color: white; }7. Flexbox layout:
.flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .flex-item { width: 30%; padding: 20px; text-align: center; }8. Animated hover effect:
.item:hover { transform: scale(1.1); transition: all 0.5s ease-in-out; }updating…
