Custom Design »How to Add Custom CSS
You can use the CSS editor to customize the appearance of any WordPress.com site. It works by allowing you to add your own CSS styles, which allows you to override the default styles of your Theme. To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.
Default Placeholder Comment
If you have never added CSS before or if you have recently changed themes, you will see a placeholder comment shown below.
Welcome to Custom CSS!
To learn how this works, see http://wp.me/PEmnE-Bt
The placeholder comment can be deleted and replaced with your custom CSS or left in place; it does not affect the code you add below
Previewing and Saving
When editing CSS rules in the site customizer CSS panel, your changes will automatically be applied to the preview window, but they won’t actually be saved until you click the Save & Publish button.
The latest 25 revisions of your CSS edits are saved and can by accessed using the CSS Revisions link at the top right of the CSS panel.
What if I change 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 the CSS Revisions link.
Need CSS help? We’re lucky to have a really amazing community forum on CSS where some volunteers as well as our support team help out with CSS questions and to provide resources so you can do more CSS on your own.
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.
The Daily Post blog featured a great series of CSS articles you might like as a 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. Under Firefox, install Firebug. For Internet Explorer, install the Developer Toolbar. Take a look at our introductory videos for the Developer Tools built into Firefox, Chrome, Safari and Internet Explorer to help get you started.
See next page for advanced CSS controls