CSS? What is that? Do you need it with WordPress? And, where is CSS in WordPress? All of these questions as well as a few tips will be covered in this article.
What is CSS?
CSS is an acronym for Cascading Style Sheets. CSS is a visual-focused coding used in conjunction with markup languages such as HTML or XML. This means that CSS is added to the code, or behind the scenes and your visitors can enjoy what you’ve styled the web page to look like. CSS tells the browser how elements within a web page should be translated on screen, other media. CSS is a necessary and popular coding language in the core languages of the open web.
In a way, CSS is like makeup, it tells what colors something should be, how much should be used, how big or small an element should be, and more! It is a fundamentally powerful tool that you can use in order to control and change how a web page looks. Some other things that CSS can do are: create animations and other special effects. How fun, right!
There’s a lot to learn, but if you want to learn basic CSS, it’s a somewhat easy language to learn, and most tutorials online, with some understanding, you can copy the code, alter it and add it to your website to alter any page’s appearance.
There are many resources available online, like:
Please note that you can learn even more about CSS at a low cost at some of the sites above, or at other places. There are other websites online like CSS Tricks that you can get into more advanced CSS applications.
However, that being said, with CSS you can do a lot of things, like:
Change the font, size, and color of text.
Change the layout of text and images.
Create animations and other special effects.
Control the appearance of tables and other elements.
Create a consistent look and feel for your website.
Create dynamic looks to your browser window.
Customize the look of your menus for any browser or device-width.
Customize the look of your website for a better user experience in any browser or device-width.
Without CSS, your website is purely images and black text on a white background that is on the left side. In most cases, especially if you’re using a stylesheet, rather than adding CSS directly to the HTML of your web page, you’d see how powerful a tool CSS can be if you accidentally didn’t link it properly to your website. If you're looking to improve the look and feel of your website, as well as have a unique design from other sites, CSS is a great place to start!
Where is CSS in WordPress, Specifically The Theme?
So, technically, WordPress uses CSS to help make it look user-friendly when you’re logged into the backend, but in the case of this article, the end-user will only need to be concerned about how the frontend of your website looks. WordPress uses CSS to alter the appearance of its themes and templates. CSS files usually are stored in the /wp-content/themes/ directory, specifically the theme's style.css.
The theme’s style.css file is the main CSS file for the theme. The style.css is the top stylesheet in theme template hierarchy that WordPress looks for first. The file usually includes the basic styles for the theme, such as the font, color, and layout of the text, as well as the how the images, tables, and other elements should display to the frontend website visitor. Now, sometimes a theme may have more than one CSS stylesheets, which can add a special appearance to specific pages, posts, or other sections of a website.
How to Add Custom CSS to a WordPress Theme
The best way to add custom CSS to a WordPress theme is to use the WordPress Customizer. Sure there are plugins for adding custom CSS, but you really don’t need to add more stylesheets when WordPress already offers this option. The WordPress Customizer allows you to make changes to your theme's settings, including its CSS and you can even overwrite your theme’s default CSS.
To add custom CSS using the Customizer, follow these steps:
Go to Appearance > Customize in your WordPress admin dashboard.
Click on the Additional CSS tab.
In the text box, enter your custom CSS.
Click on the Save button.
Your custom CSS will be applied to your website immediately, but you may have to clear your website’s cache in case you have a cache plugin installed or your website provides some type of caching.
While you can directly edit your theme’s style.css file, you may want to leave it alone in case you mess something up. Using the Customizer is a better method. However, if you truly wish to edit the style.css directly, here are the steps to do so:
Go to Appearance > Themes in your WordPress admin dashboard.
Click on the Edit button next to the theme you want to edit.
In the text editor, find the style.css file and open it.
Add your custom CSS to the file.
Save the file and click on the Preview button to see your changes.
In case you mess up, WordPress by default will tell you that something is wrong and won’t save the stylesheet until you’ve fixed the problem. Additionally, WordPress will put a caution sign and highlight the line that has the problem you need to correct.
Tips For Writing Good CSS
There’s a lot to learn about CSS, but when you’re applying it to your WordPress theme, here’s a few tips to consider:
Use descriptive names for your CSS selectors so your code is easier to read and edit. Use comments notations in order to explain what CSS you added as it is good documentation for the future, for both yourself and anyone else that you let work on your theme. Always make sure to test any CSS changes in different browsers and device-widths. You want to make sure the site looks as expected in any browser as well as desktop, smartphone or notebook.
If you follow these simple tips, your WordPress powered website will turn out the way you want it to look.
