Selasa, 04 April 2017

Belajar CSS Dasar Bagian 1 – Pendahulan

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code Masih bersama saya selaku admin dari blog lupacod. Ini adalah materi ke-dua di blog LupaCode ini, dimana pada materi yang pertama kita telah banya belajar mengenai HTML. Silahkan bagi sahabat lupacode yang baru saja gabung disini untuk mempelajari terlebih dahulu pembahasan materi dasar yang pertama atau bisa langsung masuk ke dalam halaman Daftar isi

Belajar CSS Dasar Bagian 1 – Pendahulan

      Dalam materi ini kita akan Belajar CSS dan bagaimana cara membuatnya, strukturnya serta cara menggunakannya. Sekarang kita akan bahas dulu apa itu css ??? CSS adalah singkatan dari Cascading Style Sheet dimana nanti kita bisa memerikan warna, ukuran, dan posisi dimana elemen – elemen yang telah kita buat. Sebelumnya kita lihat dulu definisinya.
“ Mekanisme sederhana yang mengatur gaya / style ( Contoh : warna, ukuran, posisi, dll ) pada halaman web (sumber: http://www.w3.0rg/style/CSS)
   Sebagai contoh kita sudah familiar dengan situs web sosial media yang satu ini yaitu www.facebook.com jika kita lihat halaman nya, dan kita akan coba nonaktifkan css pada browsernya maka akan menjadi seperti ini

Belajar CSS Dasar Bagian 1 – Pendahulan 1

     Jadi sama persis seperti yang sudah kita pelajari sebelumnya, isinya hanya html saja. Gambar, text, link, list dan sebagainya. Jadi semua websiite itu kalau engga ada css nya tampilannya hampir – hampir mirip semua. Hanya ada gambar, text, link list dan sebagainya. Jadi css lah yang bertugas agar halamannya menjadi enak dilihat, menarik, interaktif dan lain sebagainya. Jadi bermanfaat sekali apa yang kita akan pelajari pada materi kali ini.

Sebelum Ada CSS

       Dulu waktu sebelum ada css bagaimana kita kalau ingin menghias suatu halaman ? html pun bisa, meskipun dengan segala keterbatasannya. Misalkan begini saya punya sebuah halaman yang menampilkan text Hello Word seperti ini
Belajar CSS Dasar Bagian 1 – Pendahulan 2
Sebelum ada css saya menuliskannya seperti ini pada html
Belajar CSS Dasar Bagian 1 – Pendahulan 3

    Panjang sekali yah untuk 1 buah <h1> saja. Bagaimana jika untuk satu halaman ?itulah kegunaannya kita belajar css, agar dapat lebih mengerti bagaimana sebuah website bisa tampil lebih menarik, powerfull dan lain sebagainya.

Dengan Menggunakan CSS
         Dengan menggunakan css, kita lihat bagaimana css itu memisahkan antara content dengan style. Misalkan saya punya tag Html seperti ini HTML <h1> Hello Word </h1> dengan menggunakan syntax css. Kalian jangan dulu bingung dengan syntax nya karna itu kita akan pelajari di materi berikutnya. Jadi dengan saya menambahkan ini

h1 {
          font-size: 120px;
          font-family: arial;
          color: lightblue;
          text-align: center;
}

     Dengan saya menambahkan syntax ini di tempat lain, dibagian lain, jadi ga bercampur antara html dan css itu hasilnya akan sama persis seperti pada gambar tadi di atas. Dan sekarang konten dan style betul – betul terpisah dan itu yang kita inginkan.
Kita kembali ke dalam teorinya dulu yah

Apa itu CSS ?
Cascading Style Sheet
  • Aturan yang digunakan untuk menampilkan elemen / tag html. Jadi kalau html itu untuk menyajikan konten sedangkan css itu untuk mengatur gimana si konten tadi ingin ditampilkan. Apakah text nya berwarna biru, ukurannya besar, italic, dan lain sebagainya
  • Dibuat terpisah dengan HTML
  • Bertujuan untuk memisahkan konten dan style. Fungsinya seperti tadi, memisahkan antara konten dengan html.
  • 1 CSS dapat digunakan untuk banyak HTML. Jadi kalian cukup butuh 1 file css dan jika kalian punya banyak file html sekalipun kita dapat dengan lebih mudah mengaturnya.
  • 1 halaman HTML dapat terlihat berbeda jika menggunkan css yang berbeda pula. Jadi mungkin halaman html nya satu, tapi kita bisa ganti –ganti. Misalkan kalian punya website dikasih css tampilnya bagus, terus suatu saat kalian ingin merubah website itu tanpa harus menyentuh html nya, dan itu memungkinkan dengan css. Dan inilah kenapa css disebut CASCAD jadi ini adalah teknik cascading nya. Untuk membuat satu css digunakan dibanyak halaman, atau sebaliknya satu halaman bisa berganti – ganti cssnya.
Jadi gambaranya seperti ini mengenai 1 css bisa digunakan untuk banyak halaman

Belajar CSS Dasar Bagian 1 – Pendahulan 4

      Masih banyak lagi fitur – fitur yang sangat mearik lainnya yang belum dapat saya bahas disini. Kalian bisa cari atau pelajari css nya sendiri dengan mengunjungi website www.csszengarden.com
     Baiklah mungkin ini adalah penjelasan singkat mengenai css. Kunjungi terus blog website ini untuk mendapatkan materi – materi baru yang akan saya bagikan untuk sahabat lupacode semuanya. Saya rasa sekian dulu penjelasnnya nanti kita akan lanjut lagi kedalam materi selanjutnya yaitu Belajar CSS DasarBagian 2 – Anatomi CSS

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon