How to Edit a WordPress CSS File

CSS, or Cascading Style Sheets, are the building blocks that store the elements of your Web site’s appearance, such as colors and layout. You can change the look of your WordPress page by editing the CSS. Here are some basic instructions.



  • Open the page you wish to edit, and click on “View” then “Source” from your browser’s menu. This will open an HTML page in a text-only program such as NotePad or SimpleText.
  • Scroll through the HTML page and locate the style.css file. Double-click the file name.
  • Make a copy of the file and work from the copy.
  • Locate the attribute you want to edit. The attributes will be identified by names indicating sections such as body, header and content.
  • Make your changes to the code displayed between the curly brackets, which look like { and }. These changes can be either to adjust margins, font sizes, colors or other style elements you want to edit.
  • Remove the text for any codes you are replacing. For example, if you have changed your font color from blue to black be sure to delete the word “blue” from that line of code.
  • Save your changes and upload the file to your WordPress site using an FTP client.
  • Open your page in a browser to view your edits.



Tips & Warnings

  • Some themes embed the CSS style in more than one location. If your edits do not appear as you had intended, look for an embedded CSS style somewhere else in the file.
  • Use a text-only program such as NotePad or SimpleText for editing your CSS.
  • Refer to WordPress documentation (see link below) for shorthand techniques for editing your CSS.
  • Be sure to back up your files including the CSS before beginning to edit.
  • Only make edits to a copy of your file, so in case of disaster you can always continue with the existing file.
  • Watch out for typographical errors. If you make a spelling error, your CSS will contain mistakes or missing elements.

Các bài viết liên quan

  1. Creating a Custom Page Template in WordPress
  2. plugins-paypal-integration.html" title="Permanent link to [WordPress] 5 Contact Form WordPress Plugins with Paypal Integration">[WordPress] 5 Contact Form WordPress Plugins with Paypal Integration
  3. Convert HTML to WordPress
  4. Back Up/Export your SSL Certificate
  5. Integrate Custom Google Search Engine to Your WordPress Site
Facebook Comments