jimmyguestnow jimmyguestnow - 1 year ago 83
HTML Question

Top CSS selector not applying formatting on children elements

I am currently using http://meyerweb.com/eric/tools/css/reset/ as my top level CSS. Assume that I can't change this.

So my top CSS level is something like this:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;

div .target {


<div class="target">
<strong>Please make me bold</strong>
<i>Please make me italic</i>

For some reason
font: inherit;
does not allow formatting elements to be applied to my content i.e.
, etc. I was hoping that I could use these formatting html tags within
and have them render correctly with the current structure of my CSS. Is there any possible way to edit
div p
so that this works?

jsFiddle: https://jsfiddle.net/y4c3c9cb/6/

Note: Top selector (
html, body, div,...
) can't be moved, edited, and must stay in the top level position.

EDIT Children within my
element will can be

EDIT 2: Changed HTML

Answer Source

That reset implies that you set up rules for all these tags yourself. Since it includes strong { font: inherit; }, you have to add

strong {
  font-weight: bold;

Same for italic:

i {
  font-style: italic;

...and also complete rules for all the other tags that are in the reset rule, since otherwise everything will look the same.

updated fiddle: https://jsfiddle.net/6nuogzg4/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download