How to Specify Font Attributes for All Elements on an HTML Web Page

How to specify font attributes for all elements on an html web page?

* {
 font-size: 100%;
 font-family: Arial;
}

The asterisk implies all elements.

Set font-size for all elements with a specific font-family with pure css, no Javascript

Is there a way to use the font-family as a css-selector?

No, that is not possible.

If the font-family was applied via inline style attribute everywhere, then you could perhaps use an attribute selector on that.

But for styles originating elsewhere, no such selector exists.

Set font-family for all elements

You could avoid restating by simply setting them all in one go:

html,body,buttons,input,textarea,etc {
    font-family: whatever font you want;
}

That's probably the simplest way if you're not using *

How can I set font size for my entire HTML webpage using CSS?

Set your font family and size in the body tag, and with a few exceptions, all the elements in your page will inherit that size:

body{
   font-family: Verdana, sans-serif;
   font-size: 12px
}

Optionally, you can set any of your elements to an em font-size:

p{
   font-size: 1.5em;
}

1 em is equal to the font-size of an element's parent, so in this case the p tag is one and a half times the size of the div tag. Since the div tag is 12px (inherited from body), the p tag is 18px:

body{

   font-family: Verdana, sans-serif;

   font-size: 12px

}

p{

   font-size: 1.5em;

}

<div>

   <p>I'm in a p tag, my font size is 18px</p>

</div>

Setting font-size for all text except h1 h2 etc

Use the :not selector with those "unwanted" elements:

.mybox *:not(h1):not(h2):not(h3) {

  font-size: 13px;

}

<div class="mybox">

  <h1>foo</h1>

  <h2>bar</h2>

  <h3>Hans</h3>

  <label>Gruber</label>

  <p>Goku</p>

  <div>Yoda</div>

</div>

Elements in one page and set one font-size but display differently?

TL;DR: Some mobile browsers (and Chrome inspector) auto-scale text when they believe they can safely do so. The overflow:auto; is one of those instances. To prevent this behaviour, use -webkit-text-size-adjust: 100%;

According to drafts.csswg.org:

One common problem with this type of interaction occurs when the user wants to read a large block of text. It might be that a block of text within this desktop-formatted page might be laid out so that when the user zooms in so that the text is large enough to read, each line of text is wider than the display on the small device. This means the user needs to scroll side to side to read each line of text, which is a serious inconvenience to the user.

One way for software that displays Web pages or other CSS-formatted content on a mobile device is to make some of the text larger so that this problem does not occur. The goal of this enlargement is to make the text big enough so that when the block it is in is scaled to the width of the display, the text is large enough to read. At the same time, this needs to be done with minimal disruption to the overall design of the page.

Mozilla also explains the mobile text size adjustment:

Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually 800 or 1000 pixels wide. To map the wide layout back to the original device size, the browser either shows only part of the whole render, or the viewport is scaled down to fit.

Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.

According to Mozilla, overflow: auto; establishes a new block-formatting context:

The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.

Because the overflow:auto; is breaking out of its parent context, some mobile browsers (and obviously Chrome's web inspector as well) are free to apply the mobile text size adjustment. This behaviour can be disabled by using:

body, html {
    -webkit-text-size-adjust: 100%;
}

The #app div and it's children (except for the #wrapper div with the overflow) inherit the 750px width from the viewport meta.

Set font for whole page with ONLY html

The way to do it in HTML with inline styles would be:

<body style="font-family: sans-serif">

This will set the global font to sans-serif

You can also put CSS inside a <style> tag like this:

<style>
    * {
      font-family: sans-serif;
    }
</style>

This will give every element a font of sans-serif

For custom fonts you can use Google Fonts

Edit this is the way to achieve it with pure HTML:

After the <body> tag, add the <font> tag with the face attribute of the font you'd like to use. Example usage:

Fiddle Demo:

http://jsfiddle.net/yHRU7/

HTML:

<body>
    <font face='verdana'>
        <div class='htmlVersion'>No css</div>
    </font>
    <div class='cssVersion'>No Extra Html</div>
</body>

CSS:

.cssVersion {
    font-family: verdana;
}

As you can see there is no difference between the results. I advise that normal stylesheets are used - the method used in the CSS version. This is more maintainable and standard.

override font styles- every element of the page

Add !important to the font-size declaration, too:

* {
 font-size: 100% !important;
 font-family: Arial !important;
}

If you are using this in a user style sheet (as the words “trying to injecting font styles for web pages on a web browser” suggest), then your rule cannot be overridden.

If, on the other hand, this is just part of an author style sheet, then it can be overridden by a user style sheet, and there is nothing you can do about it. It will not be overridden by a browser default style sheet, as they don’t use !important. With respect to other author style sheets, the cascade rules imply that you cannot be overridden except by a rule that uses !important, too.

In a fight between author style sheet rules that both have !important, the more specific wins, with specificity exactly defined by CSS specifications. Between equally specific settings, the one that comes latest wins.

The selector * has the lowest possible specificity 0,0,0,0. For any selector, you can always construct another selector with a higher specificity. However, a CSS rule inside a style attribute for an element is considered as having the highest specificity.

So if you know which other CSS rules will be used, you can beat them by adding selectors with a higher specificity in your selector list.

---

Related Topics