vmars316 Posted August 24, 2015 Share Posted August 24, 2015 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 More sharing options...
davej Posted August 24, 2015 Share Posted August 24, 2015 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 More sharing options...
dsonesuk Posted August 24, 2015 Share Posted August 24, 2015 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 */} Link to comment Share on other sites More sharing options...
vmars316 Posted August 25, 2015 Author Share Posted August 25, 2015 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 More sharing options...
davej Posted August 25, 2015 Share Posted August 25, 2015 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 More sharing options...
dsonesuk Posted August 26, 2015 Share Posted August 26, 2015 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 More sharing options...
davej Posted August 26, 2015 Share Posted August 26, 2015 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 More sharing options...
vmars316 Posted August 29, 2015 Author Share Posted August 29, 2015 Ok , Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now