How is Inheritance Utilizing Computed Values?

The article I'm currently reading discusses the concept of "Inheritance Uses Computed Values." According to the chapter, computed values are essential for inherited values such as font sizes that utilize lengths. These values are relative to other elements on a web page.

For instance, setting the font size to 1em on the BODY element does not mean that everything on the page will be exactly 1em in size. This is due to the fact that elements like headings (H1-H6) and certain others may have different computed sizes in various browsers. In the absence of specific font size information, browsers prioritize rendering H1 headlines as the largest text on the page, followed by H2 and so forth. The font size set on the BODY element serves as the baseline, with headline elements being calculated from there.

It's important to note that in most cases, 1em translates to approximately 16px when the browser's text size is set to normal. Adjusting the browser's text size settings will in turn alter the displayed text accordingly.

The question remains - what is the main takeaway from this article?

htmlcss

Answer №1

When you specify the font-size for an element, its actual value is influenced by the font sizes set in its parent elements.

For example, check out this DEMO

<div id="test1">
    <h1>First header</h1>
</div>
<div id="test2">
    <h1>Second header</h1>
</div>

h1 { font-size: 1.5em; }

#test1 { font-size: 1em; }
#test2 { font-size: 2em; }

The font-size: 1.5em on the h1 element is calculated relative to its parent, making the second heading appear larger.

Answer №2

The concept being conveyed here is one of relativity in design, where a base value is established and other elements derive their sizes from that base unless specified otherwise.

For example, if the body size is set at 16px, using em as a unit will calculate to 16px for top-level elements.

Consider this scenario:

<div class="bananaStyle">Hi
<p>bananaStyle2</p></div>

.bananaStyle {font-size: 0.5em;}
.bananaStyle p {font-size: 1em}

In this case, the font size of bananaStyle will be 8px as expected for 1em. However, since the paragraph tag is within another div, it also inherits the 8px value relative to its parent element. I hope this explanation clarifies things for you.

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 is the process for setting a background image using two alternate images? (ensure a substitute image displays when the original image is not available

I am trying to set a background image with two alternatives. Below is the code I have been using: <a id="test" style="background: url('image1.png'), background: url('image2.png');">test</a> My goal is to prioritize the fir ...

htmlcssbackground-image

How can I stop the form label from aligning to the right in Bootstrap 4?

I have encountered a formatting issue with my Bootstrap 4 form. The label for "Number of Travellers" is currently aligned to the right, which disrupts the overall look of the form and makes the label appear out of place. Below is the snippet of the code i ...

htmlcssbootstrap-4

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

javascripthtmlcss

Tips for preserving additional information in a form by selecting "add more" option

Recently, I encountered a challenge with a form on my website. Whenever a user fills out a few fields and clicks "Add", the data transitions into an HTML element. Subsequently, the form partially clears for more data input. Now I'm faced with the dil ...

javascriptjqueryhtmlformsserialization

Received this unexpected error message upon reloading the page in a ReactJS application: SyntaxError: Unexpected token '<'

Every time I refresh the page, I encounter the error Uncaught SyntaxError: Unexpected token '<'. This error originates from a top-level component named <Navbar /> that I included in App.js. Oddly enough, the issue only arises upon refres ...

javascripthtmlreactjsreact-router-dom

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

javascriptandroidhtmlregexjsoup

Problem with text alignment in Internet Explorer 7

I'm facing an issue with the alignment of columns on my website. Each item is represented by an <a> tag within an <li> element, which is part of a larger <ul>. The topmost <li> in each list has a unique class compared to the lo ...

cssinternet-explorercross-browsercss-position

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

htmlnode.js

Incorporating AngularJS into your current JavaScript code base

We have a JavaScipt project underway that could greatly benefit from incorporating AngularJS. However, due to the size of the project, completely rewriting it in Angular is not feasible. Does anyone have any suggestions or tips on how to integrate Angula ...

angularjshtml

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...

javascriptjqueryhtmliframeheight

Adjusting a Form Input Field

There seems to be an issue with the text alignment in my submission form input field, as the text appears a few pixels too low. This is causing certain letters like y, q, and j to bleed below the box in Chrome and only partially show in IE 8. To fix this p ...

htmlcss

Adjust the position of an element based on changes in window size using jQuery

Wondering if this question is unique, as I've spent quite some time searching for a solution to this issue without any luck. Perhaps my search criteria aren't correct. I have a navigation bar that becomes fixed when it reaches the top of the vie ...

javascriptjqueryhtml

"The HTML5 feature that triggers an event when a selection is changed is known as

Is there a universal HTML5 event that functions similarly to the IE legacy onselectionchange, triggering when the current selection is altered? UPDATED, I am interested in monitoring changes to the Selection object. ...

javascripthtmldom

Pausing for an asynchronous operation to complete prior to submitting a form

This particular issue presents a challenge. Below is my jQuery code snippet: /** * Updating websites */ $('.website').on('blur', function () { var websiteId = this.id; console.log(websiteId); var website = this.value; ...

javascriptjqueryhtmlnode.jsajax

Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions. Code Snippet: <div class="carousel- ...

jqueryhtmlcsstwitter-bootstrapflexslider

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

The styled components can create identical CSS classes with varying conditions

Below are the CSS styles I am currently using: import styled, { css } from "styled-components"; const H4 = css` font-family: "Futura"; font-style: normal; font-weight: 500; font-size: 20px; line-height: 140%; color: #3a786a ...

cssreactjsjsxstyled-components

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

javascriptcss

I would like to style the input checkbox using CSS

Is there a way to style input checkboxes with CSS that will work on all browsers (Chrome, Firefox, IE 6, 7, and 8)? If jQuery is the only solution, please let me know. It needs to be compatible with all browsers. Can anyone provide guidance on how to ach ...

jqueryhtmlcssinputcheckbox