Streaming live at 10am (PST)

Selecting "HTML" tag as root selector to style font-size with CSS


#1

HI,
is there anyway to select HTML tag , and style it directly ?
because I would like to change the global font-size setting by applying CSS on root selector . so the way I can easily change the entire page font-size based on the root font-size
for example


@media only screen and (max-width:768px) {
       html{
		font-size: 0.75em;   /*browser default setting is 16 px,   16 * 0.75 = 12 px */
  	}
}



.others_selectors{
     font-size: 1 rem    /* I use rem for most of selectors, so later on I only need to change the html font-size setting */
}

#2

You can add a custom code element in your page and style HTML from there in a CSS snippet. Although I think I do that on the body elements and that works pretty well.


#3

As @vincent states, you have to add <style>html{}</style> either under the Project's Settings > Custom Code > Body section which will apply it site wide (but will not reflect that attribute in Designer view). OR do it for each individual page (which is annoying, but will render the attribute in Designer view). You do this in Designer view, under each page's Settings > Custom Code section. This isn't preferable, as you have to remember to carry that over to every single page.

The main reason you want to set the font-size on html as opposed to body is because rem only inherits from html.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.