Cara Memasang CSS pada HTML Part-2

by | Dec 1, 2015 | CSS, HTML, Tips dan Trik | 0 comments

Hallo teman-teman, apa kabar nya ? semoga baik-baik saja yah, amin.

Pada kesempatan kali ini saya akan melanjutkan artikel mengenai cara memasang CSS pada HTML, kemarin saya telah menjelaskan internal CSS, nah sekarang saya akan menjelaskan lagi yang selanjutnya yaitu external CSS dan inline CSS, baiklah langsung saja silahkan teman-teman simak ulasan berikut.

  1. 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.

  1. 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/properties 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.

Nah itulah beberapa cara untuk memasang CSS pada HTMl, baiklah cukup sekian artikel kali ini, semoga bisa bermanfaat, sampai ketemu dilain kesempatan 🙂