CSS Rules with Lower Specificity Will Take Precedence Over Rules with Higher Specific

Currently, I am enrolled in an online web development course and have been working on creating webpages to grasp the concepts of HTML and CSS. However, I encountered an issue where the font-family rules in my p and h3 elements were overriding the font-family rules specified in certain ID selectors on the page. I managed to find a workaround by chaining selectors, but I am still puzzled as to why this conflict occurred in the first place.

Here is a snippet of the HTML I am trying to format:

h3 {
  font-family: Helvetica, sans-serif;
  font-size: 24px;
}

p {
  font-family: "Roboto", sans-serif;
}

.font-container {
  display: inline-block;
  width: 45%;
}

.caps {
  text-transform: uppercase;
}

#helvetica{
  font-family: Helvetica, sans-serif;
}

#roboto{
  font-family: "Roboto", sans-serif;
}

#lora{
  font-family: "Lora", serif;
}
<div class="container">
    <h2>Fonts</h2>

    <div class="font-container" id="helvetica">
        <h3>Helvetica</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="roboto">
        <h3>Roboto</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="lora">
        <h3>Lora</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

Upon inspecting with Chrome DevTools, it became apparent that the font-family for all text within this div was inheriting from the p and h3 rules. Can anyone shed some light on why this behavior is occurring?

htmlcss

Answer №1

#helvetica, #lora & #roboto will only be applied to any text within the div tag that does not have an HTML tag. This is because when you 'wrap' Helvetica with an h3 tag and have specific h3 CSS rules, they will override the #helvetica rules that apply to the div tag.

Check out my example

<div class="container">
  <h2>Fonts</h2>

    <div class="font-container" id="helvetica">
        <h3>Helvetica</h3>
        This text will inherit the #helvetica rules
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="roboto">
        <h3>Roboto</h3>
        This text will inherit from the #roboto rules  
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="lora">
        <h3>Lora</h3>
        This text will inherit from the #lora rules
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>
</div>

h3 {
font-family: Helvetica, sans-serif;
font-size: 24px;
}

p {
    font-family: "Roboto", sans-serif;
}

.font-container {
    display: inline-block;
    width: 45%;
}

.caps {
    text-transform: uppercase;
}

#helvetica{
    font-family: 'Helvetica', sans-serif;
}

#roboto{
    font-family: "Roboto", sans-serif;
}

#lora{
    font-family: "Lora", serif;
}

Answer №2

Ensure you have distinct CSS styles for h3 and p tags.

h3 {
  font-family: Helvetica, sans-serif;
  font-size: 24px;
}

p {
  font-family: "Roboto", sans-serif;
}

.font-container {
  display: inline-block;
  width: 45%;
}

.caps {
  text-transform: uppercase;
}

#helvetica,
#helvetica h3,
#helvetica p{
  font-family: Helvetica, sans-serif;
}

#roboto,
#roboto h3,
#roboto p{
  font-family: "Roboto", sans-serif;
}

#lora,
#lora h3,
#lora p{
  font-family: "Lora", serif;
}
<div class="container">
    <h2>Fonts</h2>

    <div class="font-container" id="helvetica">
        <h3>Helvetica</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="roboto">
        <h3>Roboto</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

    <div class="font-container" id="lora">
        <h3>Lora</h3>
        <div class="normal">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
        <div class="caps">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p><em>The quick brown fox jumps over the lazy dog.</em></p>
            <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
        </div>
    </div>

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

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

htmlcsstinymce

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

javascripthtmlnode.jsreactjsjson

Manipulate the starting frame of the SWF file

Typically in regular swf files, they play from frame 1 to the end and then loop... Is it feasible to utilize javascripts or any scripting language to initiate playback from a specific frame, such as frame 10? Thank you. ...

javaphphtmlflash

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover s ...

css

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

htmlcsssearch

Struggling to make the bootstrap navigation bar function properly

I've been experimenting with replicating the basic framework to learn more about responsive web design using bootstrap. However, I've only been able to get certain parts to function correctly. For instance, I can use the "btn" class without any i ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Utilizing the Django Template to Organize Data through Model Fields

Hello there, I am looking to categorize my players in HTML based on their positions from my model. For example, if a player's position is listed as "striker" in the model, I would like to place them in a div with the class "Strikers". How can I achiev ...

djangohtmldjango-templates

Having trouble with adding a listener or making @click work in VueJS?

Apologies for my limited experience with Vue. I am currently facing an issue where one of my click functions is not working as expected for multiple elements. The click event is properly triggered for the #app-icon element. However, the function is not be ...

javascripthtmlvue.js

Using HTML and PHP, I am able to automatically redirect users to another

In the mix of files A.html, B.php, and File C.php there was a creation of a button that redirects from A to B, carrying over values provided by the user in A: <form action="B" method=post> <tr><td colspan="2" align="center"><input typ ...

phphtml

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

Display a loading message using jQuery Dialog when the page is loading

I have a button that triggers a jQuery Dialog box to open. $( "#dialog" ).dialog({ autoOpen: false, title: 'Contract', height: 450, width:1100, modal:true, resizable: true }); $( ".btnSend" ).click(function() { var id=$(this).a ...

javascriptphpjqueryhtmldialog

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

phphtml

Activate Dropdown on hover and automatically close the menu when a link is clicked

Looking for assistance with a Dropdown menu that opens on mouse hover but needs to close when a link is clicked within the menu. Do you think JavaScript would be necessary for this function? .dropdow { position: relative; ...

htmlcss

Ways to eliminate HTML elements from one HTML content to another

The HTML code provided is as follows: <dl class="item-options"> <dd class="truncated" style="color:red;">DSOX3000-232, RS232/UART Serial Decode and Trigger - in <a onclick="return false" class="dots" href="#">...</a>/&l ...

jqueryhtmlperformance

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

What is the best way to create stylish corners on my website?

I'm struggling with creating a corner like the one shown in the image. As a beginner in frontend development, I attempted to write the following code but now I'm stuck. The Snippet: * { margin: 0; padding: 0; } body { height: 100vh; ...

htmlcssuser-interfaceuser-experiencemobile-website

Creating a user-friendly navigation menu: A step-by-step guide

I need help creating a navigation menu for my website that isn't functioning properly. Here is the code I am currently using: body{ margin: 0px; padding: 0px; } nav > ul{ margin: 0px; padding: 0px; } nav > ul > li{ fl ...

htmlcss

Navigate to the web page in order to utilize the mobile GPS application and transfer your current location data directly to the

I am aiming to leverage my existing website to connect with a native mobile GPS application by simply clicking on a specific link on the webpage. This link will then transmit my current location and desired destination directly to the app, all without l ...

androidiosmobilegpshtml