Pemograman CSS

css

Pemograman CSS
Pemograman CSS

CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.

Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS kita bisa:

  • Halaman landing page yang menarik;
  • Template atau tema blog;
  • Mengubah PSD (Desain web) menjadi HTML;
  • dan sebagainya.

Contohnya, bagaimana tampilan facebook tanpa CSS?

Mungkin bisa seperti ini:

Pada artike ini, kita akan membahas pengenalan dasar CSS, seperti:

  • Apa itu CSS?
  • Struktur dasar CSS;
  • Cara Menuliskan CSS di HTML;
  • Tips Belajar CSS

Rebahkan kaki, ambil cemilan, seduh kopi cekricrott Mari kita mulai…

Apa itu CSS?

CSS (Cascade Style Sheet) meruapakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah.

Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, dan lain-lain.

CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994.

Variasi atau Versi CSS

Sejak awal diperkenalkan CSS memiliki beberapa variasi:

  1. CSS 1: adalah versi pertama (17 Desember 1996)
  2. CSS 2: adalah versi ke-2 (Mei 1998)
  3. CSS 2.1: (7 juni 2011)
  4. CSS 3: (2012)
  5. CSS 4: masih dalam pengembangan.

Apa bedanya dari setiap versi tersebut?

Tentunya ada penambahan dan pengurangan…

Struktur Kode atau Sintaks Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:

  1. Selektor;
  2. Blok Deklarasi;
  3. Properti dan nilanya.

CONTOH :

Mari kita bahas satu per satu…

Selektor

Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur.

Contohnya:

h1 {
    color: red;
}

Artinya: Kita memilih semua elemen 

, lalu diberikan warna teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:

/* Selektor dengan nama tag */
h2 {
    color: blue
}

/* Selektor degnan class */
.bg-yellow {
    backgound-color: yellow;
}

/* selektor dengan ID elemen */
#header {
    background: grey;
}

/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}

Blok Deklarasi

Blok deklarasi adalah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor.

Contoh:


p {
    font-size: 18px;
}

Artinya, kita akan mengatur ukuran font dari tag 

 sebesar 18px.

Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.

Properti dan Nilainya

Properti merupakan atribut atau sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.

Contohnya :

blockquote {
    background: pink;
}

Jangan tulis kaya gini :

background: pink;

p {

}
Oke Artikel selanjutnya kita akan menuju
ke cara menulis CSS di dalam HTML

What's Your Reaction?

like
1
dislike
0
love
1
funny
0
angry
0
sad
0
wow
0