1. CASCADING STYLE SHEET (CSS)

- Komapen.com -

Jangan pernah berhenti mengejar yang kamu impikan, meski apa yang kamu dambakan belum ada di depan mata.
-B.J. Habibie-

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:

Embedded: Properti style diletakkan di dalam satu blok di dokumen HTML

Inline: Properti style diterapkan secara langsung per baris atau per elemen HTML

Linked: Properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML

Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.

Cascading Style Sheet (CSS) dapat menerapkan suatu format ketika lebih dari satu style berlaku. Misalkan kita menginginkan semua paragrafh menggunakan font warna merah, namun secara khusus menginkan satu kata agar berwarna biru.

File Index.html

<HTML>
    <HEAD>
        <TITLE>Fancy Font</TITLE>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </HEAD>
    <BODY>
        <P>I'm a paragraph written in red font, but one of my words is 
        <span>blue</span>!</P>
    </BODY>
</HTML>

<span></span> : element inline (element yang tidak membentuk garis baru) digunakan untuk mengelompokkan beberapa element yang dimaksudkan untuk memudahkan dalam pemberian style dengan CSS.

File Stylesheet.css

P {
    color: red;
}
span {
    font-size: large;
    color: blue;
}

Tampilan di browser

Gambar 1. Fancy Font

Penerapan ketiga jenis style CSS

Embeded

Keseluruhan aturan style didefinisikan ke dalam satu blok baru kemudian digunakan elemen-elemen HTML

File Embedded Style.html

<HTML>
    <HEAD>
        <TITLE>Embedded Style</TITLE>

        <style type="text/css">
            P{
                color:red;
                font-style: italic;
            }

        </style>
    </HEAD>
    <BODY>
        <P>
            Ini paragraf pertama

        <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.

        <P>
            Ini paragraf ketiga
    </BODY>
</HTML>

Tampilan di browser

Gambar 2. Embbeded Style

Terlihat bahwa pendefinisian style berdampak pada seluruh elemen paragraf. Bagaimana jika hanya ingin memberikan style pada elemen tertentu.

Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).

File Embedded Style Class.html

<HTML>
    <HEAD>
        <TITLE>Embedded Style</TITLE>

        <style type="text/css">
            .style1{
                color:red;
                font-style: italic;
            }
            .style2{
                color: blue;
                font-weight: bold;
            }

        </style>
    </HEAD>
    <BODY>
        <P class="style1">
            Ini paragraf pertama

        <P class="style2">
            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.

        <P class="style1">
            Ini paragraf ketiga
    </BODY>
</HTML>

Tampilan di browser

Gambar 3 Embedded Style dengan class

Sebagai tambahan, kita juga bisa mendefinisikan sebuah aturan untuk lebih dari satu tag. Contoh sebagai berikut:

b, p, a{
    color: red;
    font-size: 25pt;
    font-style: italic;
    font-family: 'Courier New', Courier, monospace;
}

Inline

Pada style ini, kita menerapkan style per baris atau tag melalui atribut style. Inline style sangat cocok digunakan untuk pemberian style khusus pada beberapa tag saja.

File Inline Style.html

<HTML>
    <HEAD>
        <TITLE>Inline Style</TITLE>
    </HEAD>
    <BODY>
        <P style="color: red; font-style: italic;">
        Ini paragraf pertama

        <P style="color: blue; font-weight: bold;">
        Lorem ipsum dolor sit amt, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        <P>
        Ini paragraf ketiga

    </BODY>
</HTML>

Tampilan di browser

Gambar 4 Inline Style

Linked

Linked Style mirip dengan Embedded Style, kecuali style-nya diletakkan di file terpisah dan bereksistensi CSS. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.

Stylelinked.css

.style1{
    color: red;
    font-style: italic;
}
.style2{
    color: blue;
    font-style: inherit;
}
.style3{
    color: lawngreen;
    font-style: oblique;
}

File Linked Style.html

<HTML>
    <HEAD>
        <TITLE>Linked Style</TITLE>

        <link rel="stylesheet" href="stylelinked.css" type="text/css">

    </HEAD>
    <BODY>
        <P class="style1">
        Ini paragraf pertama

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

        <P class="style3">
        Ini paragraf ketiga

    </BODY>
</HTML>

Tampilan di browser

Gambar 5 Linked Style

SEKIAN TERIMAKASIH

AY✨

1. CASCADING STYLE SHEET (CSS)

Cascading Style Sheet (CSS)

Penerapan ketiga jenis style CSS

Share this

Related Posts