Cara Memasang CSS kedalam HTML

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Pada artikel kali ini Skripku Dotkom akan membahas bagaimana cara memasang script CSS ke dalam sebuah dokumen HTML. Untuk memasang CSS kedalam sebuah dokumen HTML terdapat 3 cara. Yaitu: External CSS, Internal CSS, dan Inline CSS. Ketiga cara ini memiliki fungsi dan tujuan yang sama, hanya saja berbeda dalam cara penggunaannya. Sebelum ke pokok pembahasan, ada beberapa hal yang harus diketahui yaitu syntax dasar CSS (akan digunakan di CSS External dan Internal). Syntax dasar-nya adalah:

selektor {properti: nilai;}
  • Selektor: Ini digunakan untuk memilih elemen yang akan kita modifikasi. Bisa berupa tag HTML (div, a, table, h1, dll) atau bisa juga dengan Selektor Id dan Class.
    Baca juga: Mengenal Selector Id dan Class.
  • Properti: Ini digunakan untuk memilih apa yang ingin dimodifikasi dari elemen yang sudah dipilih tadi. Misalkan kita ingin memberikan background pada suatu elemen, maka propertinya diisi dengan background-color.
  • Nilai: Merupakan nilai dari properti tadi. Jenis nilainya pun menyesuaikan dengan properti yang sudah dipilih, misalkan pada properti background-color kita bisa mengisi nilainya dengan menyebutkan langsung nama warnanya (contoh: red, green, black, dll), menggunakan heksadesimal contoh: #2CB5F8, ataupun rgb() contoh: rgb(44,181,248).
Contohnya seperti ini:

table {margin-left: 5px; background-color: #2CB5F8;}
     Penjelasan: Syntax diatas menunjukan bahwa pada elemen table (semua yang menggunakan tag table tanpa terkecuali) akan di-set margin sebelah kirinya selebar 5 piksel dan warna latar belakangnya berwarna #2CB5F8 (heksadesimal). Jika ingin mencari warna menggunakan heksadesimal, anda bisa memanfaatkan tool Color Picker yang disediakan SkripKu dengan meng-klik link ini.
1. External CSS
      External CSS merupakan cara penulisan dimana script CSS terpisah dengan dokumen HTML-nya. Cara ini merupakan cara yang paling sering saya gunakan terutama untuk proyek yang lumayan besar, karena kita tinggal buat satu file berekstensi .css dan menambahkan tag ini di setiap dokumen HTML-nya:

    <link rel="stylesheet" type="text/css" href="nama_file.css">
Untuk script CSS-nya kita bisa simpan di file yang berekstensi .css tadi. Ingat! file ini hanya berisi script CSS dan tidak boleh berisi tag HTML satu-pun.
     Untuk lebih jelasnya kita coba membuat web sederhana menggunakan metode External CSS ini:
1.) Buka Text Editor, kemudian masukan script dibawah:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="judul tengah"><a href="http://www.skripku.com/">Skripku Dotkom</a></p>
<p class="slogan tengah">Your Ngoding Stuff</p>
</body>
</html>
Baca Juga: Mengenal Selector Id dan Class di CSS
2.) Save dokumen diatas dengan nama eksternal.html atau apa aja lah bebas.
3.) Kemudian selanjutnya kita buat file CSS-nya. Karena diatas sudah kita definisikan bahwa style untuk halaman tersebut berada di style.css, maka selanjutnya kita harus buat file bernama style.css, isinya kurang lebih seperti berikut (silahkan modifikasi sesuka hati):

.judul {color: blue; font-size: 50px; font-family: forte;}
.judul a {text-decoration: none;}
.slogan {color: green; font-family: verdana;}
.tengah {text-align: center;}
4.) Save file diatas di folder yang sama dengan file eksternal.html tadi. Jika file eksternal.html tadi dibuka di browser maka akan menampilkan tampilan seperti ini:

2. Internal CSS
     Cara yang kedua adalah Internal CSS, yaiu dengan meletakan script CSS-nya diantara <style>...</style> yang disisipkan diantara tag <head> ataupun tag <body>, tapi saya sarankan untuk menyimpannya diantara tag <head> saja. Dengan cara ini kita hanya bisa mengatur style untuk satu halaman saja, dengan kata lain apabila kita mempunyai 100 halaman web maka kita harus mengaturnya satu per satu sebanayak 100 kali.
Contoh penggunaan-nya seperti ini:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
    <style>
    #kotak {width: 200px;height: 200px;background-color: Turquoise;float: left;}
    #lingkaran {width: 200px;height: 200px;border-radius: 50%;background-color: green;float: left;margin-left: 5px;}
    </style>
</head>
<body>
<div id="kotak">Ini kotak, disamping saya ada lingkaran.</div>
<div id="lingkaran"></div>
</div>
</body>
</html>
Maka akan menghasilkan:
3. Inline CSS
     Cara ini digunakan apabila kita hanya ingin memberikan style pada beberapa bagian tertentu di dokumen html kita. Cara ini sangat tidak efisien jika digunakan untuk proyek besar-besaran karena kita harus memberikan style pada tiap bagian di halaman web kita. Untuk menggunakan cara ini, kita bisa menyimpan script css-nya di atribut style="properti1: nilai1;dan-seterusnyaaa". Biar gak bingung yuk lihat contoh dibawah:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
</head>
<body>
<p style="font-family:forte;font-size:40px;text-align:center;color:blue;">Skripku Dotkom</p>
<p style="font-family:arial;font-size:20px;text-align:center;">Your Ngoding Stuff</p>
<p style="text-align:center;">www.skripku.com</p>
</body>
</html>
Maka hasilnya adalah:


Sekian tutorial kali ini, semoga bermanfaat,
Jika ada yang ingin ditanyakan jangan sungkan-sungkan untuk bertanya via komentar,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..


EmoticonEmoticon