HTML Programming 7 - CSS di HTML ~ Open Networking

Assalamu'alaikum

Selamat sore, salam programming!!. Membahas kelanjutan pembahasan mengenai html kembali. Di pembahasan kali ini kita akan bahas tentang css atau cascading style sheet yang diterapkan di html.

CSS (Cascading Style Sheet)

CSS pada dasarnya di gunakan sebagai desain untuk sebuah website. Teknisnya digunakan dengan cara sebuah penggrupan elemen-elemen atau attribute pada suatu tag yang muncul dalam scripting html utama. Sehingga nantinya pada html kita tidak perlu lagi menambahkan attribute yang tidak di perlukan. Semua elemen atau attribute sudah di fokuskan di dalam script css.

Untuk penerapan css agar bisa di inject pada html ada tiga metode yaitu :

inline css : langsung inject pada baris html
internal css : CSS di letakkan di file yang sama dengan html
external css : CSS di letakkan di file yang berbeda. Perlu di summon dari file html.

Untuk catatan, external css peletakan file karena berbeda saya sarankan berada pada direktori yang sama.

HTML With CSS

Langsung saja kita coba ketiga metode diatas pada latihan kali ini. Tag yang digunakan untuk inject css secara internal adalah dengan menggunakan tag <style>...</style> dan untuk external bisa menggunakan 2 cara yaitu menggunakan script link rel atau juga bisa menggunakan script @import didalam tag <style>.

<link rel="stylesheet" type="text/css" href="./style.css">
<style> @import url(belajar.css); </style>

Berikut contoh lengkapnya, bisa kalian bandingkan sendiri. Yang saya beri warna merah menandakan internal dan inline css. Dan yang berwarna biru untuk external css.

<html>
<head>
    <title> Contoh Inline, Internal dan External Style CSS
    </title>
    <style type="text/css">
        @import url(belajar.css);
        h2 {
        background-color:yellow;
        color:red;
        width:680px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <h1 style="background-color:black; color:white; width:900px">
        Text ini akan berwarna putih dan background berwarna hitam - Inline CSS
    </h1>
    <h2>
        Text ini akan berwarna merah dan background berwarna kuning - Internal CSS
    </h2>
    <h3>
         Text ini akan berwarna biru dan background berwarna hijau - External CSS
    </h3>
    <h4>
        Text ini akan berwarna putih dan background berwarna merah - External CSS
    </h4>
</body>
</html>

Berikut script CSS yang di save sebagai belajar.css. Ingat dengan ekstensi css.

h4{background-color:red; color:white; width:470px;}

Berikut script CSS yang di save sebagai style.css.

h3{background-color:green; color:blue; width:510px;}

Kira-kira hasilnya akan seperti contoh berikut.

Class Vs ID Vs Sub CSS

Selain contoh diatas, kita akan coba buat project baru lagi dengan menggunakan file yang berbeda. Kali ini kita akan membuat listing css dengan menggunakan class atau id atau sub css. Jika diatas hanya di tunjukan css diarahkan untuk heading3 atau heading4 saja. Maka disini kita akan menggunakan target dari css yang ingin kita custom sendiri. Artinya memiliki variabel sendiri.

Class CSS : penulisan pada script css menggunakan titik di depan variabel (.variabel)
ID CSS : penulisan pada script css menggunakan hastag di depan variabel (#variabel)

untuk sub CSS umumnya digunakan dengan metode hirarki. Artinya penulisan baik di file css atau file html harus sesuai struktur. Karena pada dasarnya sub css akan berjalan jika penulisan sesuai dengan yang di kustomisasi pada css. Yang di maksud struktur hirarki di sini adalah semisal diawali tag judul (h1) lalu di lanjukan dengan tag dibawahnya yaitu misalnya tag paragraf (p). Langsung saja berikut contohnya.

<html>
<head>
   <title> Class dan ID Selector
   </title>
   <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
   <h1 class="judul">
       Ini Judul
   </h1>
   <p class="paragraf_pertama">
       Mahasiswa Mercu Buana Bekasi Pemrograman Web 2019
   </p>
   <p class="penting">
       Ini catatan penting
   </p>

   ==============================================================
   <br>

   <h1 id="judul">
       Ini Judul
   </h1>
   <p id="paragraf_pertama">
       Mahasiswa Mercu Buana Bekasi Pemrograman Web 2019
   </p>
   <p id="penting">
       Ini catatan penting
   </p>

   ==============================================================

   <h2><p>
   Latihan CSS 1 - Text didalam h2 dan paragraf berwarna biru dengan background berwarna merah
   </p></h2>

   <p class="judul"><i id="judul">
   Latihan CSS 2 - Text didalam paragraf dengan id judul didalam italic dengan class judul berwarna kuning dengan background berwarna biru
   </i></p>

</body>
</html>

Berikut list script CSS yang di save sebagai style.css.

.judul {
font-size: 20px;
}

.paragraf_pertama {
color: blue;

}

.penting {
        color: red;
        font-size: 1em;
}

#judul {
        font-size: 70px;
}

#paragraf_pertama {
        color: black;
}

#penting {
        color: green;
        font-size: 1em;
}

h2 p{
        color: blue;
        background-color: red;
}

p.judul i#judul {
        color: yellow;
        background-color: blue;
        font-size: 20px;
}

Kira-kira hasilnya akan seperti contoh berikut.

Demikian penjelasan mengenai css pada html semoga bermanfaat bagi pembaca. Sekian dari saya, saran dan pertanyaan bisa letakkan di komentar. Terima kasih sudah berkunjung, sampai berjumpa di pembahasan berikutnya. Salam programming!!.

Open Networking

Thursday, April 25, 2019