<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
            <span class="token selector">#red-paragraph</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 
                <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">#hex-color</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> #009688<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">#rgb-color</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>200<span class="token punctuation">,</span> 150<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">#hsla-color</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>120<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 30%<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">#background-image</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 
                <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'/images/cat.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> 
                <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-paragraph<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This text is colorful<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hex-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This text is less ugly<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rgb-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This color is given as RGB<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsla-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This color is given as HSLA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>background-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>If you want to get fancy, you can use a background image<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>