html5Hallo Teman-teman, apa kabarnya ? Semoga baik-baik saja yah, amin.

Pada kesempatan kali ini saya akan berbagi artikel mengenai cara memasang kode CSS pada HTMl, untuk memasang kode CSS ke dalam HTML terdapat tiga cara. Dimana ketiga cara ini memiliki fungsi yang sama, namun cara pemasangannya saja yang berbeda, Kali ini saya akan menjelaskan dulu cara memasang CSS dengan cara internal style, nah biar tidak penasaran silahkan teman-teman simak penjelasan berikut ini.

Cara memasang CSS terbagi menjadi:

  1. Internal style sheet
  2. External style sheet
  3. Inline stylesheet
  1. internal CSS

Cara pertama memasang CSS ke dalam html yaitu dengan meletakkan kode CSS didalam dokumen HTML. Dimana cara menambah kode CSS diantara tag HTML <head>…</head>. Cara memasang kode CSS ini cukup efektif akan tetapi kita harus menulis kode CSS kesemua halaman HTML yang menggunakan kode CSS. Nah, selanjutnya kita harus tahu cara memasang atau penulisan kode CSS ke dalam HTML. Berikut contoh scriptnya:

<style type=”text/css”>
Selector {Property1: value1; property2: value2}
</style>

Keterangan: Dimulai dengan tag <style type=”text/css”> dan diakhiri dengan </style>. Selector bisa disebut identitasnya atau nama tag yang isinya akan diatur pada CSS. Suatu block selektor ditandai dengan kurung kurawal pembuka dan penutup {} dan didalamnya terdapat properti serta nilai/value yang diberikan.

Contoh pemasangan kode CSS ke dalam HTML:

<html>
<head>
<title> Penambah CSS ke HTML </title>
<style type=”text/css”>
p {color: white;}
body {background-color: gray;}
</style>
</head>
<body>
<p> Hallo, Saya sedang belajar memasang CSS ke HTML </p>
</body>
</html>

Beberapa contoh properti untuk paragraf dan header CSS:

p {margin-left: 20px} /*atur jarak dari kiri 20px*/
P {font-family:”sans serif”} /*jenis font sans serif*/
p {text-align: center; color: red} /*rata tengah, warna merah*/
body {color: black} /*warna hitam*/
p { text-align: center; color: black; font-family: arial }
h1, h2, h3, h4, h5, h6 { color: green } /*warna header hijau*/

Nah teman-teman itulah penjelasan cara memasang CSS untuk internal style, untuk external dan inline CSS saya akan menjelaskan pada pertemuan selanjutnya.

Baiklah teman-teman cukup sekian artikel kali ini, semoga bisa bermanfaat, sampai ketemu pada artikel selanjutnya 🙂