Menu
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; }
400
To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.”
To make text bold in HTML, use the <b>… </b> tag or <strong>… </strong> tag. Both the tags have the same functioning, but <strong> tag adds semantic strong importance to the text.
For example, to bold a title in an HTML document, it is better to use the <H1> and </H1> through <H6>and </H6> tags, instead, since these tags apply bolding but also indicate important text titles in a web page.
You can use font-weight property, <b> element, and <strong> element to make text bold in CSS. What is the font-weight CSS? The font-weight property is used to set the boldness of the font in CSS.
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.
112
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
