#ex1 {
    p {
        color: red;
    }
}

#ex2 {
    p {
        font-family: 'Courier New', Courier, monospace;
    }
}

#ex3 {
    p#ff_arial {
        font-family: Arial;
    }

    p#ff_courier {
        font-family: 'Courier New';
    }

    p#ff_georgia {
        font-family: Georgia;
    }

    p#ff_times {
        font-family: 'Times New Roman';
    }

    p#ff_trebuchet {
        font-family: 'Trebuchet MS';
    }

    p#ff_verdana {
        font-family: Verdana;
    }
}

#ex4 {
    p#ff_serif {
        font-family: serif;
    }

    p#ff_sans {
        font-family: sans-serif;
    }

    p#ff_monospace {
        font-family: monospace;
    }

    p#ff_cursive {
        font-family: cursive;
    }

    p#ff_fantasy {
        font-family: fantasy;
    }
}

#ex5 {
    font-size: 20px;

    p#size_px {
        font-size: 10px;
    }

    p#size_em {
        font-size: 1.5em;
    }

    p#size_rem {
        font-size: 1.rem;
    }
}

#ex6 {
    span#fs_normal {
        font-style: normal;
    }

    span#fs_italic {
        font-style: italic;
    }

    span#fs_oblique {
        font-style: oblique 45deg;
    }
}

#ex7 {
    span#fw_normal {
        font-weight: normal;
    }

    span#fw_bold {
        font-weight: bold;
    }

    span#fw_lighter {
        font-weight: lighter;
    }

    span#fw_bolder {
        font-weight: bolder;
    }

    span#fw_100 {
        font-weight: 100;
    }

    span#fw_900 {
        font-weight: 900;
    }
}

#ex8 {
    span#tt_none {
        text-transform: none;
    }

    span#tt_uppercase {
        text-transform: uppercase;
    }

    span#tt_lowercase {
        text-transform: lowercase;
    }

    span#tt_capitalize {
        text-transform: capitalize;
    }
}

#ex9 {
    span#tdl_none {
        text-decoration-line: none;
    }

    span#tdl_underline {
        text-decoration-line: underline;
    }

    span#tdl_overline {
        text-decoration-line: overline;
    }

    span#tdl_line-through {
        text-decoration-line: line-through;
    }

    span#tdl_spelling-error {
        text-decoration-line: spelling-error;
    }

    span#tdl_grammar-error {
        text-decoration-line: grammar-error;
    }

    span#tds_solid {
        text-decoration-line: underline;
        text-decoration-style: solid;
    }

    span#tds_double {
        text-decoration-line: underline;
        text-decoration-style: double;
    }

    span#tds_dotted {
        text-decoration-line: underline;
        text-decoration-style: dotted;
    }

    span#tds_dashed {
        text-decoration-line: underline;
        text-decoration-style: dashed;
    }

    span#tds_wavy {
        text-decoration-line: underline;
        text-decoration-style: wavy;
    }

    span#tdt_auto {
        text-decoration-line: underline;
        text-decoration-thickness: auto;
    }

    span#tdt_from {
        text-decoration-line: underline;
        text-decoration-thickness: from-font;
    }

    span#tdt_01em {
        text-decoration-line: underline;
        text-decoration-thickness: 0.1em;
    }

    span#tdt_05em {
        text-decoration-line: underline;
        text-decoration-thickness: 0.5em;
    }

    span#tdt_1em {
        text-decoration-line: underline;
        text-decoration-thickness: 1em;
    }

    span#tdt_1p {
        text-decoration-line: underline;
        text-decoration-thickness: 1%;
    }

    span#tdt_25p {
        text-decoration-line: underline;
        text-decoration-thickness: 25%;
    }

    span#tdt_50p {
        text-decoration-line: underline;
        text-decoration-thickness: 50%;
    }

    span#tdc_red {
        text-decoration-line: underline;
        text-decoration-color: red
    }

    ;

    span#tdc_green {
        text-decoration-line: underline;
        text-decoration-color: green
    }

    ;

    span#tdc_blue {
        text-decoration-line: underline;
        text-decoration-color: blue
    }

    ;
}

#ex10 {
    h1 {
        text-shadow:
            2px 2px 5px red,
            -2px -2px 5px yellow;
    }
}

#ex11 {
    display: flex;
    div {
        border: 1px solid gray;
        font-size: 0.8em;
        margin: 5px;
        padding: 10px;
    }

    div#al_left { text-align: left;}
    div#al_right { text-align: right;}
    div#al_center { text-align: center;}
    div#al_justify { text-align: justify;}
}

#ex12 {
    div.group { display: flex; }
    div.group div {
        border: 1px solid gray;
        font-size: 0.8em;
        margin: 5px;
        padding: 10px;
    }
    
    div#lh_normal {line-height: normal;}

    div#lh_number08 {line-height: 0.8;}
    div#lh_number12 {line-height: 1.2;}
    div#lh_number15 {line-height: 1.5;}

    div#lh_length2px {line-height: 2px;}
    div#lh_length5px {line-height: 5px;}
    div#lh_length10px {line-height: 10px;}

    div#lh_perc10 {line-height: 10%;}
    div#lh_perc20 {line-height: 20%;}
    div#lh_perc30 {line-height: 30%;}

}

#ex13 {
    div.group { display: flex; }
    div.group div {
        border: 1px solid gray;
        font-size: 0.8em;
        margin: 5px;
        padding: 10px;
    }

    div#ls_normal {letter-spacing: normal;}

    div#ls_1px {letter-spacing: 1px;}
    div#ls_2px {letter-spacing: 2px;}
    div#ls_5px {letter-spacing: 5px;}
}

#ex14 {
    div.group { display: flex; }
    div.group div {
        border: 1px solid gray;
        font-size: 0.8em;
        margin: 5px;
        padding: 10px;
    }

    div#ws_normal {word-spacing: normal;}

    div#ws_10px {word-spacing: 10px;}
    div#ws_20px {word-spacing: 20px;}
    div#ws_30px {word-spacing: 30px;}
}