Belajar CSS Dasar untuk pemula

CSS yang merupakan singkatan dari Cascading Style Sheet ini merupakan sintak yang digunakan untuk bisa memberikan hiasan, gaya atau style (berupa: warna, ukuran, jenis, tata letak, dan lain sebagainya) ke dalam struktur elemen-elemen HTML dalam suatu halaman web. Artinya dengan menambahkan atau menggunakan CSS maka suatu halaman web akan nampak lebih menarik dan enak dilihat tampilannya. CSS untuk pertama kalinya diperkenalkan oleh Hakon Wium Le di tahun 1994 dengan beberapa variasi yang ada hingga saat ini yaitu CSS versi 4.

Lalu apa bedanya CSS dengan HTML? - Secara garis besarnya CSS bisa dibilang sangat berbeda dengan HTML. Jika HTML merupakan struktur kode yang digunakan untuk membuat sebuah konten pada halaman website, maka CSS merupakan sintak yang diperuntukan untuk membuat konten HTML pada halaman web tersebut terlihat lebih power full dan menarik dengan berbagai macam style dan fitur hiasan.

Struktur CSS

Untuk latihan dasar, disini saya menggunakan teks editor dengan aplikasi Sublime Text. Jika belum punya silahkan untuk mendownloadnya Disini! Dalam CSS sendiri terdiri dari 3 bagian struktur dasar, yaitu: Selector - Property - Value

Selector {Property: Value;}

Ketiga sintak diatas ini digunakan untuk membuat suatu deklarasi pada HTML halaman web.

Contoh deklarasi sintak CSS satu property:

h1 {color: green;}

artinya ini mendeklarasikan untuk semua tulisan yang ada pada h1 agar berwarna hijau.

Dalam menuliskan atau mendeklarasikan sintak CSS, kita tidak hanya bisa membuat dengan 1 property saja, melainkan bisa membuat beberapa deklarasi dengan cara menambahkan property dan value baru setelah titik koma diakhir. Untuk property CSS yang kebih banyak silahkan untuk mengunjungi link disini untuk anda pelajari lebih detail.

Contoh deklarasi sintak CSS beberapa property:

h1 {

font-family: arial; text align: center;

font-size: 20px;

}

dari sintak 3 property diatas mendeklarasikan bahwa jenis huruf yang akan digunakan pada h1 (Heading) adalah jenis huruf arial narrow rata tengah dengan ukuran huruf 20 pixel.

Cara Penempatan CSS

Terdapat beberapa cara dalam penempatan CSS pada halaman suatu web, bisa dengan menempatkan pada halaman yang sama (embed, inline) atau penempatan dengan file secara terpisah (eksternal).

1. Embed

Penulisan sintak CSS pada HTML bisa dilakukan didalam tag <style> dan ditempatkan setelah tag <head> atau <body>.

Contohnya untuk merubah tampilan h1 dengan sintak dibawah ini:


<style>
    h1 { color: green;
         font-size: 28px;
         font-family: arial;
         text-align: center;
       }
</style>

Jika dimasukkan kedalam struktur kode CSS akan seperti ini:


<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS Dasar </title>
<style>
    h1 { color: green;
         font-size: 28px;
         font-family: arial;
         text-align: center;
       }
</style>
</head>
<body>
      <h1> Judul Halaman </h1>
      <p> Contoh Penulisan kode CSS Embed. </p>
      <p> Terdapat beberapa cara dalam penempatan CSS pada halaman suatu web, bisa dengan menempatkan pada halaman yang sama (embed, inline) atau penempatan dengan file secara terpisah (eksternal). </p>
</body>
</html>

Hasilnya akan nampak terlihat seperti ini:

2. Inline

Pada penulisan sintak CSS inline ini diletakkan langsung pada elemen HTML yang akan kita rubah tampilannya. Contohnya seperti sintak dibawah ini saya letakkan pada elemen HTML tag heading atau h1:


<h1 style= color: blue; font-size: 30px; font-family: tahoma; text-align: center;> Judul Halaman
</h1>

Jika dimasukkan dalam struktur kode HTML akan seperti ini:


<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS Dasar </title>
</head>
<body>
      <h1 style= color: blue; font-size: 30px; font-family: tahoma; text-align: center;> Judul Halaman
</h1>
      <p> Contoh Penulisan kode CSS inline. </p>
      <p> Terdapat beberapa cara dalam penempatan CSS pada halaman suatu web, bisa dengan menempatkan pada halaman yang sama (embed, inline) atau penempatan dengan file secara terpisah (eksternal). </p>
</body>
</html>

Hasilnya akan nampak seperti ini:

3. External

Ini dilakukan jika file HTML dan file CSS secara terpisah. Jadi dalam prakteknya kita akan membuat2 file yang berbeda, petama kita membuat File berkestensi HTML dengan isinya adalah struktur kode HTML itu sendiri, sedangkan untuk File Keduanya berekstensikan CSS dengan isi sintak CSS untuk style Heading atau <h1> dan Paragraf atau <p>. Kalau sudah dibuat kira-kira akan nampak seperti ini:

Kode yang digunakan adalah:

Nantinya, sintak diatas akan kita letakkan pada file pertama dalam struktur HTML diantara tag <head> .. </head> atau lebih tepatnya setelah </title>


<link rel="stylesheet"; href= "File Style.css">

Jika dimasukkan dalam File pertama struktur HTML akan seperti ini:


<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS Dasar </title>
<link>
    <link rel="stylesheet" href="File Style.css"> 
</head>
<body>
      <h1> Judul Halaman </h1>
      <p> Contoh Penulisan kode CSS Eksternal. </p>
      <p> Terdapat beberapa cara dalam penempatan CSS pada halaman suatu web, bisa dengan menempatkan pada halaman yang sama (embed, inline) atau penempatan dengan file secara terpisah (eksternal). </p>
</body>
</html>

Simpan struktur HTML diatas untuk file pertama dengan nama file Belajar CSS Dasar.html

Selanjutnya kita akan buat file keduanya berupa sintak CSS seperti kode dibawah yang nantinya akan kita simpan dan kita beri nama file File Style.css


    h1 { color: red;
         font-size: 35x;
         font-family: times new roman;
         text-align: left;
       }

    p  { color: black;
         font-size: 16px;
         font-family: arial;
         text-align: justify;
       }

Setelah kedua file tersebut berhasil dibuat, Simpan kedua file tersebut dalam satu Folder. Dan silahkan untuk membuka file pertama dengan ekstensi HTML tadi pada browser.

Hasilnya akan terlihat seperti gambar dibawah ini:

Itulah 3 cara penempatan sintak CSS pada struktur kode HTML yang bisa kita gunakan dalam membuat suatu halaman web.