Belajar css 2: cara menggunakan css

cara menggunakan css untuk styling website

Bagi para calon web programmer mempelajari cara menggunakan css merupakan hal yang penting karena bagaimana kita akan mendesain sebuah website, kalau saja kita tidak tahu cara implementasi css didalamnya.

Untuk kamu yang belum membaca artikel saya sebelumnya tentang apa itu css? boleh baca artikel berikut!

Baca : Belajar CSS #1 Apa itu css? dan contoh kpdenya

Cara menggunakan css untuk styling website

Terdapat 3 cara yang dapat dilakukan ketika kita akan mendesain halaman web dengan css, diantaranya:

Inline style css
Internal style css
External style css

Berikut penjelasan dari ketiga cara menggunakan css yang saya sebutkan diatas.

Inline style css

Inline style css merupakan cara yang dapat dilakukan dengan menuliskan kode css didalam atribut style dari sebuah tag html yang akan dilakuan styling atau gaya.

Misal kita mempunyai sebuah elemen html seperti berikut.

<h1>Belajar desain web dengan inline style CSS</h1>

Diatas kita punya tag heading satu html yaitu tag <h1> dan kita mau memberi warna tulisan tersebut dengan teknik inline css.

Untuk memberi tag heading satu tersebut mempunyai warna kita harus memanggil terlebih dahulu sebuah atribut didalam tag html tersebut, yaitu atribut style.

Berikut contohnya

<h1 style="">Belajar desain web dengan inline style CSS</h1>

Saat menggunakan atribut style kita harus menggunakan simbol = (sama dengan) dan “ (tanda petik 2).

Hal ini digunakan untuk memanggil properti dan nilai dari css yang akan kita gunakan.

Karena kita tadi mau memberi warna pada tulisan atau kalimat diatas maka didalam atribut stylenya kita tuliskan properti color dan masukan nilai(value) warna yang akan digunakan.

Karena saya mau kalimat diatas berwarna hijau maka saya tuliskan green didalam nilai propertinya. Jika bingung berikut contohnya

<h1 style="color: green">Belajar desain web dengan inline style CSS</h1>

Kemudian jika kita mau menuliskan properti dan nilai css lainnya, Pisahkan saja dengan tanda titik koma(;) seperti berikut.

<h1 style="color: green;background: blue;">Belajar desain web dengan inline style CSS</h1>

Internal style css

Internal style css adalah salah satu cara yang dapat digunakan dalam styling web dengan css caranya yaitu menempatkan kode css pada pada bagian tag head html dengan menggunakan tag style didalamnya.

Didalam tag style tersebut barulah kita menuliskan kode-kode css yang akan digunakan.

Untuk lebih jelasnya coba pahami kodingan css dibawah ini yang menggunakan teknik internal style css.

<!Doctype html>
<html>
<head>
    <title>Internal Style CSS</title>
    <style>
      h1 {
        color : red;
        background: green;
      }
    </style>
</head>
<body>
    <h1>Belajar styling dengan teknik internal style CSS</h1>
</body>
 </html>

Ketika kita menggunakan teknik internal css maka antara kode css dan elemen html akan jadi terpisah seperti contoh diatas.

Kode css yang dibuat dengan cara internal style css diatas, ditempatkan didalam tag style yang juga berada didalam elemen head pada struktur codingan htmlnya. Sementara untuk elemen yang diberikan style yaitu tag <h1> berada dalam elemen body.

Kalau kita lihat tampilan websitenya, ya sama saja dengan teknik inline style css hanya saja berbeda dalam teknik yang digunakannya.

Terakhir yang akan kita bahas adalah teknik external style css.

External style css

External style css merupakan teknik yang tidak mencampurkan antara kode html dengan kode css, artinya kode html maupun kode css memiliki file masing-masing yang dibuat.

Berikut ini cara implementasi teknik external style css

Cara menggunakan teknik external style css

Yang kita perlukan dalam implementasi cara menggunakan teknik insternal style css ialah membuat 2 buah file didalam satu folder, diantaranya:

index.html
style.css

file index.html kita gunakan untuk menulis tiap baris kode-kode html, sementara file style.css tentu saja untuk menulis kode-kode css.

Dalam file index.html kita isi dengan kode berikut.

<!Doctype html>
<html>
<head>
    <title>Exernal Style CSS</title>
</head>
<body>
    <h1>Belajar styling dengan teknik external style CSS</h1>
