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
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.