I am trying to make all my text on my website bold by default and I thought CSS could do this if I made a line of code in my stylesheet that goes similarily like this: body {font-weight: bolder;} This isn't working though, although my font-family is working!, all my text is normal sized and not bold. Here is the rest of my stylesheet. I would really appreciate it if anyone could tell me how to do solve this: body {font-weight: bolder; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: bolder; background-color: #E0F8FF; margin: 0px 0px 0px 0px;} table.main {width: 998px; border: 0px; border-spacing: 0px; margin: auto; padding: 0px; background-color: #336699;} table.main2 {width: 998px; margin: auto; border-style: solid; border-color: #FFFFFF; border-width: 1px; border-spacing: 0px; padding: 8px;} table.zipcodebox {background-color: #33CCFF; border-color: #FFBD32; border-style: solid; border-width: 1px; width: 404px; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px;} table.innerzip {margin: auto;} td.redline {background-color: #FF0000; height: 5px;} td.topnav {background-color: #FFFFFF; height: 24px; text-align: center; font-size: 13px;} h1.main {font-size: 26px; text-align: center;} h2.main {font-size: 20px; text-align: center;} h3.link {font-size: 10px; font-weight: normal;} h4.green {color: #00CC00; font-size: 18px; text-decoration: underline;} p.topright {font-size: 18px; text-align: center;} p.topright1 {font-size: 24px; text-align: center;} p.topright2 {font-size: 30px; text-decoration: underline; text-align: center;} p.style1 {font-size: 13px;} p.style2 {font-size: 10px;} p.bold {font-size: 13px;} p.green {color: #00CC00;} p.bcugreen {color: #00CC00; text-decoration: underline; text-align: center;} p.biggreen {color: #00CC00; font-size: 20px; text-align: center;} p.boldcenter {text-align: center;} p.bcu {text-align: center; text-decoration: underline;} p.smallcenter {text-align: center; font-size: 10px;} p.smallleft {text-align: left; font-size: 14px;} p.smallcenter1 {text-align: center; font-size: 12px;} p.smallleft1 {text-align: left; font-size: 13px;} ul.type1 {list-style-type: circle;} ul.type2 {padding-left: 0em; list-style-type: none; list-style-position: outside;} em {text-decoration: underline; font-style: normal;} em.big {text-decoration: underline; font-style: normal; font-size: 18px;} em.small {text-decoration: none; font-size: 12px;} em.bu {text-decoration: underline; font-style: normal;} em.smallbold {text-align: center; font-size: 13px;} em.red {text-decoration: none; color: #FF0000;} em.black {text-decoration: underline; font-size: 15px;} em.green {color: #00CC00; font-size: 18px; text-decoration: underline;} em.green1 {color: #00CC00; font-size: 18px;} img {border-width: 0px;} hr.redbar {background-color: #FF0000; height: 5px; border: 0px;} a.type1:link {color: #000000; text-decoration: none;} a.type1:visited {color: #000000; text-decoration: none;} a.type1:hover {color: #FF0000; text-decoration: none;} a.type2:link {color: #00CC00; text-decoration: none;} a.type2:visited {color: #00CC00; text-decoration: none;} a.type2:hover {color: #FFFFFF; text-decoration: none;} a.type3:link {color: #0000FF; text-decoration: none;} a.type3:visited {color: #00CC00; text-decoration: none;} a.type3:hover {color: #FF0000; text-decoration: none;} a.type4:link {color: #000000; text-decoration: underline;} a.type4:visited {color: #00CC00; text-decoration: underline;} a.type4:hover {color: #FF0000; text-decoration: underline;} a.type5:link {color: #000000; text-decoration: none; font-size: 26px;} a.type5:visited {color: #00CC00; text-decoration: none; font-size: 26px;} a.type5:hover {color: #FF0000; text-decoration: none; font-size: 26px;} Thank you, Ryan
Another option is to set a numerical value as your default font weight. But why you'd want to use bold text for body copy is beyond me, as it really hurts the usability (not to mention readability, and possibly even the accessibility as far as screen readers are concerned) of the site as a whole.