Assignment 5 | Notion

1. Given HTML and CSS what will be the actual value of the `font-size` and `padding` of the heading?

<!doctype html>
  <head>
    <title>About CSS</title>
    <meta charset="UTF-8" />
		<style>
			section{
				width: 100vw;
				height: 100vh;
        font-size: 2rem;
			}

      h1{
				font-size: 1.5em;
      }
		</style>
  </head>
  <body>
    <section>
      <h1>CSS is fun!</h1>
    </section>
  </body>
</html>

Font-size Described value : 1.5em

cascaded value : 1.5em

Specified value : 1.5rm

computed value : 1.5em * (216) = 1.532 = 48px used value : 48px ;

actual value : 48px;

padding

Described value : -

cascaded value : -

Specified value : 0px

computed value : 0px used value : 0px

actual value : opx

2. Given the HTML and CSS below, what are the final computed values for `font-size`, `padding`, and `margin` of the `<h1>` element, considering inheritance and specific property values?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Challenge</title>
  <style>
    body {
      font-size: 16px;
      margin: 10px;
    }

    section {
      font-size: 1.2em;
      padding: 15px;
    }

    h1 {
      font-size: inherit;
      margin: 5px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <section>
    <h1>Challenge</h1>
  </section>
</body>
</html>

Only font-size is inherited

h1 will take font-size as inherited (it will take fs from parent) section is the parent and let's calculate actual value of section

Described value : 1.2em

cascaded value : 1.2em

1. Given HTML and CSS what will be the actual value of the font-size and padding of the heading?

2. Given the HTML and CSS below, what are the final computed values for font-size, padding, and margin of the <h1> element, considering inheritance and specific property values?

1. Given HTML and CSS what will be the actual value of the `font-size` and `padding` of the heading?

2. Given the HTML and CSS below, what are the final computed values for `font-size`, `padding`, and `margin` of the `<h1>` element, considering inheritance and specific property values?