161

When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.

Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?

How to do that?

2
  • 1
    How exactly are you currently setting the font family, size...?
    – thecoop
    Oct 15, 2010 at 12:36
  • This answer should reside in the default user agent stylesheet, but I couldn't find in there.
    – blagus
    Sep 22, 2020 at 22:44

6 Answers 6

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

The asterisk implies all elements.

9
  • 22
    This works, but it's not best solution. When the browser sees the '*' it loops over all HTML elements in the page and apply the CSS to them. Even for elements where the rule doesn't make any sense. Depending on the size of the HTML this can slow the page rendering. Oct 16, 2010 at 7:37
  • 7
    Agree, but it applies the CSS to ALL elements, as BugAlert asked for. If one wants to effect ALL elements, one can expect the performance to reduce a little. :)
    – Bazzz
    Oct 22, 2010 at 14:05
  • 1
    You can also add !important at the end of each style declaration to be safe against other style declarations outweighing this one.
    – S..
    May 14, 2014 at 7:12
  • 4
    I know it's been 5 years, but I'm surprised nobody has noticed until now: you should never specify just a Windows font in "font-family" (unless of course it's a webfont) - Arial,helvetica,sans-serif is more compatible.
    – rob74
    Apr 15, 2015 at 18:14
  • 8
    html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;} Font's inherit, and if you really want to avoid overrides use: *,:before,:after{font-family:inherit;} if you must use a universal selector, use inheritance instead.
    – darcher
    Jun 5, 2015 at 16:15
22

If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Edit: you may want to read up on CSS resets; see threads like this one

13

I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.

Try Eric Meyer's reset.css.

3
  • In order to use this reset.css, do I just link the stylesheet into my page or do I have to tweak it? I basically need to have the same font family and size across all major browsers. Does the reset.css help me do that by default? Mar 30, 2014 at 18:29
  • 2
    I tend to copy and paste it at the beginning of my stylesheet rather than linking it separately, saves a HTTP request. It will help you set consistent styles across browsers because it zeroes everything: the only styles will be ones that you write.
    – Chris Cox
    Mar 31, 2014 at 0:18
  • Thanks! I did try it and it has solved most of my problems. However, I still can see a difference in font size between Chrome and Firefox in spite of my style sheet's specifications of the same. Any ideas about this? Also, is this a good practice? Mar 31, 2014 at 0:37
9

you can set them in the body tag

body
{
    font-size:xxx;
    font-family:yyyy;
}
3
  • 16
    This is not accurate because most browsers will not apply this font to some elements (the elements won't inherit the font-style)
    – travis-146
    Apr 6, 2012 at 18:13
  • @travis-146 what browsers? which elements? you know there is a spec that all browsers must follow.
    – Bamieh
    Jul 9, 2016 at 20:09
  • 1
    @Bamieh one specific example (that brought me here, actually) on Chrome 72 is that it doesn't apply the font to text within a button or select menu. Feb 9, 2019 at 1:10
3

If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.

2

If you want to set styles of all elements in body you should use next code^

  body{
    color: green;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.