Imagine this: a WordPress.com site owner likes their theme, but wishes they could change some things — perhaps a larger header to display their logo, or a specific font color for their blog post titles.
Sometimes, what should be a simple web search can be frustrating, often leaving site owners with more questions. HTML? CSS? CSS cheat sheets? What does all of it mean, and how does it relate back to their site?
What CSS looks like
For starters, HTML provides instructions for where things go on a page, and CSS gives direction for what things look like on that page.
When you look at a CSS cheat sheet for the first time, it may feel as if you’re just looking at a random document. Most CSS cheat sheets feature different series of symbols and letters.
Here’s a video that explains exactly what you’re seeing:
The video makes it seem simple enough; however, for non-coders, creating an entire CSS document can be difficult. This is especially true when you’re trying to figure out the right terms to type for the selectors, properties, and values.
All you have to do is look up the element you want to style, follow the format of Selector {property:value} shown in the video, and you’re done.
Two great CSS cheat sheets
Here are some of the best CSS cheat sheets that can help make your website stand out from other sites that may be using the same theme.
This CSS infographic by Genautica gives you the properties, values, and options for each, along with a definition of each so that you know exactly what you’re styling and how.
The Ultimate CSS Cheat Sheet by On Blast Blog is a PDF that gives you CSS selectors, properties, and values divided up by the types of things you’d want to style.
Where your CSS goes
Once you have your CSS written out to match what you want the different elements of your website to look like, it’s time to insert that code into your website. If you have a WordPress.com Premium or Business plan, you have the ability to add custom CSS.
If you want the CSS to apply to just one page, you can paste it into your back-end HTML (or text editor) for that particular page. Bring up the HTML view of the WordPress.com editor and paste it in.
If you want to apply the CSS you’ve written to your entire website — like if you want all H1s and H2s to look the same no matter what page they’re on — you can paste it into your website’s overall customization.
To access this, go to Appearance > Customize > CSS.
Easy tweaks and updates
Updating your CSS once makes it easier in the future.
If you want to change more than the basics like font and color, here’s a more in-depth tutorial on adding custom CSS on WordPress.com sites.
ABOUT THE AUTHOR
Go WordPress