Home CSS Pengenalan CSS

Pengenalan CSS

Pengenalan CSS
Sering sekali kita melihat website yang memiliki tampilan menarik, cantik dan rapih sehingga kita dibuat nyaman berlama-lama "belusukan" di website tersebut. Apalagi pada masa kini tampilan website dapat menyesuaikan dengan resolusi layar gadget, istilah ini sering disebut dengan sebutan responsive template atau mobile template, semua itu dapat kita lakukan dengan menambahkan script CSS pada dokumen HTML. Lalu Apa itu CSS?, seperti apa bentuknya?, mari kita mengenal CSS bersama-sama.

Apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheet yang kegunaannya untuk mengatur tampilan dokumen HTML seperti pengaturan warna, jarak antar elemen, tombol, bahkan pengaturan file gambar. CSS hanyalah kumpulan script pelengkap agar dokumen HTML dapat tampil lebih cantik dan dinamis. Sejak ditemukannya CSS pada awal dekade 90an, CSS terus berkembang hingga kini versi CSS telah mencapai versi ke-3.
CSS dikembangkan oleh W3C, yaitu organisasi yang mengembangkan teknologi internet bertujuan untuk mempermudah proses penataan halaman website.

Sintaks CSS

Cara penulisan sintaks CSS secara umum sebagai berikut:


Keterangan kode CSS diatas ialah:
Selector merupakan tag HTML atau elemen (class / ID) yang dipilih.
Property adalah atribut yang akan diatur nilainya.
Value merupakan nilai dari property, dapat berupa angka atau teks.
Arti dari kode CSS di atas adalah teks pada tag h1 akan berwarna merah dengan menggunakan property color dan valuered

Penulisan Kode CSS

Terdapat tiga cara untuk penulisan kode CSS, yaitu: Inline style, Internal style sheet, dan External style sheet. Berikut penjelasan tentang ketiga cara penulisan kode CSS tersebut:

  • Inline style

    Inline style adalah kode CSS yang ditulis pada atribut element HTML. 
    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <title>Inline Style</title>
    
    </head>
    
<body>
    
    <h1 style="color:#454545">Halo apa kabar?</h1>
    
    <p style="text-align:justify; font-weight:400;">untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>

  • Internal style sheet

    • Internal style sheet ditentukan dalam elemen <style>, di dalam bagian <head> pada halaman HTML. 
    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <title>Internal style sheet</title>
    
        <style>
    
            h1 {color:#454545;}
    
            p {text-align:justify; font-weight:400;} 
    
        </style>
    
    </head>
    
<body>
    
    <h1>Halo apa kabar?</h1>
    
    <p>untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>

  • External style sheet

    • External style sheet yaitu, penulisan kode CSS yang terpisah dari halaman HTML.
    Contoh kasus seperti berikut:

    dibawah ini adalah kode CSS yang terpisah dengan file HTML, dengan nama file external.css 
    
 h1 {
    
        color:#454545;
    
}
    
 p {
    
       text-align:justify;
    
       font-weight:400;
    
}
    dalam file CSS tidak boleh mengandung tag HTML apa pun. File CSS harus disimpan dengan ekstensi .css

    dan dibawah ini adalah halaman HTML. 
    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <title>External style sheet</title>
    
        <link rel="stylesheet" type="text/css" href="external.css">
    
    </head>
    
<body>
    
    <h1>Halo apa kabar?</h1>
    
    <p>untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>
    Setiap halaman harus menyertakan link ke file CSS yang telah dibuat dan dipanggil menggunakan elemen <link>. Elemen <link> diletakkan didalam bagian <head>.

Selektor CSS

Selektor CSS digunakan untuk menentukan elemen HTML berdasarkan nama element, id, class, atribut, dan lainnya.

  • Selektor Element

    • Penulisan selektor element berdasarkan tag HTML yang digunakan, seperti tag <h1>, <div>, <p>, dan tag HTML lainnya. Contoh penulisannya seperti di bawah: 

    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <title>Internal style sheet</title>
    
        <style>
    
            h1 {color:#454545;}
    
            p {text-align:justify; font-weight:400;} 
    
        </style>
    
    </head>
    
<body>
    
    <h1>Halo apa kabar?</h1>
    
    <p>untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>

  • Selektor Class

    • Penulisan selektor class menggunakan karakter titik (.), diikuti oleh nama class, contoh penulisannya class="teks1". Lebih jelasnya lihat kode HTML di bawah ini: 

    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <style>
    
           .teks1{
    
               text-align:justify;
    
               color:#000000; 
    
            } 
    
        </style> 
    
    </head>
    
<body>
    
    <h1>Halo apa kabar?</h1>
    
    <p class="teks1">untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>
    Selektor class dapat digunakan pada beberapa elemen HTML. Penamaan nama class tidak bisa diawali dengan nomor.

  • Selektor Id

    • Cara menggunakan selektor id, gunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Nama elemen id harus unik dalam satu halaman, jadi nama id digunakan untuk memilih satu elemen unik. Penulisan selektor id menggunakan karakter hastag (#), diikuti oleh nama id elemen, contoh penulisannya id="teks2". Lebih jelasnya lihat kode HTML di bawah ini: 

    
<!DOCTYPE html>
    
<html>
    
    <head>
    
        <style>
    
           #teks2{
    
               text-align:justify;
    
               color:#000000; 
    
            } 
    
        </style> 
    
    </head>
    
<body>
    
    <h1>Halo apa kabar?</h1>
    
    <p id="teks2">untuk kamu yang tidak pernah ditanyakan kabarnya</p>
    
</body>
    
</html>
    Penamaan nama id tidak bisa diawali dengan nomor.

  • Menggabung Selektor

    • Jika kita memiliki beberapa elemen HTML dengan kode CSS yang sama, maka elemen HTML tersebut dapat kita gabungkan kode CSS-nya, dengan begitu kode CSS tidak terlalu panjang penulisannya.

    Contoh penulisan kode CSS sebelum selektornya digabungkan 
    
 h1 {
    
       font-size: 24px;
    
       color: #454545;
    
}
    
 p {
    
       font-size: 24px;
    
       color: #454545;
    
}

    Setelah selektornya digabungkan maka panulisan kode CSS akan seperti ini 
    
h1, p {
    
       font-size: 24px;
    
       color: #454545;
    
}
    gunakan tanda koma (,) untuk memisahkan selektor satu dengan selektor lainnya
Sekian tutorial tentang pengenalan CSS. Semoga tutorial ini dapat berguna untuk kita semua

Referensi:

https://www.w3schools.com/css/css_howto.asp
https://www.w3schools.com/css/css_syntax.asp
Jayan. 2010. CSS untuk Orang Awam. Jakarta: Maxikom

Next article Next Post
Previous article Previous Post

Tentang Penulis

Ikhsan Alif Rusmana
Seorang pegawai honorer yang suka berbagi pengetahuan dan pengalaman tentang desain yang disajikan dalam bentuk tutorial di blog sandesain, walau terkadang dalam pembuatan tutorialnya suka mencuri-curi waktu di tempat kerja.

Subscribe to: Post Comments (Atom)