Belajar CSS - Struktur Dasar CSS


CSS3

Sebelum kita mengenal tentang struktur dasar CSS, kita harus tahu apa itu CSS bukan? baca artikel sebelumnya tentang Belajar CSS - Pengertian CSS.

Seperti halnya bahasa pemrograman yang lain, CSS juga mempunyai struktur penulisan tertentu. Penggunaan CSS yang memang penting untuk sebuah website sebagai pengatur UI atau User Interface. Secara umum, CSS memiliki struktur penulisan seperti ini.

Selector { attribut: value; }

Selektor digunakan untuk memilih atau menentukan element mana yang akan diatur oleh css itu.
Attribut adalah fungsi atau opsi yang akan diterapkan.
Value adalah nilai dari attribut.

Contoh.

H1{ font-size: 24px;}


Di dalam CSS, kita mengenal beberapa jenis selektor, seperti ID selector, Class selector, dan tag selector. berikut akan dijelaskan.

1. Class Selector

Class selector digunakan untuk menandai beberapa tag HTML ke dalam suatu grub dengan Class tertentu yang akan diatur oleh CSS. Artinya kita bisa mengatur beberapa tag HTML dalam 1 selektor css. Untuk menggunakannya, kita harus menambahkan attribut class="name" ke dalam tag HTML.

<h1 class="judul">Belajar CSS</h1>

Dan untuk mengaturnya ke dalam CSS, kita memanggil Class tersebut dengan menambahkan tanda titik(.) pada awal selektor.

.judul { font-size: 24px;}


Kapan kita menggunakan class pada css?

mungkin kedepannya yang sering kita jumpai dalam tag html adalah ditambahkannya attribut class. Misalnya dalam satu dokumen, kita mempunyai beberapa tag h1 seperti ini.

<h1> Belajar CSS </h1>
<h1> Belajar HTML </h1>
<h1> Belajar JavaScript </h1>

Semisal, kita hanya ingin mengatur kalimat "Belajar CSS" saja menjadi berwarna biru. Jika di dalam CSS kita menuliskannya seperti ini.

h1 { color: blue;}

Otomatis semua kalimat yang berada di dalam tag H1 akan berwarna biru. Jadi hasilnya akan seperti ini di browser.

Belajar CSS
Belajar HTML
Belajar JavaScript

Untuk itu, kita menambahkan attribut Class hanya ke dalam tag h1 yang akan diatur. Seperti ini.

<h1 class="judul"> Belajar CSS </h1>
<h1> Belajar HTML </h1>
<h1> Belajar JavaScript </h1>

Dan sudah dijelaskan sebelumnya, untuk mengaturnya ke dalam css, kita menambahkan tanda titik(.). Seperti ini.

.judul{ color: blue;}

Jadi kalimat yang berubah menjadi warna biru hanyalah kalimat Belajar CSS saja.

2. ID Selector

ID selector tidak berbeda jauh dengan Class selector, dari segi fungsinya sama dengan Class selector yaitu untuk menandai beberapa tag HTML. Yang membedakan hanya tanda titik (.) pada class selector diganti dengan tanda pagar (#) dalam ID Selector. Seperti ini.

#judul{ color: blue;}

3. Tag selector

Kali ini, yang akan dijadikan sebagai selector adalah element atau tag HTML itu sendiri., misalnya kita akan mengatur element h1 menjadi berwarna biru, seperti ini.

h1{ color: blue;}

Nah, cukup sekian beberapa penjelasan tentang Struktur dasar dan penulisan CSS, jika kurang jelas sobat bisa menghubungi admin atau mencari sumber sumber yang lain dari google.

Belajar CSS - Struktur Dasar Dan Penulisan CSS
Labels: ,

Post a Comment

  1. belum paham gan css,tapi mantaplah buat nambah pengetahuan

    ReplyDelete
    Replies
    1. Siip, tidak ada salahnya belajar gan :-d

      Delete
  2. Mantap gan meski saya belum paham hehe

    ReplyDelete
  3. hmm ane masih kurang paham nih

    ReplyDelete
  4. cocok nih buat pemula seperti aku. makasih infonya gan

    ReplyDelete
  5. Sangat cocok untuk yang baru belajar mengenai css.

    bagi yang ingin belajar mengenai SEO bisa dilihat di situs berikut ini http://www.computer-course-center.com/belajar-seo.html

    ReplyDelete

Jangan buang waktu percuma untuk membuat komentar SPAM atau sekedar mencari backlink. Karena kedua komentar tersebut akan langsung dihapus.
Admin online 12/7

Author Name

MKRdezign

Contact Form

Name

Email *

Message *

Theme images by Ollustrator. Powered by Blogger.