Beranda » Tutorial IT » Belajar Dasar CSS di Web

Belajar Dasar CSS di Web

CSS (Cascading Style Sheet) adalah stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML.

Ketika kita menggunakan CSS untuk memformat suatu halaman, kita memisahkan antara konten dan style tampilannya. Konten dari halaman (yang berupa kode HTML) berada pada file HTML itu sendiri, sementara isi dari CSS yang mengatur tampilan kode HTML tersebut berada pada file lain (biasa disebut external style sheet) atau berada pada bagian lain dari dokumen HTML tersebut (biasanya berada di bagian head kode HTML) dan biasa disebut internal style sheet.

Dengan menggunakan CSS, kita dapat mendefinisikan suatu style hanya sekali dan mempergunakannya berulang-ulang dalam dokumen-dokumen web kita. Jadi, kita tidak perlu repot mengatur ulang style dari setiap tag HTML yang kita buat cukup dengan merubah di CSS-nya saja.

Namun dibalik kelebihan tersebut, ada juga kekuranganya yaitu tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi harus diperiksa tampilannya supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web terlihat baik di semua browser.

Setiap aturan style CSS dibagi menjadi 3 bagian: selector, property dan value. Syntaxnya (aturan penulisan kodenya):

selector {property: value}

Sebagai contoh, kita mendefinisikan paragraf HTML, yang ditandai dengan tag <p>, dengan value biru (blue) pada property warna (color) sebagai berikut:

p {color: blue}

usingcsscascadingstylesheets

webdesignerdepot.com

Selector pada CSS sama dengan tag atau elemen pada HTML (seperti: <h1>, <p>, <tr> dll). Satu aturan CSS minimal terdiri atas tiga bagian:

  1. Selector, dalam contoh diatas p, memberitahukan browser, tag (elemen) HTML yang menggunakan style CSS.
  2. Property, dalam contoh diatas color, dalam HTML disebut sebagai atribut. Biasanya merupakan ukuran kualitas suatu elemen seperti height, font-style, color dll.
  3. Value dari property, dalam contoh diatas blue. Ini merupakan nilai yang menyatakan perubahan yang kita lakukan terhadap tampilan dari elemen seperti 45 pixel, Times Roman atau yellow.

Nah, seru kan? Simak terus ya Tutorial IT di LKP KEMBAR!

Jika Sahabat Pintar berminat untuk mengikuti workshop/kursus komputer, baik pemrograman web, desain (Corel, Photoshop, Dreamweaver, Flash), ms office, page maker, in design, blog, dsb, silakan hubungi:

LKP Kembar

JL. Solo-Yogya km.30 Jombor Ceper Klaten

Telp (0272) 3154 777

www.rumahpintar-kembar.com

5 KEUNGGULAN LKP KEMBAR:

  1. Pengajar yang ramah dan berpengalaman
  2. Harga terjangkau dan bisa dicicil
  3. Waktu yang fleksibel
  4. Sertifikat berizin resmi Dinas Pendidikan dan Dinas Sosial Tenaga Kerja dan Transmigrasi (Izin Dinas Pendidikan nomor 602/LKP/11.2012, dan Izin Dinas Sosial Tenaga Kerja dan Transmigrasi Nomor: 563/2424.A/14.)
  5. Dijamin BISA!!! Untuk semua umur dan kalangan.

Jangan lupa..ada program seru IT CAMP loh selama liburan, 2-7 Juli 2012 pk 09.00-10.30..di mana kita bisa membuat berbagai kreasi IT menarik! 🙂

