2. Tipografi CSS

Komapen.com -

Hidup itu sederhana, kitalah yang membuatnya sulit.
-Confucius-

Tipografi CSS

Ada beragam style yang bisa kita berikan untuk menghasilkan bentuk sesuai keinginan.
1. Style Font
Beberapa style yang dapat digunakan pada teks, seperti bentuk, ukuran dan warna.
File Style Font.html

<HTML>
    <HEAD>
        <TITLE>Style Font</TITLE>

        <style type="text/css">
        .style_font {
            font-family: Georgia;
            font-size: 15px;
            font-style: italic;
            font-weight: bold;
            text-decoration: underline;
            color: blue;
            }
        </style>
    </HEAD>
    <BODY>
        <P class="style_font">
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        <P>
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    </BODY>
</HTML>

Tampilan di browser

Gambar 1 Style Font

2. Mengatur Spasi

Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu teks.

File Mengatur Spasi.html

<HTML>
    <HEAD>
        <TITLE>Mengatur Spasi</TITLE>
        <style type="text/css">
        .style_font {
            color: blue;
            line-height: 50px;
            }
        </style>
    </HEAD>
    <BODY>
        <P class="style_font">
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        <P>
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    </BODY>
</HTML>

Tampilan di browser

Gambar 2 Mengatur Spasi

3. Initial Cap

Kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf besar (initial cap) seperti layaknya majalah.

File Initial Cap.html

<HTML>
    <HEAD>
        <TITLE>Initial Cap</TITLE>
        <style type="text/css">
        P:first-letter {
            font-size: 3em;
            background-color: black;
            color: white;
            }
        </style>
    </HEAD>
    <BODY>
        <P>
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        UT enim ad minim veniam, quis notstrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </BODY>
</HTML>

Tampilan di browser

Gambar 3 Initial Cap

SEKIAN TERIMAKASIH

AY✨

2. Tipografi CSS

Tipografi CSS

Share this

Related Posts