The last part will be the one… h1.intro-title, and as you can see, there are two font sizes:
1. px
2. rem
The rem will override the px value for modern browsers, but older browsers that cannot understand the rem one will fallback to use the px. Both are the same in font size though.
You can remove the rem line if you prefer to work only with px, but to know what conversion is for a px font size, this online tool is great: http://www.pxtoem.com (rem is very similar to em).
Thank you so much! I tried to change only the font size in px and nothing happened.
Now, I have a diffrent problem. I want to change the color of the title of pages. When I’m opening one of them I can see the title on the top. I tried to change the color #333 to diferent one but it’s not working 🙁 I’m guessing it is h1.
Could you be so kind and help me again?
This is the typography code:
p {
margin-bottom:20px;
margin-bottom: 1.250rem;
}
h1, h2, h3, h4, h5, h6{
font-family: open_sans, sans-serif;
font-weight:400;
color:#333;
margin-bottom:16px;
margin-bottom:1rem;
}
h4, h5, h6 {
margin-bottom:11px;
margin-bottom:0.688rem;
}
h1 {
font-size:32px;
font-size:2.000rem;
text-decoration: underline;
font-variant: small-caps;
background-color: #f5e4ab;
text-align: center;
letter-spacing: 1.4pt;
}
h2 {
font-size:21px;
font-size:1.313rem;
}
h3 {
font-size:18px;
font-size:1.125rem;
}
h4 {
font-size:16px;
font-size:1rem;
}
h5 {
font-size:14px;
font-size: 0.875rem;
}
h6 {
font-size:12px;
font-size: 0.750rem;
}
h1.entry-title {
margin-bottom:40px;
line-height: 28px;
line-height: 1.750rem;
}
h1.entry-title a,
h1.intro-title a {
display:block;
min-height:22px;
}
h1.intro-title {
font-size:30px;
font-size:1.875rem;
line-height:22px;
line-height:1.375rem;
}
aside h3 {
font-size:16px;
font-size:1rem;
}
aside h4{
font-size:14px;
font-size: 0.875rem;
}
#footer-wrapper aside h4 {
color:#fff;
}
h1.entry-title-status,
h2.status-date {
margin-bottom:8px;
}
The best recommended way of doing all this is not to edit the theme files (style.css) but to use a child theme (which is included in this theme in a folder called “child-theme” that you can install and then you can override the font sizes for the above selectors (h1, h2, h3, etc.). If you have jetpack installed, you can even do it with the Edit CSS that comes with it.
Colours are done from the theme options (customizer) which should handle your needs. If something is not there, then again, you can use the child theme to edit. I recommend you read up on why and how to use a child theme for theme modifications:
http://codex.wordpress.org/Child_Themes
