Dasar CSS


26/09/2016 05:50:23 600

CSS merupakan kependekan dari Cascade Style Sheet ialah bahasa yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam bahasa markup (https://en.wikipedia.org/wiki/Cascading_Style_Sheets). Salah satu bahasa markup seperti yang didefinisikan ialah HTML. Sehingga CSS dapat diartikan sebagai bahasa yang digunakan untuk presentasi dokumen HTML yakni dengan mengubah properti dari suatu tag HTML.

CSS dapat digunakan untuk mengubah atau mendifinisikan desain atau presentasi dari suatu tag HTML, misalkan font yang digunakan, ukuran text, warna, padding, margin, align dan sebagainya. Berikut ialah contoh penggunaan CSS untuk mengubah presentasi dari suatu paragraf:

p{
    text-align: justify;
    color: blue;
        font-family: "comic sans ms", "arial", "Tahoma", "Verdana";
}

Berdasarkan contoh diatas, ketika diterapkan maka paragraf didalam suatu halaman HTML yang menggunakan tag <p> akan memiliki sifat: (text-align) text rata kanan-kiri (justify), berwarna (color) biru (blue) dan memiliki jenis font (font-family) comic sans ms, jika font tersebut tidak ditemukan maka akan menggunakan Tahoma, jika font itu tidak ditemukan, maka akan menggunakan Verdana dan jika tidak ditemukan juga maka akan menggunakan font default yang telah dikonfigurasi pada web browser yang digunakan.

Pada contoh tersebut menggunakan tiga property untuk mendefinisikan presentasi dari paragraf, namun terdapat banyak property dalam CSS yang dapat digunakan. Untuk properti yang digunakan pada CSS dalam melihat pada http://w3school.org/css, Namun, beberapa contoh properi yang sering digunakan ialah sebagai berikut:

Properti Nilai Keterangan
font-family Jenis Font Jenis font yang akan digunakan
color Warna dasar (English), Hex, RGB Warna pada font
border ukuran garis, warna garis, jenis garis Jenis font yang akan digunakan
text-align justify, left, right, center Style text
padding angka, contoh 1px, 5px, dst Jarak antara text dengan tepi/border dalam tag HTML
margin angka, contoh 1px, 5px, dst Jarak antara satu tag dengan tag yang lain

Penggunaan

Untuk menggunakan CSS didalam dokumen HTML terdapat beberapa cara, yakni:

Atribut tag HTML

Suatu tag HTML terdapat atribut style yang mana memiliki nilai ialah CSS itu sendiri. Dengan menggunakan atribut ini kita dapat mendefinisikan suatu style dari suatu penggunaan tag tertentu didalam dokumen HTML. Berikut ialah contoh penggunaannya.

<p style="text-align: justify; color: blue; font-family: 'comic sans ms', 'arial', 'Tahoma', 'Verdana'">
    Text dari paragraf 1
</p>

<p>
    Text dari paragraf 2
</p>

Pada contoh diatas menunjukan penggunaan CSS pada suatu tag HTML dengan menggunakan atribut style. Pada contoh diatas paragraf/<p> pertama memiliki tampilan: text rata kanan-kiri, warna text biru dan jenis font comic sans. Sedangkan paragraf kedua presentasi halamannya tidak mengikut pada paragraf pertama, melainkan memiliki presentasi default. Sehingga dengan menggunakan pendekatan ini hasilnya ialah spesifik pada instance tag tertentu.

Pendekatan ini memiliki keunggulan kita dapat mendefinisikan presentasi tampilan pada suatu spesifik tag pada dokumen HTML. Namun, terdapat banyak kelemahan seperti berikut 1. Tidak efektif. ketika kita ingin mendefinsikan pada setiap tag, misalkan semua tag paragraf maka kita harus melakukan copy-paste, permasalahannya jika terdapat banyak paragraf atau terdapat banyak halaman HTML maka akan menjadi tidak efektif 2. Susah dimanajemen. 3. Tidak konsisten.

Menggunakan tag <style>

Cara lain untuk menggunakan CSS dalam suatu halaman HTML ialah dengan menggunakan tag <style> tag ini digunakan untuk membungkus pendifinisian CSS. Peletakan tag <style> didalam halaman HTML dapat dimana saja, namun umumnya diletakan pada bagian <head> bersama dengan tag <title>. Berikut ialah contoh penggunaan CSS dengan menggunakan tag <style>:

<html>
<head>
    <title>Belajar HTML</title>
    <style>
        p{ 
            color: blue;
            font-family: "comic sans ms", "arial";
            text-align: justify;
        }
    </style>
</head>
<body>
    <p>Paragraf 1</p>

    <p>Paragraf 2</p>
</body>
</html>

Pada contoh diatas mendefinisikan presentasi tag paragraf <p>, dimana tag tersebut akan memiliki warna/color biru/blue, font yang digunakan/font-family ialah comic sans atau arial atau default dan text/text-align ialah rata kanan-kiri/justify. Pada contoh diatas penerapan style akan berlaku pada semua tag didalam dokumen HTML tersebut, sehingga terdapat kekonsistenan style.

Penggunaan tag <style>pada dokumen HTML lebih baik dari penggunaan atribut style, dimana style menjadi lebih konsisten dan mudah dimanajemen. Namun, terdapat beberapa kekurangan ketika terdapat banyak halaman HTML, membuat setiap kode style harus disalin setiap ada perubahan.

Menggunakan External Resource

Cara terakhir untuk mendefinisikan suatu CSS pada halaman HTML ialah dengan membuat file khusus yang berisi definisi presentasi dari suatu halaman HTML dan menggunakannya pada halaman HTML dengan menggunakan tag <link>. Pendekatan ini mengharuskan kita membuat file terpisah antara dokumen HTML dan CSS, yang mana membuat kode kita lebih bersih dan mudah dimanajemen. Berikut ialah contoh penerapan dari pendekatan ini:

style.css

p{ 
    color: blue;
    font-family: "comic sans ms", "arial";
    text-align: justify;
}

halaman.html

<html>
<head>
    <title>Belajar HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Paragraf 1</p>

    <p>Paragraf 2</p>
</body>
</html>

Seperti pada contoh diatas, untuk mengimplementasikan pendekatan ini kita membuat sebuah file dengan extensi *.css misalkan style.css yang akan digunakan untuk mendefinisikan CSS kita, kemudian kita buat halaman HTML seperti biasa. Untuk menerapkan atau menggunakan file tersebut kita memanfaatkan tag HTML <link rel="stylesheet" href="style.css"> dimana atribut href menunjukan file css yang digunakan. Kelebihan menggunakan pendekatan ini ialah style yang digunakan akan konsisten dan mudah diorganisir/dimanajemen. Ketika kita membuat file HTML yang lainnya kita hanya perlu memasukan tag <link rel="stylesheet" href="style.css"> dan style dapat langsung digunakan. Manajemen CSS pun mudah, karena ketika file style.css diubah maka akan diterapkan pada semua halaman HTML yang menggunakannya, sehingga teradapat konsistensi style didalam aplikasi web kita.

Selector

Untuk menerapkan suatu style pada suatu tag HTML hal pertama yang harus dilakukan ialah memilih (select) tag. Tag yang terpilih disebut juga dengan selector. Terdapat beberapa selector lain yakni class dan id yang digunakan sebagai atribut pada tag HTML. Mengapa menggunakan class atau atribut? Penggunaan tag HTML sebagai selector menjamin adanya konsistensi pada style karena diterapkan pada keseluruhan halaman, namun kadang developer ingin menerapkan style berbeda pada tiap section, sehingga memerlukan suatu penanda khusus yakni dengan menggunakan class dan id.

Perbedaan antara id dan class terletak pada penggunaannya, dimana id bersifat unik tiap element HTML dan hanya satu tiap element HTML, sedangkan class dapat digunakan oleh banyak element HTML dan dapat digunakan lebih dari satu. Sehingga pada teknik penerapan style id menerapkan suatu basic style sama halnya dengan tag HTML, sedangkan untuk style lebih khusus menggunakan class. Berikut ialah penggunaan class dan id pada halaman web:

<html>
<head>
    <title>Belajar CSS</title>
    <style>
        .container{
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 20px;
        }

        .title{
            font-family: "Arial";
            font-weight: bold;
        }

        .large-font{
            font-size: 28px;
        }

        #header{
            padding-top: 20px;
            padding-bottom: 20px;
        }

        #content{
            padding:20px;
            text-shadow: 0.2em 0.1em  0.3em #333;
        }

        #footer{
            padding:2px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header" class="container">
        <div class="title large-font">Website CSS</div>
    </div>

    <div id="content" class="container">
        ...
    </div>

    <div id="footer" class="container">
        ...
    </div>
</body>
</html>