Quiz - Typography and Colors in CSS

It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

Signing in to disable ads on our site.
Sign up if you don't have an account yet.
Or, disable your ad blocker by doing this:
- Click on the ad blocker icon in your browser's toolbar.
- Select "Pause on this site" or a similar option for lancecourse.com.

Typography and Colors in CSS

This quiz tests your understanding of the essential CSS properties for styling text and typography, including text formatting, font usage, and colors.

Question 1 What does the font-family property define?: The size of text The typeface of the text The color of the text The alignment of text

Question 2 What does the text-shadow property do?: Adds a background color to text Adds shadow effects to text Changes the color of text Underlines text

Question 3 What is the correct way to include a Google Font in your HTML file?: Use an tag Use an tag <input type="radio" name="ans_115" id="ans_115_437" > <span class="selectmark"></span> </label> <label for="ans_115_438" class="article answer_option"> Use a <link> tag in the <head> section <input type="radio" name="ans_115" id="ans_115_438" > <span class="selectmark"></span> </label> <label for="ans_115_439" class="article answer_option"> Use a <script> tag <input type="radio" name="ans_115" id="ans_115_439" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 4</h3> <h2>What does the line-height property adjust?</h2> </dt> <dd> <label for="ans_113_428" class="article answer_option"> The space between words <input type="radio" name="ans_113" id="ans_113_428" > <span class="selectmark"></span> </label> <label for="ans_113_429" class="article answer_option"> The space between lines of text <input type="radio" name="ans_113" id="ans_113_429" > <span class="selectmark"></span> </label> <label for="ans_113_430" class="article answer_option"> The thickness of text <input type="radio" name="ans_113" id="ans_113_430" > <span class="selectmark"></span> </label> <label for="ans_113_431" class="article answer_option"> The position of text <input type="radio" name="ans_113" id="ans_113_431" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 5</h3> <h2>Which CSS property would you use to change the thickness of an underline?</h2> </dt> <dd> <label for="ans_116_440" class="article answer_option"> text-shadow <input type="radio" name="ans_116" id="ans_116_440" > <span class="selectmark"></span> </label> <label for="ans_116_441" class="article answer_option"> text-decoration-thickness <input type="radio" name="ans_116" id="ans_116_441" > <span class="selectmark"></span> </label> <label for="ans_116_442" class="article answer_option"> font-weight <input type="radio" name="ans_116" id="ans_116_442" > <span class="selectmark"></span> </label> <label for="ans_116_443" class="article answer_option"> line-height <input type="radio" name="ans_116" id="ans_116_443" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 6</h3> <h2>Which value for text-transform will make all letters uppercase?</h2> </dt> <dd> <label for="ans_114_432" class="article answer_option"> lowercase <input type="radio" name="ans_114" id="ans_114_432" > <span class="selectmark"></span> </label> <label for="ans_114_433" class="article answer_option"> capitalize <input type="radio" name="ans_114" id="ans_114_433" > <span class="selectmark"></span> </label> <label for="ans_114_434" class="article answer_option"> uppercase <input type="radio" name="ans_114" id="ans_114_434" > <span class="selectmark"></span> </label> <label for="ans_114_435" class="article answer_option"> none <input type="radio" name="ans_114" id="ans_114_435" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 7</h3> <h2>Which is NOT one of the five main font family groups in CSS?</h2> </dt> <dd> <label for="ans_118_448" class="article answer_option"> Serif <input type="radio" name="ans_118" id="ans_118_448" > <span class="selectmark"></span> </label> <label for="ans_118_449" class="article answer_option"> Sans-serif <input type="radio" name="ans_118" id="ans_118_449" > <span class="selectmark"></span> </label> <label for="ans_118_450" class="article answer_option"> Monospace <input type="radio" name="ans_118" id="ans_118_450" > <span class="selectmark"></span> </label> <label for="ans_118_451" class="article answer_option"> Gothic <input type="radio" name="ans_118" id="ans_118_451" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 8</h3> <h2>Which CSS property is used to center text horizontally within an element?</h2> </dt> <dd> <label for="ans_112_424" class="article answer_option"> text-transform <input type="radio" name="ans_112" id="ans_112_424" > <span class="selectmark"></span> </label> <label for="ans_112_425" class="article answer_option"> font-family <input type="radio" name="ans_112" id="ans_112_425" > <span class="selectmark"></span> </label> <label for="ans_112_426" class="article answer_option"> text-align <input type="radio" name="ans_112" id="ans_112_426" > <span class="selectmark"></span> </label> <label for="ans_112_427" class="article answer_option"> text-indent <input type="radio" name="ans_112" id="ans_112_427" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 9</h3> <h2>Which CSS property is used to indent the first line of a paragraph?</h2> </dt> <dd> <label for="ans_120_456" class="article answer_option"> text-indent <input type="radio" name="ans_120" id="ans_120_456" > <span class="selectmark"></span> </label> <label for="ans_120_457" class="article answer_option"> line-height <input type="radio" name="ans_120" id="ans_120_457" > <span class="selectmark"></span> </label> <label for="ans_120_458" class="article answer_option"> padding <input type="radio" name="ans_120" id="ans_120_458" > <span class="selectmark"></span> </label> <label for="ans_120_459" class="article answer_option"> margin <input type="radio" name="ans_120" id="ans_120_459" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <dl class="question"> <dt> <h3>Question 10</h3> <h2>What does the font-size property control in CSS?</h2> </dt> <dd> <label for="ans_111_420" class="article answer_option"> The size of text <input type="radio" name="ans_111" id="ans_111_420" > <span class="selectmark"></span> </label> <label for="ans_111_421" class="article answer_option"> The color of text <input type="radio" name="ans_111" id="ans_111_421" > <span class="selectmark"></span> </label> <label for="ans_111_422" class="article answer_option"> The type of font used <input type="radio" name="ans_111" id="ans_111_422" > <span class="selectmark"></span> </label> <label for="ans_111_423" class="article answer_option"> The alignment of text <input type="radio" name="ans_111" id="ans_111_423" > <span class="selectmark"></span> </label> </dd> </dd> </dl> <div class="quiz-submit"> <label for="ready" class="quiz-status notification warning"> <i class="fas exclamation-circle"></i> Answer all the questions then submit. </label> <button class="smt_btn button disabled submit">Submit Answers</button> </div> </form> </section>   <footer> <div class="container"> <ul class="services"> <li> <a href="/circle">Discussions</a> </li> <li> <a style="padding-left:0;" href="/labs"> Labs </a> </li> <li> <a style="padding-left:0;" href="/quizzes"> Quiz </a> </li> <li> <a style="padding-left:0;" href="/wordbook"> Wordbook </a> </li> <li> <a style="padding-left:0;" href="/about-us"> About us </a> </li> <li> <a href="/faq"> Faq </a> </li> <li> <a href="/policy"> Terms & Policy </a> </li> <li> <a href="/advertise-with-us"> Advertise with us </a> </li> <li> <a href="/contact"> Contact </a> </li> </ul> <p>Copyright © 2015 - 2025 - Lancecourse.com • Except where noted, all rights reserved • Designed by zooboole</p> </div> </footer> </div>  <script async src="/assets/javascript/main.js"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-5908879638690497", enable_page_level_ads: true }); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-BRS0L2SWKY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-BRS0L2SWKY'); </script> </body> </html>

Typography and Colors in CSS

Question 1

What does the font-family property define?

Question 2

What does the text-shadow property do?

Question 3

What is the correct way to include a Google Font in your HTML file?