Hallo semua, pada kali ini kita akan belajar mengenai bagaimana kita mengkombinasikan/ menghubungkan kode HTML yang telah kita buat dengan kode CSS. Sebelumnya saya akan menjelaskan sedikit tentang CSS.
Apa itu CSS ?
CSS (Casecading Style Sheet) merupakan sebuah bahasa pemrograman yang khusus digunakan untuk mendesain suatu halaman website. Namun, seiring dengan perkembangan dunia pemrograman dan teknologi yang terus berkembang, CSS semakin banyak digunakan bukan hanya untuk HTML dan XHTML namun juga untuk mendesain tampilan suatu aplikasi Android. Biasanya CSS di akses dengan memanggil id atau class.
Fungsi dan Kegunaan CSS
CSS berfungsi untuk melakukan banyak hal, seperti misalnya mengubah ukuran font, jenis font, warna font, mengatur ukuran gambar, tabel, mengubah warna background dan lain sebagainya. Sebagai contoh, untuk mengatur font kita bisa menggunakan perintah seperti font-family (mengubah jenis font), font size (mengubah ukuran font), color (untuk merubah warna font).
Cara Penggunaan CSS
Untuk menghubungkan file .css yang telah kita buat dengan file .html atau .php, kita dapat menggunakan perintah sebagai berikut:
<link rel="stylesheet" type="text/css" href="style.css" />
fungsi dari tag <link> di atas yaitu untuk memanggil file .css yang kita buat agar terhubung dengan file .html, sedangkan atribut rel dan type berfungsi sebagai pendifinisi bahwa yang akan dipanggil adalah sebuah file yang berbentuk Style Sheet atau CSS. Kode di atas digunakan untuk menghubungkan file .css dan .html dengan directory/folder yang sama.
Bila kode .css tersbut terletak pada folder yang berbeda ma kita gunakan kode sebagai berikut :
Bila kode .css tersbut terletak pada folder yang berbeda ma kita gunakan kode sebagai berikut :
<link rel="stylesheet" type="text/css" href="../style.css" />
Bila .css terletak pada folder sebagai contoh folder "css" maka kode ditulis sebagai berikut :
<link rel="stylesheet" type="text/css" href="css/style.css" />
Cara Penulisan CSS
CSS(Cascading Style Sheet) dapat ditulis dengan beberapa cara, sebagai catatan bahwa menggunakan cara penulisan yang manapun hasilnya akan sama, hanya saja akan terlihat perbedaan setelah kita pelajari cara penulisan berikut :
- Inline CSS Style
- Internal CSS Style
- External CSS Style
Inline CSS Style
Inline CSS Style merupakan teknik penulisan kode CSS langsung didalam kode HTML yang kita buat, sehingga dalam penulisannya tidak memerlukan selector seperti id ataupun class. Kode CSS langsung ditempel didialm element HTML. Teknik ini juga cukup sering digunakan bila CSS yang kita buat tidak terlalu kompleks. Contohnya silahkan buat file dengan nama index.html.
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color:blue">Belajar CSS Dasar Di <a href="http://www.junioracademy.id">Junior Academy</a></h1>
</body>
</html>
Bila kita jalankan, maka tampilannya adalah sebagai berikut.
Bila kita perhatikan kode di atas, kode CSS kita letakkan pada elemen h1 secara langsung, yang ditandai dengan adanya atribut style ="..." . Perintah color adalah perintah css yang berfungsi untuk mengatur warna font. jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur menjadi warna biru (Blue).
Internal CSS Style
Internal CSS Style merupakan salah satu teknik penulisan kode CSS dengan meletakkan kode CSS didalam kode HTML, biasanya diletakkan didalam tag <head> pada HTML. Dan kode CSS dimulai dengan tag <style> dan di akhiri dengan tag </style>.
Contoh penulisan internal CSS Style :
<!DOCTYPE HTML> <html> <head> <title> Penulisan CSS dengan Internal Style </title> <style type = "text/css"> #tulisan{ color:10 px; } .box { background:red; padding:10 px; } </style> </head> <body> <div class = "box"> <h1 id = "tulisan"> Belajar CSS Dasar Di <a href ="http://www.junioracademy.id" > junioracademy </a></h1> </div> </body> </html>
Eksternal CSS Style
Eksternal CSS Style merupakan teknik penulisan kode CSS yang paling banyak digunakan karena membuat kode HTML tidak terlalu kotor atau bertumpuk dengan kode CSS. Teknik penulisan ini menggunakan penghubung seperti kode awal yang kita bahas di atas.
<link rel="stylesheet" type="text/css" href="file css anda">
Contoh penulisan CSS menggunakan External Style :
Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file index.html dan satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css
Isi file index.html
<!DOCTYPE HTML>
<html>
<head>
<title> Penulisan CSS dengan Eksternal Style </title>
//Penghubung ke syntax CSS
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "box">
<h1 id = "tulisan"> Belajar CSS Dasar Di <a href ="http://www.junioracademy.id" > junioracademy </a></h1> </div>
</body>
</html>
Isi file style.css
<style type = "text/css">
#tulisan{
color:10 px;
}
.box
{
background:red;
padding:10 px;
}
</style>
Simpan kedua file tersebut kedalam satu folder, kemudian silahkan jalankan. Bagaimana tampilannya ?, Silahkan komentar.
Terimakasih, sekian materi kita kali ini, kita lanjutkan dilain pertmuan.
Ahmad Subki
Posting Komentar