</body>
</html>

Kemudian, dalam file style.css isi dengan kodingan dibawah ini

h1 {
    background: yellow;
}

Simpan dan coba dijalankan file index.html

Gimana apakah tampilannya berubah? Tentu saja tidak wkwk 😃. Itu karena kita belum memberikan sebuah baris kode html untuk memanggil file css yang telah kita buat dalam hal ini style.css

Bagaimana cara memanggilnya? Caranya adalah dengan menuliskan tag link pada bagian head html lebih tepatnya dibawah tag title dalam elemen tag head tersebut.

<link rel="stylesheet" href="style.css">

Oh iya, tag link yang kita gunakan ini merupakan tag khusus untuk memanggil file css yang akan menjadi file styling website kita.

Info penting

“dalam pemanggilan file css dengan menggunakan tag link html, pada bagian atribut href untuk nama file css yang kita panggil jangan sampai salah tulis contohnya jika nama file yang kita buat itu namanya style.css tapi ketika kita menulis nama file css tersebut terjadi tipo penulisan misalnya menjadi Style.css , maka yang terjadi adalah browser tak mengenali file css yang namanya Style.css itu karena nama file css yang kita buat sebelumnya pada tulisan huruf awalnya tidak menggunakan huruf besar tapi huruf kecil semua yaitu style.css , artinya perlu diperhatikan untuk penulisannya ya!”

Nah untuk kode lengkapnya pada file index.html adalah sebagai berikut

<!Doctype html>
<html>
<head>
    <title>Exernal Style CSS</title>
    <link rel=”stylesheet” href=”style.css>
</head>
<body>
    <h1>Belajar styling dengan teknik external style CSS</h1>
</body>
</html>

Kodingan diatas apabila kita buka pada browser maka tampilannya seperti dibawah ini

contoh penggunaan external style css

Mana yang lebih baik inline style vs internal style vs eksternal style css?

Dari tiga teknik style css yang sudah saya bahas yang mana sebaiknya kita gunakan.

ada dua hal yang harus kita pahami terlebih dahulu, berdasarkan tingkat projek yang akan kita kerjakan.

Apa saja itu?

Seperti apa projek web yang akan dibuat?
Apakah projek tersebut berskala besar, menengah atau kecil?

Apabila projek yang ingin dirancang tersebut berskala kecil seperti hanya ingin mengubah style satu elemen web saja maka kita bisa menggunakan teknik inline style css.

Jika projek tersebut berskala menengah seperti hanya mendesain satu halaman web saja, teknik internal style css sah-sah saja untuk digunakan.

Lalu bagaimana dengan projek skala besar, yang mempunyai tingkat kompleksitas yang tinggi, maka sebaiknya gunakan teknik eksternal style css.

Ketika masih dalam proses belajar menggunakan teknik inline style, internal style atau eksternal style css, ketiganya bisa kamu gunakan.

Lain hal saat kita membuat projek web tersebut untuk kebutuhan komersial(production) maka sebaiknya menggunakan cara eksternal style css.

Mengapa? Alasannya adalah sebagai berikut:

Kode css yang dibuat rapi dan tidak tercampur dengan kodingan html
Mudah dimaintenance untuk web yang mulai kompleks
Mudah dibaca karena file dibuat secara terpisah
Serta file yang dibuat relatif kecil karena kode css terpisah dengan kodingan html dan lain-lain
Tidak mengotori kode html yang telah ada, karena untuk menggunakan css kita hanya perlu menuliskan nama atribut classnya saja.

Nah dari alasan diatas itulah mengapa teknik ini(eksternal style css) sangat disarankan untuk digunakan oleh para web developer terkhusus untuk seseorang yang bergerak dibidang tampilan website.

Kesimpulan

Jadi artinya dalam pembelajaran kita kali ini adalah kita dapat membedakan mana penulisan css yang menggunakan teknik inline style css, internal style css dan external style css serta dapat mengetahui yang mana sebaiknya teknik styling css yang dapat kita gunakan nantinya ketika merancang sebuah tampilan website.

Ok cukup sekian artikel kita kali ini ya staykoder, nantikan artikel kami selanjutnya.

Selanjutnya belajar apa?

Silahkan baca artikel berikut untuk mengetahui bagaimana bentuk sintax dan cara pengaplikasian selector di css.

Pelajari : Belajar css 3: memahami sintax dan selector di css

Daftar Tutorial CSS

Comments