Bold font in h1, h2, h3 titles - 92590

Question

I need help in finding out how to get a bold font in Elegant theme in WordPress, but only in the heading areas (h1, h2, h3 etc), since I have no problem getting it in the text body.

I've tried, even though in the editor I'm getting bold headings, it's not the case once I publish the page, no matter what changes I make.

I'm including the code (not full but the part that matters) - none of the changes in 'h1' area are reflected once published, not even the font type, except the size. I'm not a coder so maybe there's something I'm missing. Please, help:

/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }


blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }


/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body { line-height: 18px; font-family: 'Droid Sans', Arial, sans-serif; font-size: 15px; color: black; text-shadow: 1px 1px 1px #ffffff; background-color: #15191f; }

a { text-decoration: none; color: #00b7f3; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }

h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #111; letter-spacing: -1px; line-height: 1em; font-weight: bold; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #111; }
h1 { font-size: 30px; font-weight: bold; font-family:"Times New Roman", Times, serif;}
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 18px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
    blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#top { background: url(images/top-bg.png) repeat-x; }
    #top-wrapper { background: url(images/top-wrapper-bg.jpg) no-repeat top center; }
        #top-content { background: url(images/top-content-bg.png) repeat-x bottom left; }
            #bottom-light { background: url(images/bottom-light-bg.png) no-repeat bottom center; }
                .container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
                    #top .container { padding-bottom: 60px; } 
                        #logo { margin: 65px 13px 35px; }
                        #menu { background: url(images/left-menu-bg.png) no-repeat top left; padding-left: 11px; height: 49px; }
                            #menu-right { background: url(images/right-menu-bg.png) no-repeat top right; padding-right: 11px; height: 49px; }
                                #menu-content { background: url(images/content-menu-bg.png) repeat-x; height: 49px; }
                        #social-icons { float: right; margin-right:23px; margin-top: 17px; }
                            #social-icons a { padding-left:4px; }       

#content { background: url(images/content-bg.png); border-top: 1px solid #ffffff; } 
    #content-shadow { background: url(images/content-shadow-bg.png) repeat-x top left; padding-top: 70px; padding-bottom: 37px; }   
        #services { margin-bottom: 40px; }
            .service { margin-right: 45px; width: 238px; float:left; position:relative; padding-left: 52px; }
                .last { margin-right: 0px; }
                    img.icon { position:absolute; top: 0px; left: 0px; }
                    .service h3.title  { font-size: 24px; margin-bottom: 8px; color: #1f262d; }
                    .service p { line-height: 21px; }
                    .service a.readmore { background:url(images/readmore.png) no-repeat right bottom; color:#1c2329; display:block; font-size:11px; height:24px; line-height:24px; padding-right:10px; text-shadow:1px 1px 1px #ffffff; display:block; float:right; }
                        .service a.readmore span { background:url(images/readmore.png) no-repeat;
display:block; height:24px; padding-left: 12px; padding-right: 2px; }
                        .service a.readmore:hover { color: #000; }

Comparable

Post a link to the actual blog. Are you saving your changes? How are you editing the CSS file? – Priesthood

Normally its best to go to Appearance > Theme Options > Design and enter your custom CSS – Palingenesis

Post a link so we can see the blog. There's the possibility that additional stylesheets are being added that might be overwriting your styles. – Gromyko

Answer 1

Try adding

h1{
font-weight: bold;
}

to your external css file, or substitute your

<h1> your text here </h1>

with

<h1 style="font-weight: bold"> your text here </h1> 

Washcloth

Yup, h1{ font-weight: bold; } Works! but font-weight with values 100, 200, 300, 400, 500, 600, 700, 800 to 900 doesn't work (probably anymore, it it used to) for heading tags. – Urine

Make some experiments here: w3schools.com/cssref/tryit.asp?filename=trycss_font-weight - change one of the <p> into <h1> both in body html and in CSS, then change the font size. It seems that the maximum is 600, but lower values still work. – Washcloth

Answer 2

Try CSS font-weight Property Values as:

h1, h2, h3, h4, h5, h6 {

  font-weight:100;

}

You can adjust values from 100, 200, 300, 400, 500, 600, 700, 800 to 900. The property value as 900 is the thickest and 100 is the lightest.

Cubature

It's probably good to mention that many fonts out there do not support all 9 distinct weight values. For font-weight: bold;, that is equivalent of using font-weight: 700. – Byran

Answer 3

Try adding

h1, h2, h3, h4, h5, h6 {

  font-weight:100;
}

Your HTML code,

<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here </h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>

Code example result,

h1, h2, h3, h4, h5, h6 {

  font-weight:900;

}

<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here </h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>

You can adjust the values from 100, 200, 300, 400, 500, 600, 700, 800 to 900. Property value is 900 as solid and 100 as light.

Deauville