How can I modify CSS styles?

Updated: August 18, 2016

If you need for some reason modify default theme styling or modify design of website using own styles, you can do that in three ways:

  • write own styles directly in Theme Options – Custom CSS section
  • in theme root directory create file custom.css – in this file you can write your own custom css styles, theme load that file automatically without necessary child theme installed
  • use child theme to apply your modification

To modify default design of theme or customize look of some small parts, are required at least basic HTML and CSS knowledge.
Necessary is general knowledge of CSS syntax and using of CSS selectors which point your design changes to correct place:

  1. CSS Syntax – http://www.w3schools.com/css/css_syntax.asp
  2. CSS Properties – http://www.w3schools.com/cssref/default.asp
  3. CSS Selectors – http://www.w3schools.com/cssref/css_selectors.asp

Most useful tool to find out which selector you have to use and also see CSS changes real-time is Developer Tools inside your browser. Tools are usually available in browser when you press F12 key or possible is also opening via browser menu. Much faster is inspecting of element with mouse right click on element you want change:

Browser Developer Tools

With opened Browser Developer Tools you can inspect exact HTML element and see CSS styles related to this element. It will help you find out CSS selector which you can use to modify the look of selected part.
For example, to change text color of top menu items inspected on screenshot above, you can use CSS selector .top-bar .nav-menu-container a:

Found CSS Selector

You can use found CSS selector in your own CSS styles and change color to blue:

Changed CSS style

So you can use CSS style like this, to change the color of selected part:

.top-bar .nav-menu-container a {
	color: #00F;
}

All changes made in Browser Developer Tools do not touch your website at all, it’s just for real-time presentation of wanted change. You have to copy CSS style into theme to apply changes, selecting of possible ways to write Custom CSS described in the start of this article.
Other information related to code inspection you can find in our article: How to inspect code of my website easily.