Four CSS Tips to Customize Your WordPress Website

A Cascading Style Sheet (CSS) is a file that contains instructions for how your web pages should be styled and formatted — fonts, colors, spacing, and more. Browsers access this file when rendering your site’s HTML.

You can use CSS to add an extra layer of customization to your website or blog. Here are four CSS tips for crafting a unique look and feel that matches your brand and sets your site apart from the competition.

If you have a WordPress.com site on the Premium or Business plan, you are able to add custom CSS in the Customizer. Before trying the tips below, learn how to add custom CSS to your WordPress.com website.

1. Change the color of your link text

It’s important that your links stand out from the rest of the text on your website. Stand-out links let readers know when there’s something you want them to click on. While black text automatically changes to blue when linked, sometimes the best color choice depends on your site’s palette.

Here is an example of custom CSS that will allow you to change the color of your links in two situations: before they’re clicked on, and after:

/* unvisited link */
a:link {
color: orange;
}

/* visited link */
a:visited {
color: green;
}

If you want a specific hue to match your logo or palette, you can include a hex code instead of a general color name. Use a resource like Color Hex Color Codes to find the code for the particular shade you want to use.

2. Include notes to remind yourself what each element does

This trick is less about what your visitors see on your site, and more about how to keep track of the changes made as you add custom CSS.

See the lines /* unvisited link */ and /* visited link */ in the example above? These do not provide any instructions for web browsers, and won’t show up on your site once live. Instead, they’re descriptions descriptions for the roles played by the pieces of code beneath them.

If you ever want to leave yourself (or your developer) notes or reminders within your custom CSS, place it between /* and */ symbols. This way, you won’t forget what a custom CSS element is meant to do.

3. Add a shadow effect to post titles

The titles of posts in WordPress.com are wrapped in <h1></h1> tags. If you want to add a shadow effect to these titles, paste this code into your custom CSS:

h1 {
text-shadow: 2px 2px #ff0000;
}

Here is what that would look like in practice:

By changing the number in front of the “px,” you can alter the size of the shadow. By changing the hex code (#ff0000, in this example) you can alter the color of the shadow.

4. Add elegant styles to your blockquotes

This CSS tip affects how content between the <blockquote></blockquote> tags appears, giving it a specific background color and changing its font color and size.

Here is the code to paste into your custom CSS:

blockquote {

background: #f9f9f9;

border-left: 15px solid #egegeg;

margin: 2.0em 10px;

padding: 1.0em 10px;

}

blockquote:before {

color: #egegeg;

content: open-quote;

font-size: 5em;

line-height: 0.1em;

margin-right: 0.25em;

vertical-align: -0.4em;

}

blockquote p {

display: inline;

}

And here’s how the end result should appear:

After you’ve explored these CSS tips and are ready to learn more, head over to a resource like HTML Dog to further expand your knowledge and customize your site.

Create your new blog or website for free

Get Started