Pengenalan Dasar CSS dan 3 Cara Menghubungkan CSS dan HTML

Bahasa CSS menurut saya sangat penting untuk dipelajari bagi Anda seorang Web Programmer terutama Web Designer. Secara singkat, bahasa CSS sendiri digunakan untuk men-design atau mengatur tampilan pada Halaman web.

Artikel ini membahas Sejarah singkat CSS, pengertian CSS, fungsi dan tujuan dari CSS hingga cara implementasi css atau cara memasang kode CSS ke dalam HTML.

Jika Anda hanya ingin membaca tentang metode untuk memasang kode css ke dalam html, bisa langsung scroll ke-bawah di pembahasan No 4, 5, dan 6. berikut selengkapnya.

Daftar isi

1. Sejarah Singkat CSS

Sekitar tahun 1996, Netscape dan Internet Explorer(IE) pada masa itu saling bersaing untuk membuat dan mengembangkan Tag-Tag baru untuk mengatur tampilan web.

Sehingga pada Tanggal 17 Desember 1996, W3C atau disebut juga World Wide Web Consortium menjadikan CSS sebagai standard dalam pembuatan dokumen web. dengan maksud untuk mengurangi pembuatan Tag-Tag baru oleh Netscape dan IE.

Setelah CSS dijadikan bahasa standard, Netscape dan IE melepas browser terbaru mereka yang telah mendekati dengan standar CSS. Sampai saat ini terdapat tiga versi CSS yaitu : CSS-1, CSS-2 dan CSS-3.

CSS-1 dikembangkan dengan berpusat pada pemformatan dokumen Html. kemudian pada tahun 1998, W3C menyempurnakan CSS-1 dengan menciptakan standard CSS-2.

Tidak lama setelah CSS-2, sekitar tahun 2000 CSS-3 muncul. kehadiran CSS level 3 tersebut diharapkan lebih baik dari versi pertama dan kedua.

2. Pengertian CSS

CSS kependekan dari Cascading Style Sheet merupakan aturan untuk mengatur Tampilan pada sebuah web atau komponen-komponen pada web. CSS sendiri bukanlah bahasa pemrograman dan biasanya digunakan bersamaan dengan dokumen Html. Style Sheet adalah teks sederhana dengan akhiran .css yang ditulis menurut aturan dari W3C.

CSS berfungsi untuk mempercantik penampilan Html pada Web browser, seperti menentukan jenis, ukuran dan warna font, serta masih banyak lagi yang bisa dilakukan oleh CSS.

CSS bukanlah sebuah keharusan dalam membuat web, namun sangat disarankan untuk menggunakan CSS, karena CSS merupakan Script yang telah embedded dengan Html.

Bagaimana untuk membuat sebuah website hanya dengan Bahasa css dan html?. untuk mebuatnya, Pertama buatlah sebuah kerangka web yang dibuat dengan HTML. Selanjutnya Anda bisa mulai untuk mendesign kerangka tersebut menggunakan Bahasa CSS.

3. Css Internal Html

Metode Internal Style atau Embedded Style sheet pada CSS merupakan Sebuah metode yang digunakan untuk memasukkan kode css kedalam dokumen HTML dengan cara menulis kode CSS kedalam Tag <style>. Tag tersebut ditulis didalam Element Head. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> internal style sheet </title>
        <style>
            p{
                color: brown;
                font-family: arial;
            }
        </style>
    </head>
    
    <body>
        <p>
            ini adalah contoh yang diberi style css dengan metode internal style sheet
        </p>
    </body>

</html>

Metode Internal ini lebih bagus dari Metode Inline dan sangat dianjurkan untuk menguji style atau saat memiliki satu halaman web saja. dan berikut hasilnya pada halaman web.

hasil dari ngoding dengan metode internal style sheet pada css
Gambar 3

4. Css External Html

Metode External atau Link style pada CSS merupakan sebuah cara yang digunakan untuk menghubungkan sebuah file yang berisi kode css dengan dokumen html. Artinya, penulisan kode CSS ditulis terpisah dari tag-tag maupun elemen html, file css tersebut harus berekstensi .css.

