Jump to content

Need help: using <strong> in html5


vmars316
 Share

Recommended Posts

Hello & Thanks ,

I Need help: using <strong> in html5

 

css has this for strong .strong {font : strong;}

and html has this <strong class="strong">Content:</strong> Sed placerat accumsan ligula.

Pls , See code below:

What am I doing wrong?

<!DOCTYPE html><!-- http://csslayoutgenerator.com//~Notepad_vmProjects/~PerfectOutlines-Html/PerfectOutline-index_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2-Short.html--><html><head>	<meta charset="utf-8" />	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->	<title></title>	<meta name="keywords" content="" />	<meta name="description" content="" />	<link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"><style>/* Eric Meyer's CSS Reset */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, 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,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}/* End of Eric Meyer's CSS Reset *//*  ===============Begin myStuff================  */article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {	display: block;}body {	font: 12px/18px Arial, sans-serif;}/* Begin of styles for the demo (you can remove them) */a.expand {	width: 90px;	display: block;	margin: 10px 0 0;}a.expand:hover {	height: 500px;}/* End of of styles for the demo */.wrapper {	min-width: 1000px;	max-width: 1000px;	margin: 0 auto;}.strong {font : strong;}/* Header-----------------------------------------------------------------------------*/.header {	height: 75px;	background: #FFE680;}/* Middle-----------------------------------------------------------------------------*/.middle {	border-left: 250px solid #B5E3FF;	border-right: 250px solid #FFACAA;	position: relative;}.middle:after {	display: table;	clear: both;	content: '';}.container {	width: 100%;	float: left;	overflow: hidden;	margin-right: -100%;}.content {	padding: 0 20px;}/* Left Sidebar-----------------------------------------------------------------------------*/.left-sidebar {	float: left;	width: 250px;	position: relative;	background: #B5E3FF;	left: -250px;}/* Right Sidebar-----------------------------------------------------------------------------*/.right-sidebar {	float: right;	margin-right: -250px;	width: 250px;	position: relative;	background: #FFACAA;}/* Footer-----------------------------------------------------------------------------*/.footer {	height: 50px;	background: #BFF08E;}</style>	</head><body><div class="wrapper">	<header class="header">		<strong>Header:</strong> Lorem ipsum dolor sit amet.	</header><!-- .header-->	<div class="middle">		<div class="container">			<main class="content">				<strong class="strong">Content:</strong> Sed placerat accumsan ligula.<a href="#" class="expand">Expand column</a>			</main><!-- .content -->		</div><!-- .container-->		<aside class="left-sidebar">			<strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc.<a href="#" class="expand">Expand column</a>		</aside><!-- .left-sidebar -->		<aside class="right-sidebar">			<strong>Right Sidebar:</strong> Integer velit.<a href="#" class="expand">Expand column</a>		</aside><!-- .right-sidebar -->	</div><!-- .middle-->	<footer class="footer">		<strong>Footer:</strong> Mus elit Morbi mus enim lacus.	</footer><!-- .footer --></div><!-- .wrapper --></body></html>

Thanks..vm

Link to comment
Share on other sites

Try...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>strong</title><style>.strong{font-weight:bold;}</style></head><body><p class="strong">abc</p><p><strong>abc</strong></p><p><b>abc</b></p></body></html>
Link to comment
Share on other sites

Aha !

I tried both of your helps , within the context of my html , still neither of them worked .

Turns out there was a <link href= here :

<meta charset="utf-8" /><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title></title><meta name="keywords" content="" /><meta name="description" content="" /><link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"> <style> 

When I commented it out ,

<meta charset="utf-8" /><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title></title><meta name="keywords" content="" /><meta name="description" content="" /><!-- <link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"> --><style> 

Then this

strong {font: 16px bolder; }                                                  /* some of the values that can be used normal/bold/bolder/lighter */.strong {font: 32px bolder; /* some of the values that can be used normal/bold/bolder/lighter */} 

all started working .

 

Hmm..

Does that mean that

rel="stylesheet"

takes precedence over local <style> ?

 

Thanks..vm

 

 

 

Link to comment
Share on other sites

First of all this is silly...

<strong class="strong">Content:</strong>

...because you don't need to do this -- it is redundant... but your "Eric Meyer's CSS Reset" clears out the styling for the strong tag so then you need to re-style it...

strong {font-weight:bold}

...or....

.strong, strong {font-weight:bold}

...but you probably don't need a strong class unless you want to do this...

<span class="strong">Content:</span>

..also your link should look like this...

<link rel="stylesheet" type="text/css" href="mycssfilename.css">

--last edit 11:48pm cdt aug24--

Link to comment
Share on other sites

Eric Meyer's CSS Reset" does NOT clear styling for strong, as no reference to change strong boldness exists, so it remains as bold, true! using .strong class on strong element that uses bold is pointless as it is already bold. so options are

 

shorthand

 

font: that requires at least font size to adjust boldness which is other than bold IF used on strong element to see the difference

 

OR

 

font-weight: that will only require a value other than bold IF used on strong element to see the difference

Link to comment
Share on other sites

Hmmm... well I created a simple test file and Eric Meyer seemed to be guilty...

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title>t</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="xxxxxx.css" rel="stylesheet" type="text/css"> <style>    /* Eric Meyer's CSS Reset */    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, 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,    table, caption, tbody, tfoot, thead, tr, th, td,    article, aside, canvas, details, embed,    figure, figcaption, footer, header, hgroup,    menu, nav, output, ruby, section, summary,    time, mark, audio, video {    	margin: 0;    	padding: 0;    	border: 0;    	font-size: 100%;    	font: inherit;    	vertical-align: baseline;    }    /* HTML5 display-role reset for older browsers */    article, aside, details, figcaption, figure,    footer, header, hgroup, menu, nav, section {    	display: block;    }    body {    	line-height: 1;    }    ol, ul {    	list-style: none;    }    blockquote, q {    	quotes: none;    }    blockquote:before, blockquote:after,    q:before, q:after {    	content: '';    	content: none;    }    table {    	border-collapse: collapse;    	border-spacing: 0;    }    /* End of Eric Meyer's CSS Reset */   /* .strong, strong {font-weight:bold} */ </style> </head>      <body>         <strong class="strong">Strong content classed strong</strong><br/>    <strong>Strong content</strong><br/>    <b>Bold content</b><br/>     <p>Normal content</p> </body> </html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...