How to customize style.css of your WP child theme

First, go to Appearance>Editor in your wordpress admin panel. Select the right child theme in the drop-down menu at the top right corner of your code editor. Then, choose style.css

Start by incrementing the version by 1 at the top of your style.css. 

/*

    Theme Name: eleven40 Pro Theme
    Theme URI: http://my.studiopress.com/themes/eleven40/
    Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
    Author: StudioPress
    Author URI: http://www.studiopress.com/

Version: 2.2.1

This will help the browser to load the last version of your style.css, otherwise, your style.css will not be updated and you may not see the changes in your browser. Then, you may think that the changes of your wordpress child theme style.css don’t work. 

Then, open a new tab, and display a web page of your website, right click and click on Inspect. 

Then, a new tab is going to get displayed. In the bad elements, click on an HTML tag, the CSS will appear in the tab “style” below it. In the tab style, you can click on a CSS modify it. You can also add a CSS directive after an existing already existing CSS directive.

Here I have added “font-family: serif;”. Now I can copy and paste it into the style.css file of my child theme.

I have several options now. If the CSS directive does not exist yet in the style.css, I am going to paste an what I want to change the font of paragraphs only. To do so I select the code from the style tab to the style. CSS code editor and I keep what I need to customize the style.css child theme.

If it already exists, I am going to do a CTRL+F to find the selector that I want and add the CSS directive to it: “font-family:serif;” then I press ‘update’.

It is not bad to keep track of your style.css changes in your Microsoft onenote or your apple note.