Cara menggunakan css untuk styling website dengan mudah

Kita bertemu lagi sobat macam-macam, kali ini kita akan membahas mengenai cara menggunakan css untuk dimasukan kedalam kodingan html kita.

Gunanya untuk apa? Ya yang pastinya adalah untuk memperbagus atau mempercantik tampilan website kita secara visual.

Untuk kamu yang belum membaca artikel saya sebelumnya tentang apa itu css?

Mari kita mulai bagaimana caranya supaya tampilan website kita bagus dengan menggunakan css.

Cara menggunakan css untuk styling website

Disini kita punya 3 cara yang dapat dilakukan ketika kita akan menyisipkan kode css kita didalam html diantaranya:

Inline style css
Internal style css
External style css

Berikut penjelasan dari ketiga cara memasukan kodingan css kita diatas kedalam kodingan html kita.

Inline style css

Apa yang dimaksud dengan inline style css? Inline style css merupakan cara yang dapat dilakukan dengan menempatkan kode css bersama-dengan tag html dimana pada tag html tersebut diberikan atribut style untuk memanggil kodingan css yang dibuat.

Maksudnya seperti apa?

Maksudnya ialah ketika kita membuat sebuah elemen html yang akan kita styling elemen tersebut dengan css dalam hal ini menggunakan teknik inline style css.

Maka elemen html tersebut kita buat seperti ini

<h1>Belajar Styling web dengan inline style CSS</p>

Diatas kita punya tag paragraf html yaitu tag <p> dengan kalimat “Belajar styling web dengan inline style CSS” dan kita mau memberi warna tulisan tersebut dengan css tapi mengunakan teknik inline style css.

Maka untuk memberi tag paragraf tersebut warna kita perlu memanggil sebuah atribut didalam tag html tersebut.

Bagaimana caranya? Caranya adalah pada tag pembuka html tersebut kita beri atribut style. Berikut ini contohnya

<p style="">Belajar styling web dengan inline style CSS</p>

Dapat dilihat saat kita menggunakan atribut style kita 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 masukan properti color untuk properti warna tulisannya dan masukan nilai(value) warna yang akan kita gunakan.

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

<p style="color: red;">Belajar styling web dengan inline style CSS</p>

Keterangan :

Style(pada inline style css) = merupakan atribut yang dimasukan dalam tag html tertentu untuk memberi gaya yang hanya dapat terjadi pada elemen html itu saja.

Color(properti dalam css) = merupakan salah satu properti css yang gunanya atau fungsinya untuk memberikan warna tulisan pada elemen html yang dibuat.

Red (value warna css) = merupakan styling warna pada css yang merupakan nilai pada properti untuk memberikan warna pada elemen html yng dibuat.

Internal style css

Apa yang dimaksud dengan internal style css? Internal css adalah salah satu cara yang dapat digunakan untuk styling pada css dengan cara menempatkan kode css pada pada bagian tag head html dengan menggunakan tag khusus yang dibuat yaitu tag style.

Itu artinya teknik internal style css ini masih berada bersama sama didalam kodingan html, istilah lainnya dituliskan didalam halaman web itu sendiri.

Maksudnya itu apa?

Maksudnya ialah teknik internal style css ini masih sama dengan teknik inline style css, karena masih dituliskan didalam file html itu sendiri hanya saja kalau inline style css dituliskan didalam tag html yang akan di styling sedangkan internal style css dtuliskan dengan tag html style yang ditempatkan pada bagian head kodingan struktur html itu sendiri.

Untuk lebih jelasnya coba lihat kodingan css dibawah ini dengan teknik internal style css.

<!Doctype html>
<html>
<head>
    <title>Internal Style CSS</title>
    <style>
    P {
    Color : red;
    }
    </style>
</head>
<body>
    <p>Belajar styling dengan teknik internal style CSS</p>
</body>
 </html>

Jika dilihat pada kodingan css diatas, ketika kita mau menggunakan css dengan teknik internal style css. Kode css yang dibuat terlihat terpisah dari kodingan elemen html yang diberikan style warna oleh css diatas.

Kode css yang dibuat dengan cara internal style css diatas, dibuat dengan menggunakan tag style yang ada didalam elemen head pada struktur kodingan htmlnya. Sementara untuk elemen yang diberikan style dalam hal ini sebuah paragraf dengan tag <p> diatas ditempatkan didalam elemen body.

Kalau kita lihat tampilan websitenya, ya sama saja seperti dibawah ini

Terakhir yang akan kita bahas adalah

External style css

Apa itu external style css? External style css merupakan teknik yang memisahkan antara kodingan html dengan kodingan css yang kita buat. Teknik ini merupakan teknik yang sangat direkomendasikan untuk dibuat oleh para web developer.

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

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

Bagaimana cara imlementasikan teknik external css ini? Oleh karena itu berikut ini cara implementasinya

Cara menggunakan teknik external style css

Caranya mudah kita buat 2 buah file pada projek yang akan kita kerjakan dan tempatkan dalam 1 folder. File tersebut diantaranya

Index.html
Style.css

File yang kita buat pertama kali adalah file html terlebih dahulu. Mengapa? Karena merupakan kerangka web yang akan kita styling dengan css nantinya.

Untuk file kedua yang kita buat barulah file css dengan format pada nama file tersebut menggunakan .css , ini menandakan bahwa file tersebut berisi kodingan css nantinya untuk styling tampilan website.

Tulis didalam file index.html tersebut dengan kodingan dibawah ini


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

Kemudian, tulis didalam file style.css dengan kodingan dibawah ini


p {
    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 baris kode dibawah ini pada bagian head html lebih tepatnya dibawah tag title dalam elemen tag head tersebut.

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

Pada kodingan diatas kita menggunakan tag link yang artinya kita akan memanggil sebuah file untuk dimasukan kedalam file html kita. File tersebut adalah file style.css karena pada atribut href kita menuliskan 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 typo pada pemanggilannya 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 sebgai berikut

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

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

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.