復習チャレンジ #2

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 24/76。

チャレンジ

簡単

この2番目の復習チャレンジでは、CSSのテキストスタイリングプロパティに関する知識を応用して、特定のデザインを再現します。このチャレンジでは、color、font-family、font-size、font-weight、text-align、text-decorationなどのさまざまなテキストプロパティを組み合わせて、指定されたデザインに合わせる能力をテストします。

見出し（<h1>）、段落（<p>）、リンク（<a>）、およびリスト項目（<li>）を含む順序なしリスト（<ul>）が含まれるHTMLドキュメントが提供されます。あなたのタスクは、学んだテキストスタイリングプロパティを使用して、これらの要素を下の画像に示すデザインに合わせるようにスタイル設定することです。

以下の手順に従ってください。

<h1>要素をターゲットとするCSSルールを記述します。colorをblackに、font-familyを"Times New Roman", Times, serifに、font-sizeを48pxに、font-weightをboldに、そしてtext-alignをcenterに設定します。
<p>要素をターゲットとするCSSルールを記述します。colorをgrayに、font-familyをArial, Helvetica, sans-serifに、font-sizeを18pxに、そしてtext-alignをcenterに設定します。
<a>要素をターゲットとするCSSルールを記述します。colorをredに、text-decorationをnoneに設定します。
すべての<li>要素をターゲットとするCSSルールを記述します。colorをgreenに、font-familyを"Courier New", Courier, monospaceに、font-sizeを25pxに、そしてfont-weightを600に設定します。

自分で試してみよう

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>