Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have:

<div id="bloquetexto4" class="bloquetexto">
<H2><b>TITULO</b></H2>
<p>Texto bla bla bla.</p>

Also, here is the CSS associated with it:

.bloquetexto p { 
    font-size: 110%;
    color: orange;
}
.bloquetexto h2 { font-size: 90%; }

My issue lies in trying to adjust the size of the H2 element without affecting other text on the page. Currently, setting the font size to 90% results in a much smaller text size than intended (you can see this in action on JsFiddle http://jsfiddle.net/c6hzghcq/). It appears that the size is being calculated based on the parent element's font size rather than its own.

Is there a way to make the H2 size calculation based solely on itself, independent of other elements on the page? I simply want the H2 to be slightly smaller than usual, regardless of any surrounding text sizes.

Answer №1

When setting an H2 Element, most browsers have a standard setting which can be found at this link, with the default size being 1.5em;

 .bloquetexto p {
   font-size: 110%;
   color: orange;
 }
 .bloquetexto h2 {
   font-size: 1.3em;
   /*Text is smaller than standard size of 1.5em;*/
 }
<div id="bloquetexto4" class="bloquetexto">
  <H2><b>TITLE</b></H2>
  <p>Lorem ipsum dolor sit amet.</p>

EDIT:: It's also recommended to use a "reset" stylesheet which can be quite useful as not all browsers are the same.

Answer №2

Opt for px, em or another unit, avoiding the use of %. This is important because using % will adjust according to the parent's height.

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

The line directly following the first line within the <li> element is located in the same position

I need help with customizing the bullet background-image for an <li> element. I want the text in the bullet to be displayed outside the marker using the CSS property list-item-position: outside. However, my current implementation doesn't seem to ...

What is the best way to show information entered into a textbox on a different webpage?

Looking for advice on how to collect data in a text box and display it on another page? I have included HTML code for both the announcement page (where the data is entered) and the archive page (where the data should be shown). Could someone guide me on ...

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

The collapsed navbar button in Bootstrap is unresponsive

I run two websites. The Collapsed Navbar functions properly on the first site, located at (Index Site). <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" ...

Customizing existing Mui classes through the use of makeStyles

Recently, I made a small change in my approach to styling by moving CSS directly into my component files using styled components, emotion, and make styles. This decision was driven by the benefits of easier management and improved development experience. A ...

Ways to prevent the input value from rising on a number type input when the up button is pressed

I'm curious about whether it's possible to prevent the input value from increasing when I press the up button on a type number input. Any ideas? ...

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Recently, I stumbled upon an article detailing a method to clear the background of a fabric canvas... canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)); In the development of my online design tool which utilizes Fabricjs 1.4.4, I have ...

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

Alerts during script execution

As I execute the script, I encounter the following warnings: Notice: Undefined variable: varName in C:\wamp\www\dash\index.php on line 38 Notice: Undefined variable: varMsg in C:\wamp\www\dash\index.php on line 38 N ...

What is the best way to create a variable within this loop that remains constant and does not update?

I'm having some trouble phrasing this question, but I'm working on creating a loop to display dates for a calendar. So far, everything seems to be working well, except for one thing. My goal is to allow users to click on a date within the calenda ...

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...

Insert a new <tr> element into a dynamic table using PHP and jQuery without the need to refresh the page

I am attempting to dynamically insert a row into an existing table when a button is clicked. The rows in the table are created dynamically based on data retrieved from a PHP script. My approach involves making an ajax call to the insert_tr.php script, whi ...

Tips for opening local HTML files on iPhones and Android devices

Is there a way to access local files on my PC from my iPhone and Android devices without having to upload them to an FTP server each time? I currently use Windows 7 with an iPhone 4 and an Android device. When I need to view a file on my iPhone's brow ...

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

What is the best way to generate a box when a button is pushed?

How can I make a button create a box with text inside it when clicked? <div class="trades"> </div> <button onclick="create()">add</button> Here is the JavaScript function to create the box: function create() { var box = docu ...

Ways to transfer a variable from a Node.js script to a JavaScript file on the client side

Seeking guidance on how to transfer the "myBlogs" variable from my Node.js file ("server.js") to a frontend JavaScript file ("blogs.js"). I intend to utilize this variable in the JS file to iterate through the array it contains, generating a template for e ...

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

I am encountering an issue with a dropdown menu. When running the script, I receive the error message "ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated." Upon inspecting the HT ...

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

Utilizing this jQuery script, I am able to center a website vertically within the browser window if it exceeds the height of the outer wrapper-div, which has fixed dimensions. $( document ).ready(function() { centerPage(); )}; // center page vertic ...

Using the linearGradient feature within an SVG to create a transitional effect on the Fill property

Looking to implement a stepper functionality, everything is working smoothly except for the transition on the fill. let step = 0; document.querySelector("button").addEventListener('click', () => { step++; document.querySelector("svg ...