Change Your Font Sizes in CSS Editing

The parts of the website which have the largest fonts attract the most attention, but they won’t stand out if the everything around them is in a large font too. The use of varying font sizes on your website adds pleasant contrast.
Font Sizes in Various Content Blocks
Many of Webgarden’s design templates use the same font size for the entire website, like the design template below which uses font size 0.75em everywhere.
01 Original CSS edited with marks no red.png
In this scenario, the text on your actual website would look like this.
02 All sections have the same font size.png
Try adding some pleasant contrast by using different font sizes in various content blocks. You can do this by editing the CSS in your design template.
Your CSS can include selectors such as .static (for both the header and footer), .panels (for the left and right columns), and .display (for the content block). Or you can adjust, for example, .top (for only the header) or .bottom (for just the footer). If you only want to change specific elements you can do it using highlighting.
In this design template you could delete the line beginning with .page which is underlined in the screenshot above, and replace it with the CSS highlighted in screenshot below. (Don’t forget to save.)
03 Different font sizes for different blocks with marks no red.png
Then the fonts on your website would look something like this.
04 Different font sizes on website with marks.png
Heading Sizes
You can define the sizes for each of your headings in a similar way. Don’t forget that you always need to specify a particular set of headings in the selector. The easiest way to do this is to overwrite the existing rules for the design template in CSS.
Here’s how to find the right heading (labeled as a headline) in CSS. The CSS in this screenshot is color-coded to match up with the chart below it.
05 CSS for headings with marks no red.png
In this example the headings used in the header (.top) are different from those used on the rest of the website.
06 Heading sizes with marks.png
Elements identified by the classes .static, .top, .bottom, and .panels use h1 (large), h2 (medium), and h3 (small) for headlines inserted by users. Headlines generated by Webgarden use h4 - h6.

However, for elements with the class .display it is exactly the opposite. Headlines inserted in administration use h4 (large), h5 (medium), and h6 (small). H1 - h3 are reserved for headlines generated by Webgarden.
Some design templates have headline selectors such as .parts .item > .headline h1 which is different than the usual .item > .headline h1. This is because all elements inserted by users in administration are inserted into .parts and can be found under the first of these selectors. On the other hand, headlines generated by Webgarden (for example, category names) are not in .parts. They can only be found under .item > .headline.
06/01/2015 07:36:10
info
Name
Email
Comment
Or visit this link or this one