Untuk menghubungkan sebuah file yang berisi kode css dengan file yang berisi kode html, Anda bisa menggunakan tag <link> dengan tambahan atribut rel dengan nilai 'stylesheet' dan atribut href dengan nilai sebuah url yang mengarah ke lokasi file css disimpan.

Tag <link> ditulis diatara tag <head> dan tag </head>. Penulisan Metode External sama dengan penulisan metode Internal, bedanya untuk metode External ditulis pada file sendiri, sedangkan metode internal ditulis langsung pada dokumen html diantara tag <style> dan tag </style>.

Sebagai contoh, buatlah file baru dengan editor notepad atau editor lainnya dengan nama style.css dan isi file tersebut dengan kode css dibawah ini.

gambar yang berisi kode css
gambar css

Setelah anda membuat file baru degan nama 'style.css'. Selanjutnya hubungkan file tersebut dengan file Html dengan cara yaitu buatlah file baru lagi dengan nama 'index.html' dan isi dengan kode dibawah ini.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Eksternal CSS </title>
        <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
        <p>
            Teks berwarna hitam dengan jenif font arial dan background-nya berwarna biru langit
        </p>
    </body>

</html>

Catatan : Untuk bisa menghubungkan 2 file diatas sesuai contoh, Lokasi file style.css dan file index.html harus sama dalam satu folder. jika berbeda, anda harus menulis ulang nilai dari attribute href dengan url yang mengarahkan ke-lokasi file css disimpan, misal "href='http://localhost/lokasi_file/style.css'". berikut hasilnya jika berhasil.

hasil dari ngoding dengan metode Eksternal css
Gambar 4

Selain metode external tersebut, Anda juga bisa menggunakan metode external lainnya yaitu menggunakan @import misal <style>@import "http://localhost/lokasi_file/style.css";</style>.

bagi yang baru belajar, metode eksternal tersebut mungkin terlihat rumit dan susah. Tapi percayalah, jika sudah terbiasa belajar denan tekun dan konsisten, pasti akan sangat mudah dilakukan.

5. Tujuan dan Fungsi CSS

Tujuan Utama dari penggunaan CSS adalah untuk memformat maupun mengatur tampilan dari halaman web. Halaman web adalah sumber informasi yang dapat diakses melalui peramban web. Suatu halaman web biasanya dibentuk dalam format/dokumen HTML atau sekumpulan elemen-elemen html. Nah, elemen-elemen html tersebut yang nantinya bisa diatur dengan kode CSS.

Hal yang paling umum dari Fungsi CSS yaitu untuk memberi warna, misal warna untuk latar belakang web, warna teks, warna gradient, bahkan Anda bisa membuat beberapa layout web hanya dengan kode CSS. Misalkan beberapa properti css yang bisa membuat layout antara lain: Pertama, Anda bisa menggunakan property display dengan nilai grid atau bisa disebut juga dengan grid view.

yang kedua, Anda bisa menggunakan property display dengan nilai flex, biasa disebut dengan flexbox. contoh : display: flex;.

yang ketiga bisa menggunakan property display dengan nilai float atau bisa juga dengan menggunakan nilai table.

6. Css Inline Html

Metode Inline Style Sheet pada CSS merupakan penulisan kode CSS yang secara langsung ditulis pada Tag Html yang ingin diberi style dengan menggunaan attribute style. Berikut contoh Penulisan Kode CSS dengan metode inline Style Sheet.

contoh kode/program/sintaks css
<body>
    <p style="color:blue;">
        ini adalah contoh kalimat yang diberi style css dengan metode inline style sheet
    </p>
</body>

dan berikut hasil screenshot dari contoh kode diatas.

hasil dari ngoding dengan metode inline style sheet pada css
Gambar 6

Penulisan dengan Metode inline style sheet tidak perlu menulis selector, karena secara langsung sudah ditulis didalam Tag Html dengan attribute style.