Cara Memasang CSS ke Dalam HTML

SeputarTI.Com | Untuk memasang kode CSS ke dalam HTML terdapat tiga cara. Dimana ketiga cara ini memiliki fungsi yang sama, namun cara pemasangannya saja yang berbeda.

  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*/

2. External CSS

Cara memasang CSS ke dalam HTML berikutnya adalah dengan memanggil file CSS yang bisa berada dalam satu folder atau luar folder. Artinya kode CSS tidak dalam satu file/dokumen dengan kode HTML. Cara kerjanya kode CSS dengan format .css lalu di panggil ke dalam file berformat .html. Cara ini lebih efektif dan lebih mudah dalam pengeditan.

Browser akan membaca definisi style dari file .css dan menerapkan sesuai dengan tag yang ada pada html. Pada dokumen html untuk memanggil file css dengan atribut href=”namafilecss” dimana diletakkan antara tag <head></head>. Untuk lebih jelasnya kita lihat cara memasang CSS ke dalam HTML berikut ini:

<html>
<head>
<title> Belajar CSS </title>
<link rel=”stylesheet” type=”text/css” href=”css.css”>
</head>
<body> <h3>Memasang CSS ke dalam HTML </h3>
</body>
</html>

Simpan HTML tersebut dengan nama belajar.html atau bebas dengan format .html. Lalu kita buat file CSS dengan text editor lagi dan kita simpan dengan format .css. Berikut isi dari file css.css.

h3 {text-align: center; color: red}

Letakkan satu folder file belajar.html dengan css.css diatas. Lalu jalankan file belajar.html di browser. Maka hasilnya teks h3 berwarna merah dan posisinya ditengah halaman. Itu tadi cara meletakkan CSS ke dalam HTML.

3. inline CSS (CSS dalam baris HTML)

Cara meletakan kode CSS ke dalam HTML ini bisa dikatakan kurang efisien. Karena kita hatus menyisipkan kode CSS terhadap semua tag html yang ingin diberikan kode CSS diantara tag <body></body>. Misalkan memasang CSS ke dalam HTML pada tag <b> atau bold dan juga tag underline. Is writing CSS script in HTML tag. Untuk lebih Jelasnya memasang CSS HTML inline adalah :

<html>
<head>
<title> Memasang CSS </title>
</head>
<body>
<b style=”color:blue; font-family:forte; font-size:3em;”>CSS dalam baris HTML </b>
<u style=”color:red; font-size:20pt;”>Meletakkan CSS dalam HTML</u>
</body>
</html>

Keterangan : Pada tag bold HTML, kita memasang CSS dengan memberi kata style dimana terdapat pengaturan/propertis seperti warna, font, ukuran, dan masih banyak lagi. Hal ini juga berlaku untuk tag gambar. Untuk mencobanya silahkan kopas kode tersebut dan simpan dengan format .CSS.

Hasil menambahkan CSS dalam HTML diatas sebagai berikut:

CSS dalam baris HTML
Meletakkan CSS dalam HTML

Silakan jika ada pertanyaan seputar cara memasang CSS ke dalam HTML tinggalkan pesan saja. Makasih…..

About Ganang Julianto 254 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

9 Comments

  1. Wah terimakasih gan artikel tentang cara memasang css ke dalam html. saya sendiri lebih gampang menggunakan cara yang pertama (Internal CSS) dan juga cara yang kedua (Eksternal CSS) karena kedua cara tersebut memang efektif dalam pembuatan template blog terutama.

    Dan untuk cara yang ketiga dengan Inline CSS itu agak ribet gan 😀

    BDW thanks gan artikelnya semoga berkah 🙂

    • Hampir mirip ditutorial Gan. bagian 3. inline CSS (CSS dalam baris HTML). tapi alangkah baiknya dengan eksternal. tinggal ngasih selector aja. bisa id atau class

Leave a Reply

Your email address will not be published.


*