How can I force text to “normal” (not bold) using css?


Tags: html,css,css-font-weight,important

Problem :

I have a class that I'm using to make some text navy and large:

.sectiontext {
    color: navy !important;
    font-size: large;
}

I apply it to elements like so:

<label class="sectiontext">Select a Unit</label>
. . .
<h4 class="sectiontext">Specify Recipients</h4>

The problem is that when I apply it to a label, it makes that text bold. I tried adding the following line to the sectiontext class:

font-weight: normal !important;

...but it makes no difference; I don't want to use "h4" instead of "label" for some bits of text because h4 always contains a "line break"; I wnat to be able to use this text style prior to a "select" element and several checkboxes, too, and thus not have the text "break"

But even with the "!important" added to the sectiontext class, the text remains bold. For example, compare the "Select a Unit" and "Select Report[s]" labels here with the H4 "Specify Recipients" and "Generate and Email Report" text:

enter image description here

What can I do to have a label that is not bold?

UPDATE

The only custom CSS I have is:

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: lightyellow;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.containerforplatypus {
    border: 2px solid #ccc;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 6px;
}

.margin4horizontal {
    margin-left: 4px;
    margin-right: 4px;
}

.fancyorangetext {
    text-shadow: 0 0 6px orange !important;
    font-size: xx-large;
}

.leftmargin8 {
    margin-left: 8px !important;
}

.sectiontext {
    color: navy !important;
    font-size: large;
    font-weight: normal !important;
}

...otherwise, it's just these bootstrap classes that are being used:

jumbotron
row
col-md-6
col-md-12
control-label
form-control
h3
h4
btn btn-primary
btn btn-sm

The entire HTML for those two problematic labels (in context) is:

<div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <label class="sectiontext">Select a Unit</label>
        <select class="form-control, dropdown">
            @foreach (var field in units)
            {
                <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
            }
        </select>
    </div>
</div>

<div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <div class="containerforplatypus">
            <label class="sectiontext">Select Report[s]</label>
            @foreach (var rpt in reports)
            {
                <input class="leftmargin8" id="ckbx_@(rpt.report)" type="checkbox" value="@rpt.report" />@rpt.report
            }
        </div>
    </div>
</div>

UPDATE 2

It works now, with no change; it first worked on trying fmz's suggestion, but then I tried my previous approach again, and it now works, and even without the "!important" marker:

.sectiontext {
    color: navy !important;
    font-size: large;
    /*font-weight: 400 !important; <= works */
    /*font-weight: normal !important; <= works now, as does the rule below */
    font-weight: normal;
}


Solution :

Consider using:

label {font-weight: 400 !important}

Also specify the font-size, as your label appears to be displaying a larger than normal font size.


    CSS Howto..

    WordPress admin stylesheet not showing images

    How can I make a div *not* expand to fill it's parent?

    How to get divs and anchors stacked on top of each other with the same width

    show/hide multiple text field based on radio selection html javascript

    How to change CSS when it's ng-disabled?

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How to implement easeOutBack easing in css transform animation

    How to add external css into html

    How to get a website's position setup in a way that an image is centred?

    How do I detect that facebook app is loading page to change CSS?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

    how to center anchor tag horizontally css

    How to make a curved triangle speech bubble with pseudo-elements?

    How do you put two divs next to each other so they fill up the available space

    Why my easypie number don't show inside?

    How to generate css using google chrome inspector to further use them?

    How to change the width of displayed text nested in a div?

    How to have vertical record and header in HTML table using CSS

    How to center an input field in HTML / CSS / Bootstrap

    How should I convert this PSD to HTML & CSS Menu

    How can I place html text on top of a canvas flot chart?

    How to create color custom scrollbar in pure css? [closed]

    How to ensure a webpage's content extends to the bottom of a webpage using only CSS

    How to generate CSS markup for non-designers

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    how to calculate css rules priority in Javascript?

    howto create the iPhone Contacts header scroll Effect for html?

    How to have multiple CSS color transitions on a single text line?

    How to figure a text box set of characters into a text box figure 2 effect?