WordPress offers endless possibilities for designing and customizing your website. In this article, we’ll share some practical CSS tips specifically for WordPress users, from styling your header to tweaking your fonts.

While WordPress offers plenty of pre-made themes and templates, sometimes you need to take matters into your own hands and make customizations with CSS.

If you have ever asked any of these questions as you work on your WordPress site:

  • “How do I remove the ‘read more’ button?”
  • “How can I change the color of this link?”
  • “How do I make this link unclickable but keep the text on the page?”

…then read on to learn some valuable CSS tricks for your website.

In this tutorial, we’ll cover:

WordPress CSS Tips

The only two things you need to know to implement these tips are:

Note: CSS is not risky, so if you make a mistake you can just delete your code or modify it… it won’t break anything 🙂

With that out of the way, let’s jump straight into some practical CSS tips with examples so you can try it on your own WordPress site:

Center an element horizontally and vertically

To center an element (such as an image, text or a div) both horizontally and vertically, use the following CSS code:

.element {  position: relative;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  }

In this code, the position: relative property is used to position the element relative to its nearest positioned ancestor. The top: 50% and left: 50% properties move the element to the center of its container. Finally, the transform: translate(-50%, -50%) property centers the element both horizontally and vertically by moving it back 50% of its own width and height.

.item-class{  color : blue;  }

You can use colors like white, black, blue, red… but you might want to use specific colors.

In this case, you can do it like this:

