Can anyone explain why the <strong> element isn't effective, yet CSS is successful in styling elements?

<span class="bold">Some Title</span>
.bold
{
    font-weight:bold;
}

When using the HTML5 doctype and the Google font, some users have noticed that text rendered with <span class="bold"> appears bold, while text wrapped in <strong> does not. Has anyone else encountered this issue?

One possible explanation could be a CSS reset affecting the styling of <strong>. Here is an example of a CSS reset:

/** 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;
}

Answer №1

If you find that strong text is not appearing bold, the issue may lie with the CSS reset.

The font: inherit style, along with multiple selectors, results in all font styles being inherited from the parent element. Since the default weight is typically normal, strong text loses its boldness unless explicitly stated:

strong { font-weight: bold; }

(It's also important to reset styles for other elements such as b, em, i, code elements, blockquote elements, tables, headings, lists, and more.)

Answer №2

include the following in your CSS:

strong{
 font-weight:bold;
}

You may need to add this if you have reset the styling for this tag elsewhere.

Answer №3

Resetting styles can have unexpected consequences beyond just padding and margins, as pointed out by BoltClock. For example, using font:inherit could disrupt the default font display behavior in your browsers.

Answer №4

After reviewing BoltClock's response, I made an interesting discovery that using the complete tag names when closing tags is essential for proper functionality. Without the correct closing tag, subsequent elements like the STRONG tag may not work as intended.

<H1> heading </H1>

Instead of,

<H1> heading </>

Answer №5

The problem I encountered was with Angular Material's .mat-option class. It seemed that using <b> or <strong> didn't quite work well with their font. However, switching to a different font resolved the issue for me.

Answer №6

The elements tab will display the strong tag with a strikethrough (invalid) when using em, s, or any other tag after checking the CSS.

To fix this issue, include the following code in your main.css file:

b,
strong * {
  font-weight: bold !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with the placement of the bottom background when viewed in responsive mode

I'm encountering an issue with the placement of a bottom white image when I switch to responsive mode. It seems to not align at the bottom of the parent ul element as expected. If possible, could you provide assistance in addressing this issue? The i ...

No value is stored in the Javascript variable

https://i.sstatic.net/iE5N5.png I am currently using an xml file as a database for my website, with a table that displays all the products. Adding a product to the xml automatically updates the table (refer to the image). Now, I want to implement the func ...

Transition Effects in Bootstrap Navbar Hover Menu

I recently came across this codepen showcasing a CSS transition for achieving a sliding effect on hover, which can be found here. However, I am having trouble implementing it in my Bootstrap navigation bar. Could it be incompatible with the menu in Boots ...

Using several Bootstrap carousels on a single page

Currently, there are three bootstrap carousels displayed on a single page. These carousels are generated by a PHP loop, with the IDs always starting off as "carousel". The issue arises because all the carousels initially have the ID and control href set ...

Load MP3 or MP4 files upon initial loading

I am trying to automatically play an MP3 audio file as soon as my page loads, ideally using JavaScript. The audio should only play once and at the beginning Despite referencing W3Schools and Mozilla documentation on the audio element, I couldn't get ...

Beginner in html, css, and javascript: "Tips for saving jsfiddle demos?"

Recently, I developed an interest in JavaScript and CSS and came across some impressive examples on jsfiddle. I was wondering if there is a way to "export" these examples to my computer. Simply copying and pasting doesn't seem to work. How can I modi ...

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

Step-by-step guide on replicating the style of a div class

I'm attempting to create a comments counter div that changes color based on the number of comments. If there are 0 comments, the div should be red, and if there are more than 0 comments, the div should be blue. However, I am encountering an issue with ...

Styling tooltips using only css - Dealing with overflow issues

What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML: <div id="test"> <a title='Sample tooltip& ...

Achieving the full height of a parent element for a relatively positioned child

I am trying to create a layout with specific height requirements. Here is the code snippet: body, html { height: 90%; } #content{ width: 100%; height: 100%; } #sidebar { position: relative; width: 200px; float: left; height: 100%; backg ...

What is the best way to cut off multiple lines of text and display the remaining strings at the

Currently, I am working on a project that involves implementing a gallery feature. The challenge lies in displaying file names which can be quite lengthy, and we are restricted to showing only 2 lines of text. While this can be achieved using line clamp an ...

Creating personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

When SVGs are dynamically loaded, the SVG fill with "url(#foo)" disappears

Within my AngularJS web application, I am dynamically loading various SVGs and adjusting the opacity of their layers. Some paths within these SVGs have fill pattern properties like this: <defs> <pattern id="glass-floral" patternUnits="userSpace ...

When I switch to mobile view, my navigation menu vanishes

Currently in the process of creating a website using WordPress, specifically with a divi theme and utilizing a windows operating system. It seems that everything appears correctly on desktop, however when resizing the window or viewing the site on a mobile ...

What is the best way to set up a website subdirectory and connect a button to it?

A group of friends and I recently created a real-life version of Among Us, but we think it could be even better if we had a website to go along with it. After doing some research and learning about HTML, CSS, JavaScript code, as well as websockets, I manag ...

Decrease the transparency of the background image when scrolling, limit the minimum transparency allowed

I'm attempting to achieve a unique effect with the background image, where its opacity reduces on scroll to a minimum of 0.5 once it goes past the landing page. I've been using vanilla JavaScript for this purpose. I initially tried incorporating ...

Automatically shift focus after being focused on

I recently created a piece of jQuery code for a mobile website. Whenever I tap on the delete button, it erases the input and directs the focus to another input area. However, it then automatically loses focus after using the focus() method. $(document). ...

Traverse a deeply nested JSON structure

I need assistance with looping through a complex JSON object using only JavaScript. My goal is to log each item along with its properties into the console. const nested_json = { "item1":{ "name": "banana", ...

What could be the reason behind the jPlayer video not playing?

$("#jPlayer").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { flv: 'http://st1.blive.kg/storage/flv7/2/249162.70951.flv' }); }, swfPath: "/js/Jpl ...

Tips for combining data within an array in a PHPExcel report

Looking to concatenate my array values in order to generate a PHPexcel report in Excel, but struggling to make it work. Can anyone offer assistance with this issue? Here's a visual representation of the desired outcome: "Buenavista, Agusan del Norte" ...