Have you found yourself struggling with the problem of how to change some default settings of your Paragraph Style and Headings?
You have your favorite free WordPress theme installed, but you still are not perfectly happy with the way it looks. The text is too small or too big. It is too dark or too light. The spacing between lines is too narrow or too wide.
You would like to change the size and color of the Headings too, but don’t know how to do it.
I have been in that place. I installed my free WordPress theme but still I wanted to customize it here and there. So in this How-To Tutorial, I show you how to change paragraph style and headings. Or in more detail:
All these things are quite easy to change and in this How-to post, I am going to show you how to do it.
1. Why to Change Default Settings?
In fact, you can change all these settings manually too, for each blog post and each Heading separately. But it is time-consuming and frustrating. Also, your website loses its harmony. It is not nice if you have different heading styles on different pages. If you are not happy with your default settings, then better change them in one place, and you have fixed settings through all your website. If you still want to change them again, you can do it one time for all the content. Open and Back-Up your Style.css file First you need to backup your Style.css file. It is an important file, and if something goes wrong with it, you may have fatal errors with your website. To open your Style.css file, log into WordPress and open Appearance → Editor:
To back up Style.css file:
1. Click somewhere in that text and using Ctrl-A select all the text.
2. Using Ctrl-C or your mouse, copy the selected text to a clipboard.
3. Open some simple text editor like Notepad and using Ctrl-V or your mouse, paste it into Notepad.
4. Save the file something like style_css_file.txt
Now you have a backup of your Style.css, and you can safely start to make changes. If something goes wrong, you can always reset to defaults.
2. Change the Default Font Size of a Paragraph Style
Let’s say you don’t feel comfortable with the default color of your Paragraph Style. So let’s change it. 1. Open your Style.css file and find the place with ‘body.’ It should be quite in the beginning and look something like this: Here you see the line: color: #000000; – (the color code in your file might be something else, it depends on the theme that you use). This line determines the color of the body text (or Paragraph style) of your WHOLE website. The hexadecimal code with # sign tells you that the current default color is black. You may wonder how you are supposed to know that it is black! And if you want to change it, how do you know the code of the color.
Don’t worry, it is very simple.
Just open HTML color codes in a new browser window and you will get the picture like this:
In the first row, you see the color names. In the second row, you see the respective HTML hex codes. In the third row, you see the colors. The good thing is that you can use both – the color names OR their hex codes in your Style.css file.
Let’s say your current color of the body text is black and you want to change it to a gray. Then both ways are correct:
1. You can type: Color: Grey (without # sign);
2. or you can type: color: #808080 (with a # sign).
So let’s do it (I chose to use hexacode, but you can use ‘Grey’ if you want):
After changing the color code move your cursor out of the Style.css text window and scroll down until you see the blue “Update File” button. Click it. Your Style.css file is now updated. Open your website in the new browser window and refresh it. The body text through all your Website is gray now. This way you can change the default color of your Body Text (or Paragraph Style) into whatever color you like. Just take the color name or its hexacode and change it in Style.css file. Simple, isn’t it? Yes :)
Note! If you should do something wrong or you want to return to your original settings but don’t remember them anymore, just open your Style_css_file.txt and copy-paste from there into Style.css.
3. Change the Default Font Size of a Paragraph Style
Now let’s change the default font size of the Body Text. It is as simple as the previous task. Open the same place of the Style.css:
Here you see the line: font: 14px ‘PT Sans,’ sans-serif; (Again, the parameters of your Style.css file may be different. It depends on the theme that you have chosen.) Parameter 14px tells you that the default font size is 14 pixels:
After updating Style.css and refreshing the website you see the result:
4. Change the Default Line Height of a Paragraph Style
Exactly the same way you can change the spacing between lines. Just find the same place in the Style.css file and you find the line: line-height: 26px; This line determines the default spacing between the lines. Let’s say we want to make it smaller. We change it into 22px:
After you have updated the Style.css file and refreshed your website you will notice that the spacing between the lines is smaller:
If you don’t like it and feel you should give more air between the lines, just change the parameter:
Update the Style.css file and refresh your website. You see, the spacing between the lines are wider now:
5. Change Color, Size, Font Style and Line Height of Headings
Next I show you how to change the heading of you blog. There are six default headings used in HTML, and they are named Heading 1 (H1), Heading 2 (H2),…, Heading 6 (H6). Headings are useful as they split your text into smaller sections and make it way more scannable. Open your Style.css file as before and find the place with Headings section. It locates somewhere at the beginning of the file and should be something like that:
The first section here allows you to change a font weight (normal, italic, bold), font-family and color. You have to remember that these three parameters change all six headings – from Heading 1 to Heading 6. In fact, it is good, as it give all your headlines the same style. The only difference is font size and line height. To change the color of your Headings, find the line color: #151B8D in the first part of Heading section and change its color code. The next six sections allow you modify the font-size and line-height but this time for each Heading separately.
Font-size under H1 changes the font size of the Heading 1. Font-size under H2 changes the font size of the Heading 2, and so on. Just modify the pixel size and update the Style.css file and you all your headings have different settings.
To give all headings the H1 to H6 proper sizes (if you are not happy with your default settings) make a temporary blog post (which you delete later). There you type all these headings with just some text under them. This gives you a good picture how they look like in your web pages:
After doing it, hit “Save Draft” on the right side of the window and then hit “Preview”.
This way you see the color, the size, the spacing, etc. for each Heading. As you see, all the headings have the same style and color, only the size and spacing differ.
However, don’t make the headings too similar in size or it will be difficult to recognize later whether it is Heading 2 or Heading 3… Or whether it is Heading 3 or Heading 4.
In the example below I changed the color of the headings:
If you have questions or comments about the topic, please drop a comment below and I am happy to get back to you.