"CSS styles applied to the body element do not automatically transfer to the h1

Explore the World of Coding:

<body class="pageDesign">
<h1>CSS - A Creative Journey</h1>
<p><strong>Discover the beauty of coding</strong> and unlock a world of possibilities with CSS. Let your imagination soar as you delve into the realm of code, where innovation meets design to create captivating web pages. Embrace the art of coding and bring your ideas to life! To learn more about CSS, visit the <a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p>
</body>

CSS:

.pageDesign {
        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-size: 18px;
    }

See the result here.

Curious why the <h1> tag isn't 18px?

htmlcss

Answer №1

Due to the default styles of the h1 element, specifically the default font-size: 2em, it is necessary to explicitly set the font-size within the h1 styling.

Snippet

.pageStyle {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 18px;
}
h1 {
  font-size: inherit; /* or 18px */
}
<body class="pageStyle">
  <h1>The Amazing World of CSS</h1>
  <p><strong>Sed ut perspiciatis</strong> unde omnis iste natus error sit <em>voluptatem accusantium</em> doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <strong>inventore veritatis et quasi architecto beatae</strong> vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the <a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p>
</body>

User Comment:

Wouldn't the stylesheet override this default style?

The stylesheet will not override the default styles for the h1 element because the styles applied by the parent body are more specific than those directly applied to the h1.

Further Reading:

MDN CSS Specificity

Inheritance and Cascade

Understanding CSS Specificity

Answer №2

The issue at hand relates to the concept of CSS specificity. According to information provided by Mozilla's documentation:

Selector types are ranked in terms of increasing specificity:

  • Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  • Class selectors (e.g., .example), attributes selectors (e.g. [type="radio"]) and pseudo-classes (e.g., :hover).
  • ID selectors (e.g., #example).

An important point to consider is the use of the !important declaration:

Whenever an important rule is applied to a style declaration, it takes precedence over any other declarations...

In the particular scenario described, default styles provided by the browser for all elements take precedence due to being defined based on the element's name (h1, a, etc.), which can lead to your custom styles not being implemented successfully. A visual representation showcasing default styles for h1 within the browser can be seen in this screenshot:

https://i.stack.imgur.com/w51pg.png

To resolve this, you could experiment with targeting h2 specifically or incorporating the pageStyle class onto h2 for desired outcomes.

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

What could be the reason for the bottom edge of my central diagonal image having a darker border?

I can't figure out why the border on the bottom edge of my image is darker. You can check out the demo here. To get a closer look at the issue, you can open a software like GIMP and zoom in on the following image to see the difference in values: http ...

javascripthtmlcssreactjsimage

What are some ways to reuse an angular component multiple times?

I am utilizing an angular component to dynamically load charts into my widget: Below is an example of the component: angular.module("generalApp").component("chartPie", { template: "<div class=Pie></div>", bindings: { data: "=", }, control ...

javascripthtmlangularjschartshighcharts

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

htmlcss

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... Unfortunately, the assigned value does not show on the front end. I am aware that we can set a defaul ...

javascriptjqueryhtmljquery-uidatepicker

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

Tips for choosing the most current or upcoming item from a list using buttons

I am currently working on a small website project for one of my lessons. The task involves selecting items from a list and using two arrows to navigate to the item above or below the current selection. Here is an example: https://i.stack.imgur.com/FxZCN. ...

phphtmlcss

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effec ...

jquerytwitter-bootstrapcssxhtml

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Having trouble vertically aligning text? Combining AngularJS, Bootstrap, and Flexbox can help!

I have spent a lot of time trying to understand why I am unable to vertically align the text inside these cells. I have tried multiple solutions: align-items: center; vertical-align: middle; justify-content: center; justify-items: center; Unfortunately, ...

htmlcssangularjstwitter-bootstrapflexbox

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): Examining my existing frontend code: const SignIn = () => { ...

javascripthtmlcssreactjsflexbox

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

csssafaritransformgsap

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

htmlcssreactjsmaterial-designmaterial-ui

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

I've encountered an issue with a series of divs that are set to toggle the state of a collapsible div upon clicking (similar to an accordion widget). The functionality works as intended, but I'm facing a challenge - I want the page to scroll to t ...

javascriptjqueryhtmlscrolltop

Fluctuating problem arises when placing one div over another div while hovering

Sorry if the title isn't clear. Basically, I have a div that when hovered over, triggers another div to appear with display:block, showing it above the original div. It works well but there is some flickering when moving the cursor over the second div ...

htmlcss

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: However, when I switch over to desktop view, the image appears too large. He ...

htmlcssnext.jsresponsive-design

XPath //*[text()] is not picking up the desired text

Using the XPath 1.0 expression //*[text()] does not capture the phrase "now revenue of kfc is" https://i.stack.imgur.com/GeFCY.png However, with the XPath 2.0 expression //text(), it can be selected. https://i.stack.imgur.com/uTSqW.png Unfortunately, S ...

htmlxmlseleniumselenium-webdriverxpath

Apply CSS styles when the text exceeds the size of the textbox

Is there a way to create a textbox that scrolls on hover only if the text is longer than the textbox itself? Check out my attempt here: https://jsfiddle.net/SynapticError/wqh4ts3n/35/ The text should scroll on hover if it's longer than the textbox. ...

javascriptcss

How can you identify dynamically created elements within an AngularJS directive?

I have a directive where I need to target specific DOM elements, some of which are dynamically generated in an ng-repeat loop. If I try to select them directly, I only get the static elements. However, if I delay the selection by, let's say, 500ms, I ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat