CODEWITHSUNDEEP
htmlcss
tesicg
tesicg

Reputation: 4053

CSS: The font is bold, but it shouldn't be

HTML:

<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
    <p>
      Some text.
    </p>
</div>

CSS:

.e_ticket_font {
    font-weight: normal;
}

The HTML code is on content page, which is inside master page.

The issue is - the text is bolded out, but it shouldn't be.

How can I can get rid of it?

Upvotes: 0

Views: 1974

Answers (5)

Alex Tape
Alex Tape

Reputation: 2291

or (for each) element below .e_ticket_font:

.e_ticket_font * {
  font-weight: normal; 
}

i advice a rare use of !important in case of runaway bubbling your DOM

but mind of the selector detail.. if there is any css selector which describes the object on a directer way like...

.e_ticket_info#e_ticket_info { 
  font-weight: bold;
}

...css will pick that one with privileg!

Upvotes: 0

AmeetC
AmeetC

Reputation: 280

Dipesh's answer is correct. I'll just add a bit explanation. CSS is cascading style sheet, means the style for any element/class/id can be mentioned at multiple places and applied in the order in which they are included. In your case, some other style seems to override your style to make it bold since your snippet will not make it bold.

Considering this, as a general best practice, always target the specific elements if you are not sure if it's class will be styled somewhere else or not.

Thus, .e_ticket_font p {... is prferable than .e_ticket_font {.... If there are multiple paragraphs and you want only some of them to be different, then again use classes/ids, like

.e_ticket_font p#heading {...
.e_ticket_font p#content {...
.e_ticket_font p.specialpara {

and so on.

Another way to make it sure is to apply css inline for that element, but this should not be used generously for many elements as it affects the "structure should be separate than presentation" principle

Upvotes: 2

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

try inline css because if you don't know if there are other css classes are specified in masterpage for <P>

something like:

<div runat="server" Visible="False">
    <p style="font-weight: normal;" >
      Some text.
    </p>
</div>

it will work for sure, then you can check for other css references for <P>

Upvotes: 0

w3b
w3b

Reputation: 853

<div runat="server" Visible="False">
    <p class="e_ticket_font">
      Some text.
    </p>
</div>

CSS:

.e_ticket_font {
    font-weight: normal !important;
}

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

Try

.e_ticket_font p {
    font-weight: normal;
}

because you are not targetting p tag.

Upvotes: 4

Related Questions