Tutorial Lengkap Belajar Css # Apa Itu Css?

Ketika kita sudah berhasil membangun sebuah halaman web menggunakan html.
Tahap selanjutnya adalah kita mendekorasi halaman tersebut agar lebih menarik untuk dilihat.
Disinilah css berperan dalam merekontruksi tampilan dari halamn web serta membuat halaman tersebut terlihat rapi ketika di buka di berbagai ukuran layar.
Css akan mengatur tataletak elemen, ukuran elemen, warna teks, latarbelakang dan lain sebagainya.

Gambar di atas adalah contoh jika kita membuat web tanpa css, tidak ada struktur, tata letak tidak rapi dan tidak ada desain yang sama sekali.

advertisement

Oleh karena itu, mempelajari css adalah hal yang wajib setelah kita menguasai html.
Pada kesempatan kali ini kita akan belajar bagai mana mendesain html dengan menggunakan css.

Baik mari kita mulai dengan pertanyaan,

Apa Itu CSS?

Css adalah singkatan dari Casecade Style Sheet, sebuah aturan yang ditulis untuk mendesain halaman web sehingga terlihat rapi dan terstruktur.

Sama seperti halnya html, css juga tidak termasuk bahasa pemrogramman karena fungsinya yang hanya mengatur komponen html.

Css akan mendekorasi tata letak dari sebuah element html, mengatur lebar dan tinggi dari element, mengatur fonts, memberikan warna pada teks, mengatur latar belakang dan lain sebagainnya. 

Tools Yang Digunakan Untuk Menulis Kode Css

Seperti halnya html, tools yang digunakan untuk menulis kode css hanyalah text editor dan web browser. 
Tidak ada IDE khusus yang perlu kita install, cukup notepad dan EI kita sudah bisa menulis kode css.
Untuk saya sendiri, saya lebih sering menggunakan notepad ++ dan visual code. 
Kemudian untuk browser, usahakan menggunakan versi yang terbaru.

Cara Membuat Kode Css

Css memiliki format penulisan yang harus kita ikuti agar kode yang kita tulis dapat di eksekusi oleh browser dan diimplementasikan pada element html.

advertisement

Format penulisan css ditunjukan pada gambar berikut,

Penjelasan:

1. Selector  digunakan untuk memilih element yang ingin kita atur propertinya, selector bisa berupa tag element ataupun atribut element (berupa id, class dan lainya).
2. Properti adalah variable-variable dari element yang bisa kita atur nilainya seperti color, font, background, border, margin dan lain sebagainya.
3. Nilai properti adalah nilai yang kita berikan pada properti tertentu.
4. Block style adalah satu blok kode css untuk satu selector

Cara Mengimplementasikan Css Kedalam Dokumen Html

Untuk mengimplementasikan kode css, ada tiga cara yang bisa kita lakukan yaitu dengan menautkan css dari luar (Eksternal Css), menyisipkannnya di dalam dokumen html (Internal Css) dan langung mendeklarasikan di element html pada attribute style (inline).

Menautkan Kode Css (Eksternal Css)

Menautkan css adalah cara dimana kita memisahkan kode css dari kode html.
Css yang kita buat di tulis pada file tersendiri dengan format type .css.

Cara ini sangat direkomendasikan karena kode css terpisah dari kode htmlnya, sehingga kode menjadi lebih rapi dan terstruktur. Dan berikut kelebihan dan kekurangan eksternal css,

Kelebihan Eksternal Css

1. Dokumen html menjadi lebih rapi karena tidak di sisipi kode css
2. Reusable atau css bisa di gunakan untuk halaman yang lain.
3. Ukuran file html menjadi lebih kecil
4. Css akan tersimpan di cache sehingga browser tidak harus terus terusan mendownload script cssnya ketika di muat ulang.

Kekurangan Eksternal Css

1. Jika css yang kita tautkan bersifat global atau di gunakan di berbagai halaman web dengan desain yang berbeda-beda, artinya ada banyak style yang di deklarasikan pada dokumen css  tersebut, untuk menangani berbagai desain halaman. Ini mengakibatkan banyak kode yang tidak terpakai saat membuka halaman tertentu sehingga mengurangi efisiensi ketika load halaman web.
2. Ketika html gagal menautkan css, tampilan html menjadi berantakan seperti ketika tidak menggunakan css.

