Tutorial Widget Margop Blog

  Belajar Mudah Css Dasar - CSS memiliki kepanjangan Cascading Style Sheet adalah merupakan bahasa pemrograman yang tersturktur dan seragam untuk mendukung file HTML. Dalam membuat website ataupun Blog pasti terdapat peran css didalamnya karena seluruh elemen dalam html diatur langsung oleh bahasa pemrograman yang satu ini baik itu tata letak, warna, background, dll.

    Peran css terhadap html tidak ubahnya seperti anatomi tubuh manusia, jika diibaratkan css adalah tulang bagi tubuh manusia yang mengatur dan mendesain setiap organ manusia tersebut hingga bisa berdiri dengan baik dan terlihat sempurna. Suatu halaman web terbagi atas dua pengaturan yakni isi yang di atur oleh html dan tampilan yang diatur melalui css. Apabila anda ingin membangun sebuah web disarankan untuk terlebih dahulu membuat isinya dengan bahasa pemrograman melalui html dan barulah atur tampilan web anda dengan css. Agar lebih mudah dipahami bisa anda lihat skenario pengaturan tampilan di bawah ini

Fungsi Kompleks Css.

• Mengatur lebar dan tinggi
• Membuat Bingkai
• Menentukan gambar
• Mengatur Halaman kolom
• Memberikan warna latar belakang
• Mengatur Tata letak
• Mengatur tombol pada halaman web
• Mengatur widget
• dll.

Demikian halnya bahasa pemrogaraman yang lain Css juga memiliki aturan penulisan terseragam.

  Sesuai gambar diatas selektor merupakan bagian Html yang akan anda atur stylenya, lalu dibuka dengan deklarasi properti "{". Masukkan nama properti sesuai ketentuan bahasa css dan berikan nilai propertinya.

Hal yang harus anda ketahui mengenai penulisan Css

• Css bersifat case-sensitive (penulisan Aku berbeda dengan AKU atau aku)
• Agar mudah dimengerti oleh bahasa pemrograman usahakan pemberian nama pada selektor memiliki makna (tidak disingkat)
• Dalam penulisan nama diperbolehkan menggunakan tanda (-) maupun ( _ )
• Menggunakan angka untuk penulisan nama selektor diperbolehkan namun tidak diperkenankan untuk spasi atau tanda yang lain.

Berikut jenis-jenis selektor yang bisa anda kenali.

1. Tag/elemen HTML

contoh: h1 {

                   color : blue;

             }

     2. KELAS

• Diawali dengan tanda ( . )
• Tag HTML ditambah class = (namakelas)

contoh: .body {

                    font-family:verdana;

                    font-size:30px;

               }

     3. ID

• Diawali dengan tanda #
• Mendefiniskan tag secara individual
• Tag ID hanya boleh digunakan dalam sebuah elemen

contoh: #bagian1 {

                 text-align: left;

                 color: white;

             }

             #bagian2 {

                 text-align: left;

                 color: white;

             }

Bagaimana agar Css yang selesai kita buat dapat berfungsi pada Html kita? Terdapat 3 cara untuk menjalankan perintah Css kedalam Html berikut diantaranya:

• Embedded Style Sheet

<style type = "text/css">
      <!-- atribut -->
</style>

• Inline Style Sheet

<tag HTML style= "Properti: value/nilai">...</tag HTML>

• Linked Style Sheet

<link rel="stylesheet" href="namafile.css" type="text/css">

Sekian Pengetahuan Dasar Mengenai Css Kali ini Semoga Bermanfaat.