Cara Menginput Kode CSS ke Halaman HTML


  

Cara Menginput atau memasukan kode CSS ke dalam halaman HTML

HTML atau Hypertext Markup Language pada dasarnya  merupakan kumpulan kode-kode dalam bentuk tag yang disusun untuk menampilkan menampilkan objek berupa teks, gambar, audio, dan video, ataupun dokuen lainnya. Tag-tag tersebut dibuat berdasarkan fungsi dan kegunaannya, seperti untuk membuat tabel <table>, untuk membuat paragraf <p>, dan lain-lain.

Nah CSS atau Cascading Style Sheet digunakan untuk merancang tag-tag HTML tersebut agar bisa tampil lebih bagus sesuai dengan keingingn kita.

Sekarang bagaimana cara memasukan dan menggabungkan kode CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan kode CSS ke dalam dokumen HTML yaitu

  1. Inline Style 
  2. Internal Style 
  3. External Style 

1. Metode Inline Style Sheet

Metode Inline Style Sheet merupakan cara memasukan/menginput kode CSS secara langsung ke dalam kode di dalam HTML dalam ruang lingkup tag <body> dengan menggunakan atribut style. Berikut contoh penggunaan metode Inline Style CSS :

<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h1 style="background-color:blue; color:white" >
         Text ini akan bewarna putih dengan background warna biru
      </h2>
   </body>
</html>
Jika script di atas dijalankan di browser, maka akan tampil seperti di bawah ini :


2. Metode Internal Style Sheets 

Metode Internal Style Sheets atau disebut juga Embedded Style Sheets. Dengan metode ini kode CSS dipisahkan dari tag HTML,  tetapi nasih tetap ditulis dalam satu halaman HTML.
Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head></head> dari halaman HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:red;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dengan latar belakang merah
    </h2>
</body>
</html>
Jika script di atas dijalankan di browser, maka akan tampil seperti di bawah ini :



3. Metode External Style Sheet


Kalau kita perhatikan dua metode di atas yaitu inline style sheet dan internal style sheet, semua kode css digabung di dalam kode HTML, sehingga jika ada halaman html yang lain, yang memerlukan style yang sama, maka halaman tersebut pun harus memasukan kode css yang sama. Tentu saja hal ini membuat kode semua halaman html menjadi panjang. Jika ada kesalahan script tentu sangat report bagi seorang web programmer.
Jadi kelemahan dan kekurangan kedua metode tersebut adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.

Untuk mengatasi kekurangan dan kelemahan kedua metode di atas, maka diciptkanlah metode yang ketiga yaitu Metode External Style Sheets.

Metode External Style Sheets memisahkan semua kode CSS dari  semua kode HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga jika file HTML memerlukan kode css, maka cukup memanggil kode tersebut dengan memanggil filenya, tidak perlu menuliskan kode css-nya.

Sebagai contoh, kita gabungkan format css dari dua metode sebelumnya, dan disimpan dalam sebuah file yang ber-extensi css.

h1 {
        background-color:blue;
        color:white;
        }
h2 {
        background-color:red;
        color:white;
        }
simpan kode di atas ke dalam sebuah file bernama kode.css

Kemudian buat sebuah fie HTML dengan menggunakan kode css yang ada di dalam file kode.css
dan disimpan di dalam folder yang sama dengan file kode.css.


Bagaimana cara memanggil file kode.css?

Ada 2 cara memanggil file css dari sebuah halaman html.
Yang pertama dengan menggunakan tag <link>

<html>
<head>
    <title>Contoh External Style CSS</title>
    <link rel="stylesheet" type="text/css" href="kode.css"></head>
<body>
    <h1> Judul ini ini bewarna putih dan background warna biru</h1>
    <h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>

Yang kedua dengan menggunakan tag <style> dan @import url(file.css)

<html>
<head>
    <title>Contoh External Style CSS</title>
    <style type="text/css"> 
       @import url(kode.css);
    </style>
</head>
<body>
    <h1> Judul ini ini bewarna putih dan background warna biru</h1>
    <h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>






Pengertian dan Penjelasan Komponen CSS (Selector, Property, Value)

Setelah kita mempelajari Pengertian CSS, Selanjutnya kita bahas mengenai
Pengertian dan Penjelasan Komponen CSS (Selector, Property, Value).

Pengertian Selector CSS

CSS berfungsi untuk memanipulasi  atau mengubah tampilan dari HTML yang terdiri dari susunan tag. Untuk mengaitkan antara tag tag HTML yang akan dimanipulasi atau diubah, maka CSS memerlukan sebuah cara bagaimana CSS menghubungkan dan mengaitkan kodenya ke dalam tag HTML yang dimaksud. Maka cara itulah yang disebut dengan Selector CSS.

