jimmyguestnow jimmyguestnow - 2 months ago 7
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:

base.css

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 {
...
}


index.html

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


For some reason
font: inherit;
does not allow formatting elements to be applied to my content i.e.
<strong>
,
<i>
, etc. I was hoping that I could use these formatting html tags within
.target
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
.target
element will can be
i
,
strong
,
b
elements.

EDIT 2: Changed HTML

Answer

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/