--- id: 5f3ef6e056bdde6ae6892ba2 title: Part 59 challengeType: 0 dashedName: part-59 --- # --description-- It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. # --hints-- You should use an `h1, h2` selector. ```js const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); assert(h1h2Selector); ``` You should set the `font-family` to `Impact`. ```js const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); assert(hasFontFamily); ``` Your `h1` element should have a `font-family` of `Impact`. ```js assert($('h1').css('font-family').match(/impact/i)); ``` Your `h2` element should have a `font-family` of `Impact`. ```js assert($('h2').css('font-family').match(/impact/i)); ``` # --seed-- ## --seed-contents-- ```html Camper Cafe Menu ``` ```css body { background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } h1, h2, p { text-align: center; } .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; padding: 20px; max-width: 500px; } --fcc-editable-region-- --fcc-editable-region-- .item p { display: inline-block; } .flavor, .dessert { text-align: left; width: 75%; } .price { text-align: right; width: 25% } ```