How to Add Custom CSS
You can use the CSS editor to customize the appearance of any WordPress.com site with a Premium plan or higher. It works by allowing you to add your own CSS styles to override the default styles of your theme.
Access the CSS Editor
To access the CSS editor, go to My Site → Appearance → Customize → Additional CSS:
Previewing and Saving
When adding CSS code on your site, your changes will show in the preview of your site on the right, but they won’t take effect until you click the Save Changes button.
CSS Revisions
The latest 25 revisions of your CSS edits are saved and can be accessed by clicking See full history at the bottom of the CSS editor. If the option does not show, it means there is no CSS history to restore.
Changing Themes
CSS is theme-specific, so all of your CSS is moved to a revision when you change themes. To review or restore past CSS, use CSS Revisions.
About CSS
CSS stands for Cascading Style Sheets. It is a markup language that controls the appearance of HTML elements on a web page. There is almost endless potential to what you can do with CSS to modify the design of a website, as evidenced by the very popular CSS Zen Garden project, a showcase of what can be done with only CSS to change the appearance of one single HTML file.
Making the best of this feature requires some knowledge of how CSS and HTML work, or at least a willingness to learn. See the CSS Help section further down this page for more information.
If you’re looking to get one of the many WordPress.com themes customized and you’re not interested in learning CSS yourself, we recommend hiring a designer to make the changes you need.
CSS Help
Need CSS help? We can provide limited CSS support through live chat or email. Feel free to reach out and we’ll let you know if we can help with your CSS request. Otherwise, we can help point you in the right direction!
If you’re just getting started, there will be a learning curve, but CSS is a very valuable and reusable skill. There are a TON of great resources on the web to get you started with learning more about HTML and CSS. This handy series of articles on CSS is a solid starting point:
- An Intro to CSS, or How to Make Things Look Like You Like
- An Intro to CSS: Finding CSS Selectors
- Intro to CSS: Previewing Changes with the Matched Rule Pane
Here are a few tips:
- Use a CSS validator.
- Take advantage of your browser’s developer tools. For Firefox, use the Firefox Developer Tools. For Google Chrome, use the Developer Tools. Take a look at our introductory videos for the Developer Tools built into Firefox, Chrome, Safari and Internet Explorer to help get you started.
Tutorials
- CSS Beginner Tutorial by HTML Dog
- Introduction to Basic CSS by FreeCodeCamp
💡
Learn how to apply CSS hover effects to improve user experiences.
Advanced CSS controls
Media Width
This option should be used if you have modified the width of the primary content area using custom CSS. The “Media Width” setting is used as the default size for full-size images when they are inserted into your site. Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.
Start Fresh
By default, the custom CSS you add to the CSS editor will be loaded after the theme’s original CSS which means that your rules can take precedence and override the theme’s styles.
You can turn the theme’s original CSS off completely by clicking the Don’t use the theme’s original CSS option. This will allow you to use any WordPress.com theme as a blank canvas for designing with CSS. This is an advanced option and should only be used if you want to start over and design the CSS for your theme from scratch.
If you would like to build on top of the existing CSS rules—which is the most common and the recommended approach—then you can leave this option disabled.
If you are looking for where to find the theme’s original CSS to use it as a reference, the best thing to do is to use your browser tools. Most modern browsers have a web inspector built right in. You can right-click and select the “Inspect Element” option to see the HTML of the item you clicked on as well as all the CSS that applies to it. Two popular tools for viewing CSS are the Firefox Developer Tools and the Chrome Developer Tools. To help you get started, you can take a look at a support page with some brief screencasts on How to Find Your Theme’s CSS using the web developer tools included with browsers.
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information.
Frequently Asked Questions
May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?
All WordPress.com users are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in). Customers on WordPress.com Business and eCommerce plans can contact support to help remove the Admin Bar if required.
The footer credit can be hidden if WordPress.com Business or eCommerce is active on a site. Please do not use CSS to hide or alter the credits if you do not have either of these plans.
All WordPress.com users can choose among several options for the footer credit, from a minimalist WordPress.com logo to text options like “A WordPress.com Website” or “Powered by WordPress.com.” Please refer to this documentation for further information.
Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable. Using CSS, you can also add content like a copyright notice to the existing footer.
Can I use CSS rules like @import and @font-face?
WordPress.com Premium currently does not allow loading outside files via CSS, but is possible on WordPress.com Business and eCommerce.
Can I use web fonts in CSS?
The fonts panel in My Sites → Appearance → Customize → Fonts allows you to choose a font pair. You are limited to those two web fonts on the front end when working with CSS. In addition, if WordPress.com Business or eCommerce is active, it’s possible to add additional fonts using third party plugins.
Can I upload images for use with my CSS?
Yes. You can upload an image to your Media Library, then refer to it by its direct URL from within your CSS stylesheet. Here’s a simple example of how to use a background image in your stylesheet:
div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}What happens if I unsubscribe from my WordPress.com Premium, Business, or eCommerce plan?
All upgrades on WordPress.com are renewed yearly. Should you choose to cancel your subscription, your custom CSS will still be saved but it will no longer be applied to your site for others to see. If you would like them re-applied to your site you can repurchase your upgrade and the styles will be re-applied automatically provided you haven’t changed themes. If you have changed themes, you will find your past CSS in the CSS Revisions link located above the editor in the CSS panel.
Versatile plans and pricing
-
Free
Best for students
-
Personal
Best for hobbyists
-
Premium
Best for freelancers
-
Business
Best for small businesses
Still confused?
Help us improve:
We're always looking to improve our documentation. If this page didn't answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!
