…then read on to learn some valuable CSS tricks for your website.<\/p>\n
In this tutorial, we’ll cover:<\/p>\n
- \n
- WordPress CSS Tips<\/a>\n
- \n
- Center an element horizontally and vertically<\/a><\/li>\n
- Change the link color<\/a><\/li>\n
- Remove a link<\/a><\/li>\n
- Disable a link (link stays visible but users can’t click on it)<\/a><\/li>\n
- Change the color of links on hover<\/a><\/li>\n
- Style links<\/a><\/li>\n
- Style a button<\/a><\/li>\n
- Change the font of a section<\/a><\/li>\n
- Create a sticky header<\/a><\/li>\n
- Create a sticky header with a shadow effect<\/a><\/li>\n
- Add a background color to a section<\/a><\/li>\n
- Change the background color of the body<\/a><\/li>\n
- Change the color of a specific word or phrase<\/a><\/li>\n
- Create a border around an image<\/a><\/li>\n
- Create a hover effect on an image<\/a><\/li>\n
- Style a form<\/a><\/li>\n
- Create a responsive layout<\/a><\/li>\n<\/ol>\n<\/li>\n
- Take Your CSS Skills to The Next Level<\/a><\/li>\n<\/ul>\n
WordPress CSS Tips<\/h2>\n
The only two things you need to know to implement these tips are:<\/p>\n
- \n
- How CSS works<\/a><\/li>\n
- How to add CSS to WordPress<\/a><\/li>\n<\/ul>\n
Note: CSS is not risky, so if you make a mistake you can just delete your code or modify it… it won\u2019t break anything :)<\/p>\n
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:<\/p>\n
Center an element horizontally and vertically<\/h3>\n
To center an element (such as an image, text or a div) both horizontally and vertically, use the following CSS code:<\/p>\n
\r\n.element {\r\nposition: relative;\r\ntop: 50%;\r\nleft: 50%;\r\ntransform: translate(-50%, -50%);\r\n}\r\n<\/pre>\nIn this code, the
position: relative<\/code> property is used to position the element relative to its nearest positioned ancestor. Thetop: 50%<\/code> andleft: 50%<\/code> properties move the element to the center of its container. Finally, thetransform: translate(-50%, -50%)<\/code> property centers the element both horizontally and vertically by moving it back 50% of its own width and height.<\/p>\nChange the link color<\/h3>\n
\r\n.item-class{\r\ncolor : blue;\r\n}\r\n<\/pre>\nYou can use colors like white, black, blue, red\u2026 but you might want to use specific colors.<\/p>\n
In this case, you can do it like this:<\/p>\n
\r\n.item-class{\r\ncolor : #F7F7F7;\r\n}\r\n<\/pre>\nIf you’re looking to create a color palette for your website design, try using the Paletton tool<\/a>. It’s very helpful!<\/p>\n
Note: If you want to combine elements, it is pretty easy.<\/p>\n
For example, let’s say you want to disable the click and put the link back in black.<\/p>\n
You can use this code:<\/p>\n
\r\n.item-class{\r\npointer-events : none;\r\ncolor : black;\r\n}\r\n<\/pre>\nRemove a link<\/h3>\n
\r\n.item-class{\r\ndisplay : none;\r\n}\r\n<\/pre>\nNote: Sometimes you may need to put an
a<\/code> after your class to make it work, like this:<\/p>\n\r\n.item-class a{\r\ndisplay : none;\r\n}\r\n<\/pre>\nTry adding the
a<\/code> or experimenting without it to see if your code is working or not. Just add your CSS, save, and check your frontend.<\/p>\nDisable a link (link stays visible but users can’t click on it)<\/h3>\n
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:<\/p>\n
\r\n.item-class{\r\npointer-events: none;\r\n}\r\n<\/pre>\nChange the color of links on hover<\/h3>\n
You can make links change color when a user hovers over them by using the following CSS code:<\/p>\n
\r\n\r\na:hover {\r\ncolor: red;\r\n}\r\n\r\n<\/pre>\nIn this code, the
a:hover<\/code> selector targets all links on the page that the user is currently hovering over. Thecolor: red<\/code> property changes the color of the text to red.<\/p>\nStyle links<\/h3>\n
To style links on your website, use the following CSS code:<\/p>\n
\r\n\r\na {\r\ncolor: #0077cc;\r\ntext-decoration: none;\r\nborder-bottom: 1px solid #0077cc;\r\ntransition: all 0.2s ease-in-out;\r\n}\r\n\r\na:hover {\r\ncolor: #005299;\r\nborder-bottom: 1px solid #005299;\r\n}\r\n\r\n<\/pre>\nIn this code, the
a<\/code> selector is used to style all links on the page. Thecolor<\/code> property sets the color of the links, and thetext-decoration<\/code> property removes the default underline. Theborder-bottom<\/code> property adds a subtle underline effect. Thetransition<\/code> property creates a smooth transition effect when the user hovers over the link. Thea:hover<\/code> selector is used to style the link when the user hovers over it.<\/p>\nStyle a button<\/h3>\n
Use the following code to style a button:<\/p>\n
\r\n\r\n.button {\r\nbackground-color: #4CAF50; \/* Green *\/\r\nborder: none;\r\ncolor: white;\r\npadding: 15px 32px;\r\ntext-align: center;\r\ntext-decoration: none;\r\ndisplay: inline-block;\r\nfont-size: 16px;\r\nmargin: 4px 2px;\r\ncursor: pointer;\r\n}\r\n\r\n<\/pre>\nIn this code, the various properties are used to style a button, including the
background-color<\/code> andcolor<\/code> properties for the button’s appearance, thepadding<\/code> property for the button’s size, and thecursor<\/code> property to change the mouse pointer when hovering over the button.<\/p>\nChange the font of a section<\/h3>\n
Change the font of a section of your website using the following CSS code:<\/p>\n
\r\n\r\n.section {\r\nfont-family: Arial, sans-serif;\r\nfont-size: 16px;\r\nline-height: 1.5;\r\n}\r\n\r\n<\/pre>\nIn this code, the
font-family<\/code> property sets the font to Arial or a similar sans-serif font, thefont-size<\/code> property sets the font size to 16 pixels, and theline-height<\/code> property sets the spacing between lines of text to 1.5 times the font size.<\/p>\nCreate a sticky header<\/h3>\n
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:<\/p>\n
\r\n\r\n.header {\r\nposition: fixed;\r\ntop: 0;\r\nleft:0;\r\nwidth: 100%;\r\nbackground-color: #333;\r\ncolor: #fff;\r\nz-index: 9999;\r\n}\r\n\r\n<\/pre>\nIn this code, the
position: fixed<\/code> property fixes the header to the top of the viewport, and thetop: 0<\/code> property positions it at the very top of the page. Thewidth: 100%<\/code> property ensures the header spans the entire width of the viewport. Thebackground-color<\/code>,color<\/code>\u00a0are used to style the header, and thez-index: 9999<\/code> property ensures that the header appears on top of all other elements on the page.<\/p>\nCreate a sticky header with a shadow effect<\/h3>\n
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:<\/p>\n
\r\n\r\nheader {\r\nposition: fixed;\r\ntop: 0;\r\nleft: 0;\r\nwidth: 100%;\r\nbackground-color: #fff;\r\nz-index: 999;\r\nbox-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n}\r\n\r\n.content {\r\npadding-top: 100px;\r\n}\r\n\r\n<\/pre>\nIn this code, the
position: fixed<\/code> property is used to fix the header to the top of the page. Thetop: 0<\/code> andleft: 0<\/code> properties position the header at the top-left corner of the page. Thewidth: 100%<\/code> property sets the width of the header to be the full width of the page. Thebackground-color<\/code> property sets the background color of the header, and thez-index<\/code> property ensures that the header appears on top of other elements on the page. Finally, thebox-shadow<\/code> property adds a subtle shadow effect to the header. The.content<\/code> selector is used to add padding to the top of the page so that the content doesn’t get covered by the fixed header.<\/p>\nAdd a background color to a section<\/h3>\n
Do you want to add a background color to a section of your website? Then use the following CSS code:<\/p>\n
\r\n\r\n.section {\r\nbackground-color: #f2f2f2;\r\npadding: 20px;\r\n}\r\n\r\n<\/pre>\nIn this code, the
background-color: #f2f2f2<\/code> property sets the background color to a light gray, and thepadding: 20px<\/code> property adds 20 pixels of space around the content within the section.<\/p>\nChange the background color of the body<\/h3>\n
Add this code to change the background color of the body of your website:<\/p>\n
\r\n\r\nbody {\r\nbackground-color: #f5f5f5;\r\n}\r\n\r\n<\/pre>\nIn this code, the
background-color<\/code> property sets the background color to a light gray.<\/p>\nChange the color of a specific word or phrase<\/h3>\n
To change the color of a specific word or phrase within a block of text, you can use the following CSS code:<\/p>\n
\r\n\r\np span {\r\ncolor: red;\r\n}\r\n\r\n<\/pre>\nIn this code, the
p span<\/code> selector targets anyspan<\/code> element that appears within ap<\/code> element. You can then wrap the word or phrase you want to target with aspan<\/code> element in your HTML, like this:<\/p>\n<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit<\/span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p><\/code><\/p>\nThis would make the phrase “consectetur adipiscing elit” appear in red.<\/p>\n
Create a border around an image<\/h3>\n
Here’s how to add a border around an image:<\/p>\n
\r\n\r\nimg {\r\nborder: 2px solid #ccc;\r\n}\r\n\r\n<\/pre>\nIn this code, the
border<\/code> property sets the width, style, and color of the border. The2px<\/code> value sets the width of the border to 2 pixels,solid<\/code> sets the style to a solid line, and#ccc<\/code> sets the color to a light gray.<\/p>\nCreate a hover effect on an image<\/h3>\n
Use this code snippet to create a hover effect on an image:<\/p>\n
\r\n\r\nimg:hover {\r\nopacity: 0.8;\r\n}\r\n\r\n<\/pre>\nIn this code, the
img:hover<\/code> selector targets the image when the user hovers over it. Theopacity<\/code> 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.<\/p>\nStyle a form<\/h3>\n
Style a form on your website with the following CSS code:<\/p>\n
\r\n\r\nform {\r\nbackground-color: #f2f2f2;\r\npadding: 20px;\r\nborder-radius: 5px;\r\n}\r\n\r\nform label {\r\ndisplay: block;\r\nmargin-bottom: 10px;\r\n}\r\n\r\nform input[type="text"], form input[type="email"], form textarea {\r\nwidth: 100%;\r\npadding: 10px;\r\nmargin-bottom: 20px;\r\nborder: none;\r\nborder-radius: 3px;\r\nbox-shadow: 0 0 5px #ccc;\r\n}\r\n\r\nform input[type="submit"] {\r\nbackground-color: #4CAF50;\r\nborder: none;\r\ncolor: #fff;\r\npadding: 10px 20px;\r\nborder-radius: 3px;\r\ncursor: pointer;\r\n}\r\n<\/pre>\nIn this code, the various properties are used to style a form, including the
background-color<\/code>,padding<\/code>, andborder-radius<\/code> properties for the overall appearance of the form. Theform label<\/code> selector is used to style the labels associated with each form field. Theform input[type=\"text\"], form input[type=\"email\"], form textarea<\/code> selector is used to style the various input fields in the form. Theform input[type=\"submit\"]<\/code> selector is used to style the submit button.<\/p>\nCreate a responsive layout<\/h3>\n
If you want to create a responsive layout that adjusts to different screen sizes, use the following CSS code:<\/p>\n
\r\n\r\n@media (max-width: 768px) {\r\n\/* Styles for screens smaller than 768px *\/\r\n.container {\r\nwidth: 100%;\r\n}\r\n\r\n.menu {\r\ndisplay: none;\r\n}\r\n\r\n.mobile-menu {\r\ndisplay: block;\r\n}\r\n}\r\n\r\n@media (min-width: 769px) {\r\n\/* Styles for screens larger than 768px *\/\r\n.container {\r\nwidth: 768px;\r\nmargin: 0 auto;\r\n}\r\n\r\n.menu {\r\ndisplay: block;\r\n}\r\n\r\n.mobile-menu {\r\ndisplay: none;\r\n}\r\n}\r\n\r\n<\/pre>\nIn this code, the
@media<\/code> rule is used to specify different styles for different screen sizes. The first@media<\/code> rule targets screens with a maximum width of 768px, and the second@media<\/code> rule targets screens with a minimum width of 769px. The various selectors within each@media<\/code> rule are used to adjust the layout and appearance of the page based on the screen size.<\/p>\nOne more CSS tip…<\/h3>\n
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.<\/p>\n
To override this, just add
!important<\/code> like this:<\/p>\n\r\n.item-class{\r\npointer-events: none !important;\r\n}\r\n<\/pre>\nThese are just a few examples of practical ways you can use CSS to enhance your WordPress website.<\/p>\n
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.<\/p>\n
Take Your CSS Skills to The Next Level<\/h2>\n
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:<\/p>\n
- \n
- 10 Simple Tips For Learning CSS For WordPress<\/a> – Practical tips for beginners who want to learn CSS specifically for use with WordPress. It covers everything from understanding CSS syntax to using CSS frameworks.<\/li>\n
- Learning and Referencing CSS for WordPress<\/a> – A comprehensive guide to learning and referencing CSS specifically for use with WordPress. It covers topics like using the WordPress Customizer, understanding CSS selectors, and working with child themes.<\/li>\n
- 7 Best Sites to Find CSS Snippets and Inspiration<\/a> – Looking for some inspiration for your CSS code? This article lists seven websites that offer CSS snippets and examples that you can use in your own WordPress website.<\/li>\n
- How To Style Images on Your WordPress Website with CSS<\/a> – Images are an important part of any website, and this article offers tips on how to style them using CSS. You’ll learn how to add borders, change image size and alignment, and more.<\/li>\n
- How to Add Custom CSS to Your WordPress Site<\/a> – This article walks you through the process of adding custom CSS to your WordPress website, using both the built-in Customizer and plugins.<\/li>\n
- Free CSS Plugins For Live Editing Your WordPress Site<\/a> – This article lists some free CSS plugins that allow you to live edit your WordPress website, making it easier to see the effects of your CSS changes in real-time.<\/li>\n
- 14 Cool CSS Animation Tools For WordPress<\/a> – If you want to add some animations to your WordPress website using CSS, this article lists some cool tools you can use to do it.<\/li>\n
- Add Masonry and Grid Layouts to Your WordPress Site Using CSS<\/a> – This article explains how to use CSS to add masonry and grid layouts to your WordPress website, creating a more visually appealing design.<\/li>\n
- 25 Expert Tips for Cleaner CSS Coding for WordPress<\/a> – If you want to improve the cleanliness and readability of your CSS code, this article offers 25 expert tips for doing just that.<\/li>\n
- 25 Pro Tips for Improving Your CSS Workflow<\/a> – Tips for improving your CSS workflow, from using CSS preprocessors to using browser developer tools to debug your code.<\/li>\n<\/ul>\n
Click on the links to learn more and start improving your WordPress website today.<\/p>\n
Contributors<\/h3>\n
![\"Incensy\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/incensy-logo.png\")
<\/a>Thank you to WPMU DEV member Antoine<\/strong> from Incensy<\/a> for contributing the idea for this post and several of the CSS examples used above.\u00a0 Check out Incensy’s Agency partner profile<\/a> for more details.<\/p>\n","protected":false},"excerpt":{"rendered":"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. […]<\/p>\n","protected":false},"author":774618,"featured_media":214863,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-214844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/214844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/774618"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=214844"}],"version-history":[{"count":42,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/214844\/revisions"}],"predecessor-version":[{"id":218087,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/214844\/revisions\/218087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/214863"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=214844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=214844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=214844"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=214844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Learning and Referencing CSS for WordPress<\/a> – A comprehensive guide to learning and referencing CSS specifically for use with WordPress. It covers topics like using the WordPress Customizer, understanding CSS selectors, and working with child themes.<\/li>\n
- How to add CSS to WordPress<\/a><\/li>\n<\/ul>\n
- Change the link color<\/a><\/li>\n
- Center an element horizontally and vertically<\/a><\/li>\n