Jump to content
vmars316

Need help: using <strong> in html5

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

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

There is no such value as 'strong' and if you want to use font: shorthand you will at least require a size value for it to work

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

Share this post


Link to post
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

 

 

 

Share this post


Link to post
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--

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...