curriculum/challenges/english/blocks/applied-visual-design/587d781c367417b2b2512ac3.md
You set the font-size of each heading tag in the last challenge, here you'll adjust the font-weight.
The font-weight property sets how thick or thin characters are in a section of text.
Your code should set the font-weight property for the h1 tag to 800.
const h1Element =document.querySelector('h1')
const h1Style = window.getComputedStyle(h1Element);
assert.equal(h1Style?.fontWeight, '800');
Your code should set the font-weight property for the h2 tag to 600.
const h2Element =document.querySelector('h2')
const h2Style = window.getComputedStyle(h2Element);
assert.equal(h2Style?.fontWeight, '600');
Your code should set the font-weight property for the h3 tag to 500.
const h3Element =document.querySelector('h3')
const h3Style = window.getComputedStyle(h3Element);
assert.equal(h3Style?.fontWeight, '500');
Your code should set the font-weight property for the h4 tag to 400.
const h4Element =document.querySelector('h4')
const h4Style = window.getComputedStyle(h4Element);
assert.equal(h4Style?.fontWeight, '400');
Your code should set the font-weight property for the h5 tag to 300.
const h5Element =document.querySelector('h5')
const h5Style = window.getComputedStyle(h5Element);
assert.equal(h5Style?.fontWeight, '300');
Your code should set the font-weight property for the h6 tag to 200.
const h6Element =document.querySelector('h6')
const h6Style = window.getComputedStyle(h6Element);
assert.equal(h6Style?.fontWeight, '200');
<style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
<style>
h1 {
font-size: 68px;
font-weight: 800;
}
h2 {
font-size: 52px;
font-weight: 600;
}
h3 {
font-size: 40px;
font-weight: 500;
}
h4 {
font-size: 32px;
font-weight: 400;
}
h5 {
font-size: 21px;
font-weight: 300;
}
h6 {
font-size: 14px;
font-weight: 200;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>