CSS Part 1 : Cara menginputkan Kode CSS ke dalam HTML

Setelah di dalam tutorial sebelumnya telah membahas tentang dasar dasar CSS kali ini kita akan membahas bagaimana cara menginputkan kode CSS ke dalam HTML. HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.

Hypertext Markup Language adalah standart bahasa yang digunakan untuk memformat halaman web sehingga bisa di tampilkan melalui document web. Bisa berupa
1. Publikasi document secara online.
2. Membuat tampilan halaman web.
3. Menambahkan object berupa image, audio video dll.

Nah sekarang bagaimana caranya menyisipkan kode CSS ke dalam HTML, ada beberapa metode yang bisa di gunakan diantaranya Inline Style, Internal Style Sheets, dan External Style Sheets

1. Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaannya adalah sebagai berikut:

<!DOCTYPE html>

<html>

<head>

     <title>Contoh Inline Style CSS</title>

</head>

   <body>

      <h2 style="background-color:black; color:white" >

         Text bewarna putih dan background berwarna hitam

      </h2>

   </body>

</html>

2. Internal Style Sheets

Internal Style Sheets, digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu kerangka halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> halaman HTML.

<!DOCTYPE html>

<html>

<head>

    <title>Contoh Inline Style CSS</title>

    <style type="text/css">

        h2 {

        background-color:black;

        color:white;

        }

    </style>

</head>

<body>

    <h2>

        Text bewarna putih dan background berwarna hitam

    </h2>

</body>

</html>

Kekurangan dari metode internal style sheets adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman harus memiliki kode CSS yang sama.

3.Metode External Style Sheets
digunakan untuk membuat kode CSS kedalam sebuah file tersendiri yang terpisah dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal di panggil file CSS yang sudah di buat.

kita akan membuat file belajar.css

h2 {

background-color:black;

color:white;

}

lalu file belajar.css akan kita panggil dengan menggunakan @import CSS

<!DOCTYPE html>

<html>

<head>

    <title>Contoh Inline Style CSS</title>

    <style type="text/css">

        @import url(belajar.css);

    </style>

</head>

<body>

    <h2>

        Text bewarna putih dan background berwarna hitam

    </h2>

</body>

</html>

Cara menginputkan external style sheets, bisa menggunakan tag <link> :

<!DOCTYPE html>

<html>

<head>

    <title>Contoh Inline Style CSS</title>

    <link rel="stylesheet" type="text/css" href="belajar.css">

</head>

<body>

    <h2>

        Text bewarna putih dan background berwarna hitam

    </h2>

</body>

</html>

Dari ketiga metode diatas yang paling rekomendasikan yakni menggunakan external style sheets, keuntungannya adalah file css bisa di pisahkan dan semua hahalam web dapat menggunakan file CSS tersebut. Jika ingin merubah semua tampilan halaman web kita hanya butuh merubah satu file CSS saja.