Berita Lainnya

  • PENGUMUMAN PEMENANG SPAM LIKE LKP KEMBAR MEI 2017

    PENGUMUMAN PEMENANG SPAM LIKE LKP KEMBAR MEI 2017

    • Rabu, 31 Mei 2017

    PENGUMUMAN PEMENANG SPAM LIKE LKP KEMBAR MEI 2017 Selamat Sore Sahabat Pintar Semuanya . . . Sekalian menunggu waktu buka puasa LKP KEMBAR mau mengumumkan Pemenang SPAM LIKE LKP Kembar Bulan Mei 2017 Siapa ya pemenangnya di bulan Mei ini ? Sahabat Pintar semua apakah sudah mengikuti program Spam Like LKP Kembar bulan Mei ini […]

    Selengkapnya »
  • tools - option

    Cara Mengembalikan Akun Email Yahoo ke Yahoo Classic

    • Sabtu, 15 Oktober 2011

    Haloo Sahabat Pintar! Kalian semua tentunya tahu email dong? Yak..mungkin di antara kalian juga banyak yang memiliki akun email di Yahoo. Baru-baru ini (atau sudah beberapa waktu lalu), terdapat perubahan versi email menjadi Yahoo Beta..yang didominasi warna ungu. Banyak fitur dan kelebihan baru ditawarkan di versi baru ini. Namun, bagi Anda yang terlanjur terbiasa menggunakan […]

    Selengkapnya »
  • Berubah Menjadi Achiever

    Berubah Menjadi Achiever

    • Rabu, 15 Desember 2010

    Sahabat Pintar, pada artikel yang lalu, kita telah mempelajari ciri2 achiever, save seeker, dan looser. Nah, sekarang bagi Anda yang ingin menjadi seorang Achiever, berikut kita bahas langkah-langkahnya: Ada 3 cara : Membuat goal (tujuan) yang jelas Menumbuhkan keyakinan yang benar dan kuat Melakukan aksi yang tepat 1. GOAL YANG JELAS Goal anda adalah ANDA […]

    Selengkapnya »
  • Workshop GRATIS! Amazing Conversation: Belajar Percakapan Bahasa Inggris TANPA GRAMMAR!

    Workshop GRATIS! Amazing Conversation: Belajar Percakapan Bahasa Inggris TANPA GRAMMAR!

    • Jumat, 31 Maret 2017

    Sahabat Pintar, Apakah kamu takut belajar bahasa inggris? Apakah kamu pusing dengan sekian banyak rumus tenses bahasa inggris? Apakah kamu kesulitan dalam belajar sekian banyak kosa kata bahasa inggris? Apakah kamu ingin belajar bahasa inggris dari dasar? Apakah kamu ingin bisa cas cis cus lancar berbahasa inggris? Apakah kamu ingin nilai bahasa inggrismu di sekolah […]

    Selengkapnya »
  • kemeja-batik-anak-uk-6-8th-daun-merah-Rp-35.000-lebar-dada-38cm-panjang-ke-bawah-54cm-cocok-untuk-ke-kondangan-acara-formal-dll

    Jual Kemeja Batik Anak Murah

    • Senin, 10 Juli 2017

    Jual Kemeja Batik Anak Murah Kemeja merupakan salah satu pakaian yang biasanya dikenalakan oleh laki-laki. Kemeja ada yang berlengan pendek dan ada juga yang berlengan panjang. Kemeja biasanya dipakai untuk acara ynag sedikit formal. Meskipun begitu sudah banyak kemeja yang dibuat dalam rancangan lebih santai. Dengan pilihan kain juga motifnya. Jika kemeja biasanya dipakai untuk […]

    Selengkapnya »
  • Meletakkan Spot di Google Map

    Meletakkan Spot di Google Map

    • Selasa, 28 September 2010

    Anda mungkin tidak asing lagi kan dengan google map (http://maps.google.com/). Itu lhoo..halaman web untuk melihat peta, bukan hanya peta lokal dan nasional, namun juga internasional. Bagi Anda yang ingin meletakkan spot/ingin mendaftarkan lokasi usaha Anda di Google Map, begini caranya: 1. Buka browser Anda, ketikkan: http://www.google.com/local/add/businessCenter 2. Anda sign in (login) dengan akun gmail/Google Account, […]

    Selengkapnya »