Senin, 02 Desember 2013

Dasar-dasar pemograman CSS

Setelah HTML, kali ini saya akan memperlihatkan dasar pemograman CSS.
CSS adalah singkatan dari Cascading Style Sheet, format yang biasa digunakan adalah .html atau .css
File CSS digunakan untuk mengubah gaya laman HTML.
File CSS dapat di buat atau di edit di program teks editor, seperti Notepad dan Notepad++ ataupun di peramban web seperti Mozilla Firefox dan Google Chrome.
Dengan memanfaatkan CSS, anda dapat menyimpan waktu lebih efisien daripada menggayakan banyak elemen yang terdapat pada banyak laman.
Hanya dengan satu file CSS dapat menggayakan banyak elemen yang terdapat pada banyak laman.
Ada beberapa hal yang perlu diketahui, bahwa pada pemograman CSS, yaitu:
  1. Selektor/Seleksi, misal h1 sebagai selektor dari tag Heading
  2. Deklarasi
    • Properti, misal color
    • Nilai, misal red
  3. Setelah disatukan, maka akan diperoleh:
    h1 { color:red }yang digunakan untuk mengubah gaya warna teks dari heading menjadi merah.
CSS juga dapat dibuat pada dokumen HTML, dengan menggunakan tag:
<style>.. CSS ..</style>
Ataupun sebagai atribut HTML:
style=".. CSS ..;"

Contoh penggunaan:
<style>
h1 {
    color: red;
    font-family: Arial;
    border: 1px solid blue;
}
</style>
Dan tertulis <h1>Heading</h1>
Maka akan mengubah gaya heading yang terdapat pada laman, secara spontan, elemen di laman ini juga terpengaruh.

Heading


Atau menggunakan selektor, contoh memilih elemen dengan atribut kelas "test":
<style>
.test {
    color: blue;
    font-family: Arial;
    border: 1px dashed red;
}
</style>
Dan tertulis <p class="test">Paragraf</p>
Maka akan mengubah gaya elemen yang menggunakan kelas test yang terdapat pada laman, secara spontan, elemen di laman ini juga terpengaruh.

Paragraf

Contoh selektor lainnya dapat ditemukan di pos berikut

Tidak ada komentar:

Posting Komentar

Mohon bersikap sopan dan santun. Isi komentar harus sesuai dengan topik.