Using CSS for customizing my WordPress site not working reliably

user_820321 0
Viewed 51

I read about using a child theme to make it fast and easy to modify a WordPress theme. I followed directions and created a directory with a file style.css containing the following

/*   
Theme Name: IBD Page
Description: IBD Page is based on Twenty Sixteen
Template: twentysixteen
*/
@import url(../twentysixteen/style.css);

article header h1 {font-size:3em}
article header h1 {color:blue}

However, the element only partly changes. The color changes to blue, but the font-size does not. I tried a few different font sizes.

Why didn't that work?

======= :-) ======= :-) ======= :-) =======

Arthur gave the correct answer, below. For those that get here, the following works for this problem when using a child of the Twenty Sixteen theme.

/*   
Theme Name: IBD Page
Description: IBD Page is based on Twenty Sixteen
Template: twentysixteen
*/
@import url(../twentysixteen/style.css);

/* Making the article titles 20 point */
.content-area .site-main article header h1,     
article .entry-header .entry-title a 
    { font-size: 20pt; }
wordpress css
2 Answers

your statements should end with a semi-colon and because both statements relate to the same tag I would put both of them together _

try this 

article header h1 {
  color : blue;
  font-size: 3em;
}
user_37110830

Twenty Sixteen sets the font size itself, and its CSS selectors are probably more specific than yours. If you make your selectors more specific, your rules will override the parent theme's rules.

See developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more detail on specificity.

user_17810750
Related