Selector digunakan untuk mencari bagian web (tag) yang akan yang tampilannya akan dimanipulasi dengan style sesuai keinginan kita. Misalnya : tag <p>, tag <h1>, tag <table>, dan lain-lain. Supaya lebih jelas mengenai selector css, perhatikan gambar di atas.

Pengertian Property CSS

Property CSS merupakan elemen atau bisa disebut sebagai atribut dari sebuah selector di dalam CSS. Property inilah yang akan diubah ubah nilainya untuk mendapatkan jenis tampilan yang kita inginkan dari sebuah tag HTML.

CSS mempunyai banyak sekali  property yang dapat kita gunkan untuk mengatur tampilan dari halaman web yang kita inginkan. Sebagai contoh, selector yang digunakan adalah untuk paragraph (tag <p>), maka propertinya adalah jenis huruf dari paragraf tersebut, ukuran huruf, warna huruf, huruf miring, huruf tebal, dan lain sebagainya. Supaya lebih jelas mengenai property css, perhatikan gambar di atas.

Pengertian Value CSS

Value CSS adalah nilai yang diberikan untuk sebuah property. Misalnya untuk untuk mengubah warna latar belakang dari sebuah selector, maka  background-color sebagai property nya yag digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya bisa kita berikan warna merah (red), warna biru (blue), hitam (black), atau putih (white).

Supaya lebih jelas mengenai value css, silahkan perhatikan gambar di atas.

Belajar CSS (Cascading Style Sheets)

Fungsi dan Kegunaan CSS

HTML (Hypertext Markup Laguage) dan CSS (Cascading Style Sheets) merupakan bagian tak terpisahkan dari teknologi pemrograman web modern saat ini. HTML dibuat dan digunakan untuk menampilkan konten dan merupakan kerangka logis dari sebuah halaman website, sedangkan CSS berfungsi mengatur beberapa gaya / style elemen-elemen HTML seperti mengganti jenis font, ukuran font, perataan, dan pengaturan lainnya dalam dokumen HTML.

Penggunaan CSS lebih dianjurkan daripada menggantikan jenis font dan pengaturan lainnya dengan menggunakan atribut HTML. CSS lebih mudah diterapkan karena untuk merubah banyak elemen HTML dengan style yang sama hanya dengan membuatkan satu style, beda dengan jika dengan menggunakan HTML yang diharuskan merubah setiap atributnya.

Perhatikan contoh berikut :

belajar css, belajar html
tampilan di atas jika menggunakan kode html biasa, bisa ditulis dengan kode sepert ini :
Script 1 :
<html>
<head>
<body>
   <title>Test Warna tanpa CSS</title>
  </head
>Saya duduk di bangku Sekolah
<font color="red"> SMK Al-Manshuriyah</font>. <br>
Sekarang saya sedang menempuh pendidikan di kelas
<font color="red"> X Semester 2</font><br>
jurasan Teknik Komputer Jaringan <font color="red"> TKJ</font>.
</body> </html>

Kemudian jika menggunakan CSS maka ditulis seperti script berikut, dan akan menghasilkan tampilan yang sama.
Script 2 :
<html>
<head>
   <title>Test Warna dengan CSS</title>
   <style type="text/css">
     .warna {
       color: red;

     }
   </style>
</head>
<body>
Saya duduk di bangku Sekolah
<span class=warna> SMK Al-Manshuriyah</span>. <br>
Sekarang saya sedang menempuh pendidikan di kelas
<span class=warna> X Semester 2</span><br>
jurasan Teknik Komputer Jaringan <span class=warna> TKJ</span>.
</body>
</html>
Coba perhatikan jika kita ingin megubah warna merah pada halaman web di atas  :
Pada Sript1 : kita harus merubah nilai atribut color dari tag font, sebanyak tag font. Dalam hal ini kita harus melakukan perubahan sebanyak 3 kali.
Pada Sript2 : kita hanya merubah nilai color pada tag style saja. Dalam hal ini kita hanya melakukan perubahan sebanyak 1 kali.

Jadi dengan CSS kita dipermudah dalam melakukan perubahan tampilan halaman web. Dengan CSS kita bisa merubah tampilan dari suatu halaman web tanpa harus merubah isi halaman tersebut.

Mari kita perlajari materi selanjutnya mengenai CSS :
1. Pengertian CSS
2. Cara Meng-input kode CSS ke dalam HTML