Beranda / HTML

Pengenalan Dasar CSS

Oleh theasgard29 Posting Komentar

 Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet, berguna untuk mengatur tampilan pada dokumen HTML misalnya kita dapat melakukan pengaturan jarak antar baris, teks,warna dan juga kita dapat membuat design layout.

CSS dikembangkan oleh W3C yaitu organisasi yang mengembangkan teknologi internet bertujuan untuk memudahkan penataan pada halaman website. perlu diketahui bahwa CSS hanya berguna sebagai pelengkap agar dikumen HTML bisa tampil dengan lebih menarik bukan untuk menggantikan HTML.

Kode CSS bersifat lintas platform yang berarti dapat dijalankan pada berbagai sistem operasi dan browser.

Syntax CSS 

penulisan kode CSS secara umum seperti berikut :
selector{property:value}

  1. Selector adalah tag HTML atau elemen dapat berupa class atau ID.
  2. Property adalah atribute yang akan kita atur
  3. Value adalah nilai dari property yang akan diberikan.
misalkan kita akan mewarnai sebuah tag p (paragraph) maka penulisan kodenya adalah sebagai berikut :

p{color:red}

Terdapat tiga cara penulisan CSS yaitu :
  1. Inline style
  2. Header style
  3. Linked CSS

Inline Style 

inline style adalah penulisan CSS secara langsung dalam elemen HTML, berikut adalah contoh penulisan inline style :
<p style="color:red"> ini adalah contoh penggunaan inline style CSS </p>

<p style="color:red"> adalah contoh inline style, struktur penulisan pun sama yaitu terdiri dari attribute dan value dimana yang menjadi attribute nya adalah color dan value nya adalah red.


Header Style

cara penulisan header style berarti kita menuliskan kode CSS diantara elemen header pada dokumen HTML, penulisan kode CSS menggunakan Header Style akan lebih rapi dan ringkas karena kode yang kita tuliskan tanpa menuliskan nya secara berulang kali. cara mendefinisikan kode CSS nya sebagai berikut :  

<!DOCTYPE html>
<html>
<head>
  <title>Contoh header style CSS</title>
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
     h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
</head>

<body>
  <h2>bisa digunakan untuk membuat judul</h2>
  <p>ini adalah contoh paragraf</p>
</body>
</html>

Jika kita perhatikan pada kode diatas memiliki element style dibawah title, element style itulah yang digunakan sebagai tempat untuk meletakkan kode CSS. Contoh lain Header style :

<!DOCTYPE html>
<head>
    <title>Contoh CSS Header Style</title>
    <style>
        h1 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: red;
        }

        h2 {
            font-family: Arial, Helvetica, sans-serif;
            font-style: italic;
            color: blueviolet;
        }

        p {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 18px;
            color: navy;
        }
    </style>
</head>

<body>
    <h1>Contoh Header Style</h1>
    <h2>Contoh Header Style</h2>
    <h3>Contoh Header Style</h3>
    <h4>Contoh Header Style</h4>
    <h5>Contoh Header Style</h5>

    <p> contoh css inline pada element paragraf satu</p>
    <p> contoh css inline pada element paragraf dua</p>
    <p> contoh css inline pada element paragraf tiga</p>
</body>
</html>

Linked CSS

linked CSS adalah cara penulisan CSS secara terpisah dengan dokumen HTML, dengan menggunakan linked CSS kita tidak perlu membuka dokumen HTML untuk mengedit CSS, kemudian sebuah file CSS dapat kita gunakan pada file HTML yang berbeda. yang perlu kita lakukan adalah mendeklarasikan file tersebut diantara element header.

penulisan kode pada linked CSS tidak berbeda dengan inline dan header style format file CSS adalah .css, kita langsung praktek kan kode diatas menjadi linked CSS :

Pertama kita perlu memisahkan antara code CSS dan HTML pada file yang terpisah berikut adalah kode CSS yang diberi nama style.css


h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: red;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: blueviolet;
}
p {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
    color: navy;
}

Kemudian berikut adalah kode HTML nya :


<!DOCTYPE html>
<head>
    <title>Contoh CSS Header Style</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>

<body>

    <h1>Contoh Linked CSS Style</h1>
    <h2>Contoh Linked CSS Style</h2>
    <h3>Contoh Linked CSS Style</h3>
    <h4>Contoh Linked CSS Style</h4>
    <h5>Contoh Linked CSS Style</h5>

    <p> contoh Linked CSS pada element paragraf satu</p>
    <p> contoh Linked CSS pada element paragraf dua</p>
    <p> contoh Linked CSS pada element paragraf tiga</p>
</body>
</html>

Perlu diperhatikan bagaimana cara melakukan pemanggilan file CSS, pada kode diatas file nya diberikan nama style.css, pemanggilan nya adalah : <link rel="stylesheet" href="style.css" type="text/css"/> tanpa melakukan pemanggilan tersebut code CSS tidak akan berjalan dengan baik.

Class dan ID pada CSS

Contoh sebelumnya pada Header CSS dan Linked CSS  jika kita akan memasang CSS pada tag <p> / paragraf misalkan kita akan mengubah warna teks menjadi merah maka semua paragraf yang ada tag <p> akan berwarna merah, namun bagaimana jika kita ingin memberikan warna yang berbeda, tentu saja tidak akan bisa kecuali jika kita menggunakan inline CSS, sedangkan penggunaan inline CSS tidak direkomendasikan karena coding tidak bisa terlihat rapi dan membuat loading halaman menjadi lambat.

Solusi dari permasalahan tersebut dapat diatasi dengan meggunakan Class atau ID pada tiap-tiap tag kemudian diberikan code CSS yang berbeda, perbedaan Class dan ID tersebut adalah jika menggunakan Class maka nama Class tersebut dapat digunakan secara berulang-ulang, sedangkan jika kita menggunakan ID harus unik atau berbeda pada tiap tag atau elemen. Simbol penggunaan Class pada coding CSS adalah "." (titik) sedangkan simbol ID menggunakan tanda "#" (Pagar). sebagai contoh kita akan modifikasi coding HTML yang ada diatas sebagai berikut :

coding style.css

.merah {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: red;
}
.biru {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: blue;
}
#hijau {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
    color: green;
}
#kuning {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
    color: yellow;
}
#ungu {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 18px;
    color: violet;
}

coding HTML nya sebagai berikut :


<!DOCTYPE html>
<head>
    <title>Contoh CSS Header Style</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>

<body>

    <h1 class="merah">Contoh Linked CSS Style</h1>
    <h2 class="merah">Contoh Linked CSS Style</h2>
    <h3 class="merah">Contoh Linked CSS Style</h3>
    <h4 class="biru">Contoh Linked CSS Style</h4>
    <h5 class="biru">Contoh Linked CSS Style</h5>

    <p id="hijau"> contoh Linked CSS pada element paragraf satu</p>
    <p id="kuning"> contoh Linked CSS pada element paragraf dua</p>
    <p id="ungu"> contoh Linked CSS pada element paragraf tiga</p>
</body>
</html>

untuk lebih lanjut anda bisa lihat referensi code CSS di W3Schools CSS Reference

Posting Komentar untuk "Pengenalan Dasar CSS"

Posting Komentar