DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Css # Apa Itu Css?

advertisement
Apa itu css?

Ketika kita sudah berhasil membangun sebuah halaman web menggunakan html.
Tahap selanjutnya adalah kita mendekorasi dan mendesain halaman tersebut agar lebih menarik untuk dilihat.
Disinilah css berperan dalam merekontruksi dan mendesain struktur 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.
Deretcode tanpa css
deretcode tanpa css 👆
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.

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, bahasa pemrograman yang khusus untuk mendesain halaman web sehingga terlihat rapi dan menarik.
Ilustrasi Web Tanpa Css
Css akan mendekorasi tata letak dari element html, mengatur lebar dan tinggi dari element, mengatur fonts, memberikan warna pada teks, mengatur latar belakang dan lain sebagainnya. 

Alat 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 Menulis Kode Css

Untuk dapat menulis css kita perlu mempelajari format penulisan kode dari css itu sendiri.
Seperti pada gambar berikut,
Struktur Penulisan Css

Penjelasan:
  1. Keyword juga dikenal sebagai selector yang mana digunakan untuk memilih element yang ingin kita atur, selector bisa berupa tag element ataupun atribut element (berupa id, class dan type).
  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 untuk properti tertentu pada element yang kita select.

Cara Mengimplementasikan Css Kedalam 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 atribut style.

Menautkan 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 adalah cara yang paling banyak di lakukan oleh seorang web developer karena tidak langsung meulisnya pada dokumen html.
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
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
    Membuat file 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 atribut hrefnya
<link rel="stylesheet" href="[Nama Folder]/[Nama File Css].css">

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

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

Menyisipkan 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.
Kelebihan Internal cCss
  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 kodeny 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>

Cara menulis kode css pada element(Inline css)

Cara yang ketiga adalah langsung mengatur style pada element yang dituju. Cara ini bisa kita lakukan ketika kita hanya ingin menstyling pada element tertentu saja pada html.
Kelebihan Inline Css
  1. Lebih mudah dilakukan
  2. Styling akan didahulukan dari pada ekstenal dan internal css.
Kekurangan Inline Css
  1. Kode html menjadi lebih berantakan
  2. Style yang sudah di set di inline css tidak bisa di atur menggunakan internal atau eksternal css.
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"
Jika kita implementasikan pada dokumen html, maka akan seperti kode berikut ini,
<!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.

Selanjutnya kita akan belajar rules cara penulisan selector atau keyword

advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Css # Apa Itu Css?"

Silahkan berkomentar dengan baik dan bijak!