Changing fonts and font sizes

Hmm.
If you’re more specific I can help e.g. all pages, I want the title bigger or all posts I want the content bigger or just the category tags or whatever.

As a general rule of thumb, keeping it simple:

I use Firefox and ‘hack the web’ addon. It might be worth installing FF just for that – but other browsers might have similar extensions. When mousing over an element e.g. a header it’ll tell you what class that element has e.g. h1 class: page

In the top options box you could then put something like this:

<style type="text/css">
h1.page {font-size:1.5em}
</style>

Ems change font sizes proportionately so that changing one element’s font size higher up the CSS chain of command changes all the font sizes below it and are used in the theme but you could use pixels which change just the one thing you want

<style type="text/css">
h1.page {font-size:20px}
</style>

If you want to change lots of font-sizes do it like this:

<style type="text/css">
h1.page {font-size:20px}
h3.post {font-size:30px;}
</style>

Not all elements have obvious classes e.g. paragraph elements. So you then mouse over the container that they’re in and it might say div, class:page (among other things)

So then you’d define that paragraph element like this:

<style type="text/css">
div.page p{font-size:30px;}
</style>

meaning the paragraph element p which is in the div with class page (the dot means class)

Or you can View Source and try and work it all out but it’s more complicated that way.

I recommend ‘HTML, XHTML and CSS’ by Elizabeth Castro – it’s excellent. It’s how I learnt. Might be worth it if you’re going to be investing time over the next however many months or years.

Thanks for that explanation Richard. I’ve got Firefox installed and used the web developer tool Style Editor to view the style sheet. I’m using a child theme and at first I could only see the css file for that and then I realised that the main css file was referred to as inline style sheet and I could see all the coding for that.

I understand the concept of colours, font style and sizes from my HTML days (although “ems” are something new to me) I also understand that if I want to change something I have to add any changes to the child theme css file. Where I’m struggling is finding and recognising the relevant parts of the main css file that I need to change. This is what I want to do:
1. amend the text size, colour and font style of the body of a page and a post
2. amend the text size, colour and font style of the links in the menu of the two sidebars
3. amend the text size, colour and font style of the h1, h2, h3 for pages and posts.

My problem is how to I identify which elements of the main css file do I need to copy across to my child css file and amend. I know I can probably do all this as I create a page using the editor (I have added the advanced editor plugin to allow me to change font sizes) but this means doing it individual rather than have the right style as a default.

I hope I’ve explained that?

This is an incredibly flexible theme as it is, one of the best available, but I have my own likes and dislikes over style which is a subjective thing I know (as is all design)and I would like to change the text styles of the various elements I’ve mentioned above.

Thanks again for all your help.
Tony

Finding the relevant part of CSS file – no need. Just add your styles into the child theme style css. They’ll overwrite anything that comes before. If they don’t overwrite it then you just need to be more specific – for example if you put div.post {color:red;} in and it doesn’t change a font color then you can go div.post p {color:red;} or body.post div.post p{color:red;} (just an example)

If you’re using ‘Web Developer’ (I do as well) then CSS / Edit CSS’ allows you to real-time test what works and what doesn’t. Just place it in the bottom of the ’embedded styles’ stylesheet to get an idea of what works.

‘Hack the web’ and ‘Aardvaark’ make life a lot simpler. FF also comes with an ‘Inspect the element’ tool (right click anywhere on the page).
Click the square with an arrow in it to get an idea of element names and classes. Much the same as ‘Aardvark’ and ‘Hack the web’ but lots better once you get used to it.

Generally speaking you’re looking at something like this:
Pages only

div.page {font-family:Arial,Verdana,Serif;font-size:14px;color:blue;}

Posts only (multiple and single)

div.post {font-family:Arial,Verdana,Serif;font-size:14px;color:blue;}

Single posts only

div.single-post {font-family:Arial,Verdana,Serif;font-size:14px;color:blue;}

Posts and pages

div.page, div.post {font-family:Arial,Verdana,Serif;font-size:14px;color:blue;}

Sidebars – change left to right for right sidebar

div.left-sidebar-item a:link,
div.left-sidebar-item a.url:link{
color:#653301;font-family:arial;font-size:12px;
}

div.left-sidebar-item a:visited,
div.left-sidebar-item a.url:visited{
color:#653301;font-family:arial;font-size:12px;
}

div.left-sidebar-item a:hover,
div.left-sidebar-item a.url:hover{
color:#653301;font-family:arial;font-size:12px;
}

H1 on pages

div.page h1{font-family:Arial,Verdana,Serif;font-size:14px;color:yellow;}

H1, h2, h3 on posts

div.post h1, div.post h2,div.post h3{font-family:Arial,Verdana,Serif;font-size:14px;color:yellow;}

Thanks for that guidance Richard. I’ll have a go over the weekend and post on Monday if I have any problems
Thanks again
Tony

The headings code all worked fine! Just got to try the sidebar code now
Thanks, really appreciate your support.
Tony

Sorry, the div.post headings code doesn’t seem to work headings don’t pick up the colour, any thoughts?
This is what I’ve used
}
div.post h1 {font-family:Arial,Verdana,Serif;font-size:24px;color: #1f3fc1;}
}
div.post h2 {font-family:Arial,Verdana,Serif;font-size:22px;color: #1f3fc1;}
}
div.post h3 {font-family:Arial,Verdana,Serif;font-size:18px;color: #1f3fc1;}
}
div.post h4 {font-family:Arial,Verdana,Serif;font-size:16px;color: #1f3fc1;}

Yep. If this is the CSS you’ve used then you’ve added an extra bracket between each rule. This place is always a good place to go when you’re totally stuck:

https://jigsaw.w3.org/css-validator/#validate_by_input

Thanks Richard all working fine now, didn’t spot the extra bracket. And that link is going to be a lifesaver for me! Thanks for pointing me in their direction!
Thanks again
Tony