Cara membuat eksternal css

1. Buka text editor kalian, dan silahkan kalian tulis kode css berikut
   

   body{
     color:red;
     background-color:#eaeae;
     font-size:17px;
   }

2. Simpan didalam folder yang sama dengan file html yang sudah dibuat dengan nama bebas dan tipe ektensi [.css]
   
3. Buka file html kita dan di dalam tag head tulis kode berikut,
   

   <link rel="stylesheet" href="[Nama File Css].css">

   Contohnya seperti kode html berikut,

   <!DOCTYPE html>
   <html lang="id-ID">
     <head>
       <title>Belajar Eksternal Css</title>
       <link rel="stylesheet" href="style.css">//Ini Kode Eksternal Css
     </head>
     <body>
         <p>Belajar Eksternal Css</p>
     </body>
   </html>

   Kita sudah berhasil membuat eksternal css dan mengimportnya kedalam dokumen html. 
   Lalu gimana kalo file css ada di dalam sub folder?.
   Tinggal kita tambahkan nama folder di dalam attribute href nya, seperti berikut,

   <link rel="stylesheet" href="[Nama Folder]/[Nama File Css].css">

   Dan jika ada di luar folder html, kita bisa tambahkan "../", contohnya seperti berikut,

   <link rel="stylesheet" href="../[Nama File Css].css">

Menyisipkan Kode Css (Internal Css)

Menyisipkan css atau  embed css adalah cara dimana kita menuliskan kode css langsung pada dokumen html yang biasanya diletakan pada didalam blok tag " <head> ". Cara ini biasanya dilakukan ketika kode css yang ditulis hanya sedikit.

advertisement

Kelebihan Internal Css

1. Tidak perlu khawatir gagal memuat kode css karena css langsung di tulis di dokumen html
2. Css yang ditulis menjadi lebih optimal karena khusus menghandle halaman html yang berkaitan

Kekurangan Internal Css

1. Kode css tidak bisa di gunakan di halaman lain
2. Ketika kode css yang di sisipkan terlalu banyak, kode html menjadi berantakan dan ukuran file html menjadi lebih besar.

Cara membuat internal css

Untuk membuat internal css, kita menggunakan tag "style" dan kita sisipkan pada dokumen html.

1. Buka file html kalian
2. Didalam tag head kita buat tag style seperti berikut,
   

   <style>
       /*tulis kode css disini*/
   </style>

   Contoh kodenya seperti berikut,

   <!DOCTYPE html>
   <html lang="id-ID">
     <head>
        <title>Belajar Eksternal Css</title>
        <style>
   	body{
   	   color:#FFF;
   	   background-color:#eaeae;
   	   font-size:17px;
   	 }
        </style>
     </head>
     <body>
         <p>Belajar Eksternal Css</p>
     </body>
   </html>

Attribute Style (Inline Css)

Cara yang ketiga adalah langsung mengatur style pada element yang dituju.
Cara ini bisa kita lakukan ketika kita hanya ingin mengatur satu element saja beserta turunannya.

Kelebihan Inline Css

1. Lebih mudah dilakukan
2. Styling akan didahulukan 

Kekurangan Inline Css

Dokument html akan terlihat berantakan

Cara membuat inline css

Untuk melakukan inline css kita hanya perlu menambahkan atribut style pada element yang ingin kita atur, kodenya seperti berikut,

style="color:#FFF;background-color:#eaeae;font-size:17px"

Contoh kodenya seperti berikut,

<!DOCTYPE html>
<html lang="id-ID">
  <head>
    <title>Belajar Eksternal Css</title>
  </head>
  <body style="color:#FFF;background-color:#eaeae;font-size:17px">
      <p>Belajar Eksternal Css</p>
  </body>
</html>

Selamat kamu sudah berhasil membuat css dengan tiga cara.

Tahap selanjutnya kita akan belajar rules cara penulisan selector atau keyword.

advertisement

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share dibawah.
Jika ada hal yang ingin di tanyakan atau disampaikan silahkan tulis di kolom komentar,

Big thanks!