.item-class{  color : #F7F7F7;  }

If you’re looking to create a color palette for your website design, try using the Paletton tool. It’s very helpful!

Note: If you want to combine elements, it is pretty easy.

For example, let’s say you want to disable the click and put the link back in black.

You can use this code:

.item-class{  pointer-events : none;  color : black;  }  
.item-class{  display : none;  }

Note: Sometimes you may need to put an a after your class to make it work, like this:

.item-class a{  display : none;  }

Try adding the a or experimenting without it to see if your code is working or not. Just add your CSS, save, and check your frontend.

Note: It is always better to modify HTML in order to do this, but if CSS might be easier or the only solution possible, use this code:

.item-class{  pointer-events: none;  }

You can make links change color when a user hovers over them by using the following CSS code:

  a:hover {  color: red;  }

In this code, the a:hover selector targets all links on the page that the user is currently hovering over. The color: red property changes the color of the text to red.

To style links on your website, use the following CSS code:

  a {  color: #0077cc;  text-decoration: none;  border-bottom: 1px solid #0077cc;  transition: all 0.2s ease-in-out;  }    a:hover {  color: #005299;  border-bottom: 1px solid #005299;  }

In this code, the a selector is used to style all links on the page. The color property sets the color of the links, and the text-decoration property removes the default underline. The border-bottom property adds a subtle underline effect. The transition property creates a smooth transition effect when the user hovers over the link. The a:hover selector is used to style the link when the user hovers over it.

Style a button

Use the following code to style a button:

  .button {  background-color: #4CAF50; /* Green */  border: none;  color: white;  padding: 15px 32px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;  }

In this code, the various properties are used to style a button, including the background-color and color properties for the button’s appearance, the padding property for the button’s size, and the cursor property to change the mouse pointer when hovering over the button.

Change the font of a section

Change the font of a section of your website using the following CSS code:

  .section {  font-family: Arial, sans-serif;  font-size: 16px;  line-height: 1.5;  }

In this code, the font-family property sets the font to Arial or a similar sans-serif font, the font-size property sets the font size to 16 pixels, and the line-height property sets the spacing between lines of text to 1.5 times the font size.

If you want to create a header that stays fixed to the top of the page as the user scrolls, you can use the following CSS code:

  .header {  position: fixed;  top: 0;  left:0;  width: 100%;  background-color: #333;  color: #fff;  z-index: 9999;  }

In this code, the position: fixed property fixes the header to the top of the viewport, and the top: 0 property positions it at the very top of the page. The width: 100% property ensures the header spans the entire width of the viewport. The background-color, color are used to style the header, and the z-index: 9999 property ensures that the header appears on top of all other elements on the page.

Create a sticky header with a shadow effect

To create a sticky header with a shadow effect that stays fixed to the top of the page as the user scrolls, use this CSS code:

  header {  position: fixed;  top: 0;  left: 0;  width: 100%;  background-color: #fff;  z-index: 999;  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  }    .content {  padding-top: 100px;  }

In this code, the position: fixed property is used to fix the header to the top of the page. The top: 0 and left: 0 properties position the header at the top-left corner of the page. The width: 100% property sets the width of the header to be the full width of the page. The background-color property sets the background color of the header, and the z-index property ensures that the header appears on top of other elements on the page. Finally, the box-shadow property adds a subtle shadow effect to the header. The .content selector is used to add padding to the top of the page so that the content doesn’t get covered by the fixed header.

Add a background color to a section

Do you want to add a background color to a section of your website? Then use the following CSS code:

  .section {  background-color: #f2f2f2;  padding: 20px;  }

In this code, the background-color: #f2f2f2 property sets the background color to a light gray, and the padding: 20px property adds 20 pixels of space around the content within the section.

Change the background color of the body

Add this code to change the background color of the body of your website:

  body {  background-color: #f5f5f5;  }

In this code, the background-color property sets the background color to a light gray.

Change the color of a specific word or phrase

To change the color of a specific word or phrase within a block of text, you can use the following CSS code:

  p span {  color: red;  }

In this code, the p span selector targets any span element that appears within a p element. You can then wrap the word or phrase you want to target with a span element in your HTML, like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This would make the phrase “consectetur adipiscing elit” appear in red.

Create a border around an image

Here’s how to add a border around an image:

  img {  border: 2px solid #ccc;  }

In this code, the border property sets the width, style, and color of the border. The 2px value sets the width of the border to 2 pixels, solid sets the style to a solid line, and #ccc sets the color to a light gray.

Create a hover effect on an image

Use this code snippet to create a hover effect on an image:

  img:hover {  opacity: 0.8;  }

In this code, the img:hover selector targets the image when the user hovers over it. The opacity property sets the transparency of the image. In this case, the value is set to 0.8, making the image slightly transparent when the user hovers over it.

Style a form

Style a form on your website with the following CSS code:

  form {  background-color: #f2f2f2;  padding: 20px;  border-radius: 5px;  }    form label {  display: block;  margin-bottom: 10px;  }    form input[type="text"], form input[type="email"], form textarea {  width: 100%;  padding: 10px;  margin-bottom: 20px;  border: none;  border-radius: 3px;  box-shadow: 0 0 5px #ccc;  }    form input[type="submit"] {  background-color: #4CAF50;  border: none;  color: #fff;  padding: 10px 20px;  border-radius: 3px;  cursor: pointer;  }

In this code, the various properties are used to style a form, including the background-color, padding, and border-radius properties for the overall appearance of the form. The form label selector is used to style the labels associated with each form field. The form input[type="text"], form input[type="email"], form textarea selector is used to style the various input fields in the form. The form input[type="submit"] selector is used to style the submit button.

Create a responsive layout

If you want to create a responsive layout that adjusts to different screen sizes, use the following CSS code:

  @media (max-width: 768px) {  /* Styles for screens smaller than 768px */  .container {  width: 100%;  }    .menu {  display: none;  }    .mobile-menu {  display: block;  }  }    @media (min-width: 769px) {  /* Styles for screens larger than 768px */  .container {  width: 768px;  margin: 0 auto;  }    .menu {  display: block;  }    .mobile-menu {  display: none;  }  }

In this code, the @media rule is used to specify different styles for different screen sizes. The first @media rule targets screens with a maximum width of 768px, and the second @media rule targets screens with a minimum width of 769px. The various selectors within each @media rule are used to adjust the layout and appearance of the page based on the screen size.

One more CSS tip…

You might find your code not working even though you did everything correctly. This might be because there is already a CSS code saying something different than your code.

To override this, just add !important like this:

.item-class{  pointer-events: none !important;  }

These are just a few examples of practical ways you can use CSS to enhance your WordPress website.

With CSS, the possibilities for customizing your website’s appearance are virtually endless. By learning and applying these tips, you can create a website that is not only visually appealing but also optimized for a better user experience.

Take Your CSS Skills to The Next Level

Whether you’re a beginner or a seasoned pro web developer or web designer, if you want to dive deeper into using CSS with WordPress, these additional CSS tutorials will help you expand your knowledge and skills:

Click on the links to learn more and start improving your WordPress website today.

Contributors

IncensyThank you to WPMU DEV member Antoine from Incensy for contributing the idea for this post and several of the CSS examples used above.  Check out Incensy’s Agency partner profile for more details.

***

Note: We do not accept articles from external sources. WPMU DEV members, however, may contribute ideas and suggestions for tutorials and articles on our blog via the Blog XChange.

Did we miss any nifty CSS tricks that you’ve picked up along the way? We’d love to learn about them in the comments!