Pada tutorial kali ini kalian akan belajar betapa mudahnya menambahkan style dan memformat informasi ke halaman web menggunakan CSS. Tapi, sebelum kita mulai, pastikan bahwa kalian memiliki pengetahuan HTML.
Baiklah, mari kita mulai dengan bahasa style sheet paling populer.
Memasukan CSS ke Dalam dokumen HTML
Kalian bisa memasukan CSS ke dalam dokumen HTML menggunakan 3 cara:
- Inline style, yaitu menggunakan atribut style pada awal tag HTML.
- Embedded style, yaitu menggunakan elemen <style> di bagian head dokumen.
- External style sheets, yaitu menggunakan elemen <link> yang mengarah ke file eksternal CSS.
Pada tutorial ini kita akan membahas ketiga metode tersebut satu per satu.
Inline Styles
Inline CSS adalah memasukkan kode CSS pada line HTML tepatnya pada atribut “style” pada sebuah tag. Inline CSS dapat digunakan jika penggunaan CSS tidak terlalu banyak dan cukup dibutuhkan oleh tag pemanggilnya saja.
Berikut contoh kode inline CSS:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
Jika pemakaian inline CSS terlalu banyak misalnya pada setiap tag yang memerlukannya. Maka penggunaan Inline CSS tidak efesien dan malah akan membuat “jorok” kode HTML kalian dan ukuran filepun akan semakin besar.
Embedded Styles (Internal)
Embedded style hanya memengaruhi dokumen yang menyertainya. Kode CSS internal diletakkan di dalam bagian <head> pada halaman. Class dan ID bisa digunakan untuk merujuk pada kode CSS, namun hanya akan aktif pada halaman tersebut. Style CSS yang dipasang dengan metode ini akan di-download setiap kali halaman dipanggil, jadi ini akan meningkatkan kecepatan akses.
Berikut contoh kode embedded styles CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style type="text/css">
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tips: Tipe atribut dari tag <style> dan <link> (yaitu type = “text / css”) mendefinisikan bahasa dari style sheetnya. Atribut ini murni informasi. Kalian dapat menghilangkan ini karena CSS merupakan bahasa standar pada HTML5
External Styles
Eksternal CSS adalah peletakkan code CSS pada sebuah file yang dilink-kan terhadap file yang memanggilnya. Pada file CSS tersebut tidak diawali oleh sebuah tag seperti <style> tetapi langsung dengan menuliskan code-code CSS. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman. Kalian bisa melampirkan eksternal styles dengan dua cara, yaitu linking dan importing.
Linking External Style
Sebelum menghubungkan, kita perlu membuat style sheet terlebih dahulu. Mari buka editor kode yang biasa kalian gunakan dan buat file baru. Sekarang ketikkan kode CSS berikut di dalam file ini dan simpan sebagai “style.css”.
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Eksternal style sheet dapat ditautkan ke dokumen HTML menggunakan tag <link>. Tag <link> berada di dalam bagian <head>, seperti yang ditunjukkan dalam contoh ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Importing External Style
Import CSS juga dapat dikatakan External CSS karena sama-sama dibuat dengan cara membuat file CSS yang terpisah dengan File HTML. Jika pada cara External CSS memasangnya hanya bisa di dalam file HTML, tetapi cara Import CSS dapat dipasang juga melalui file CSS lainnya. Cara menggunakan Import CSS adalah dengan sintak @import kemudian disertakan dengan path dimana file CSS tersebut disimpan.
Berikut contoh kodenya :
<style type="text/css">
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Demikian pula, kalian bisa menggunakan @import untuk mengimpor style sheet kedalam style sheet yang lainnya. Berikut contoh kodenya:
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}