Home Top sites Some useful css code for website wordpress

Some useful css code for website wordpress

by Assessor
Rate this post

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; }


Related Posts