Pembahasan tentang Pengenalan CSS dalam HTML

-

PENGENALAN CSS

Untuk kali ini, kita akan mempelajari tentang CSS. Cascading Style Sheets (CSS) atau dalam bahasa Indonesia adalah Bahasa Lembar Gaya adalah bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CCS digunakan untuk memformat halaman Web yang ditulis dengan HTML dan XHTML. Baiklah langsung saja kita pelajari CSS dibawah ini.
  1. Pengertian CSS
    CSS adalah singkatan dari Cascading Style Sheets yang memberikan tampilan teks yang diinginkan pada halaman Web. Tampilan teks dengan Style dapat dilakukan dengan mendefinisikan font, color, margin, background, font size, dan lainnya. CSS bisa diartikan dengan meletakkan style yang berbeda pada layer/lapisan yang berbeda.
  2. Keuntungan Memakai CSS
    • CSS memberikan keseragaman pada halaman Web.
    • Menghemat banyak waktu pada pekerjaan berulang, karena kita hanya perlu membuat perubahan dalam style sheet.
    • Memungkinkan membuat halaman Web dengan mudah.
    • Layers/lapisan, seperti Item Pop-up dapat digunakan dalam dokumen.
    • CSS membantu memelihara halaman web dengan mudah dan efektif.
  3. Selector, Property dan Value pada CSS
    h2{background-color:black;font-weight:bold}
    
h2                                   ==> Selector
background-color dan font-weight     ==> Property
black, bold                          ==> Value

    1. Selector
      Selector adalah suatu cara untuk mengaitkan dan menghubungkan kode CSS dengan tag HTML yang sesuai. Selector digunakan untuk mencari bagian Web yang ingin di manipulasi atau yang ingin di-style. Misalnya selector yang paling dasar adalah tag HTML itu sendiri seperti tag p, i, h1 dan lainnya.
    2. Property
      Property adalah jenis style atau elemen yang akan di ubah dari subuah tag HTML. CSS memiliki puluhan property dan hampir semuanya dapat dipakai untuk seluruh Selector. Jika Selector untuk mencari seluruh tag , maka property adalah efek yang akan di manipulasi dari tag tersebut seperti ukuran text, warna, jenis font dan lainnya.
    3. Value
      Value adalah nilai dari property. Misalnya untuk property font-color maka nilai yang yang digunakan untuk mengubah warna huruf berupa red, black dan warna lainnya.
  4. Penempatan Sebuah CSS
    1. Inline Style Sheet
      Dalam posisi Inline Style Sheet ditulis menjadi satu dengan halaman Web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen tag HTML sehingga diimplementasikan pada halaman Web dan di format secara independen.
    2. Embedded Style Sheet
      Sama seperti pada posisi Inline Style Sheet, pada posisi Embedded Style sheet pun juga menjadi satu dengan halaman Web hanya saja, posisi CSS menjadi bagian dari Header atau berada diantara tag <head> dan menambahkan tag <style type="text/css">.
    3. Linked Style Sheet
      Linked Style Sheet berbeda dengan kedua model penempatan CSS diatas. Karena Linked Style Sheet harus menyediakan sebuah file CSS khusus berisi berbagai format style yang terpisah dari halaman Web. File tersebut akan dipanggil oleh halaman Web yang membutuhkan pengaturan style.
  5. Penggunaan CCS
    1. Pengolahan Font
      Banyak sekali tag yang dapat ditambahkan CSS untuk memanipulasi font seperti <th>, <td>, <a>, <h1> ... <h6>, dan tag lainnya. Bentuk manipulasi font yang dapat dipakai diantaranya :
      Property Value Contoh
      font-family Jenis Font p {font-family : Arial.Helvetica;}
      font-size Nilai Integer dengan pilihan
      satuan yaitu : em|pt|px|%      		 p {font-size: 24em;}
      font-style Oblique|italic|normalp {font-style:italic;}
      font-variant Normal|Small-caps p {font-variant:small-caps;}
      font-weight Normal|bold|border|100-900 p {font-weiht:bold;}

    2. Memanipulasi Color dan Background
      Cara lain untuk memanipulasi halaman Web yaitu dengan menentukan warna tulisan dan latar belakang atau menambahkan gambar sebagai background. Beberapa property yang digunakan diantaranya :
      Property Value Contoh
      background-color6 digit heksadesimal atau nama warna (English) body {background-color : green;}
      background-image URL gambar body {background-image: url gambar.jpg;}
      background-
      attachment      		 fixed|scroll|inheritbody {background-attachment : scroll;}
      background-repeat inherit|no-repeat|repeat-x|repeat-y body {background-repeat : repeat; background-image:url gambar.jpg;}
      background-positionbottom|top|left|center|right|inherit body {background-repeat : bottom center;}
      color 6 digit heksadesimal atau nama warna h1 {color:black;}
  6. Jenis-jenis Selector dasar CSS
    1. Universal Selector
      Universal Selector hanya ada satu  didalam CSS yaitu tanda bintang "*". Dan bertujuan untuk mencari semua tag yang ada. Contoh Universal Selector :
      * {
   color : blue;
   background-color: white;
  }
      CSS diatas berarti akan membuat semua tag didalam dokumen HTML berwarna biru dan background nya berwarna putih.
    2. Element Type Selector
      Element Type Selector atau Tag Selector adalah istilah untuk Selector yang nilainya merupakan tag HTML itu sendiri. Contoh Tag Selector :
      h1{
          text-decoration:underline;
         }
       p { font-size:14px;
         }
      Contoh diatas akan membuat semua tag <h1> bergaris bawah, dan seluruh tag <p> akan berukuan 14pixel.
    3. Class Selector
      Class Selector adalah salah satu selector yang sering digunakan. Penggunaan Class Selector, kita harus mempunyai atribut class pada sebuah tag HTML. Selector akan mencari seluruh tag yang mempunyai atribut class dengan nilai yang benar. Contohnya :
      <p class="contoh_class">Contoh Class Selector</p>
      Contoh diatas diletakan didalam <body> sedangkan untuk kode CSS Class Selector diletakkan di bagian <head>. Contoh Class Selector :

      .contoh_class {
              font-size:20px;
              color:red;
              }
      Kita harus menggunakan tanda titik sebelum nama dari Class Selector. Untuk contoh diatas berarti untuk semua class yang bernilai "contoh_class", maka ukurun font adalah 20px dan berwarna merah.
    4. ID Selector
      ID Selector juga sering dipakai dan penggunaannya hampir sama dengan Class Selector, hanya berbeda jika Class Selector menggunakan atribut class untuk tag HTML, untuk ID Selector kita menggunakan atribut id.Contohnya :
      <p id="contoh_ID">Contoh ID Selector</p>

      Selain sebagai Selector, atribut id bisa juga sebagai kode unik untuk masing-masing Tag. Jadi, id yang digunakan tidak boleh sama yang berarti id hanya bisa digunakan satu kali dalam sebuah halaman Web. Contoh ID Selector :

      #contoh_ID {
                  color: red;
                  font-size: 20px;
                  }

      Saat menggunakan kode CSS, kita harus menggunakan tanda pagar "#" sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.
    5. Attribute Selector
      Attribute Selector  digunakan untuk mencari seluruh Tag yang memiliki atribut yang dituliskan. Contoh Attribute Selector :
      [href] {
              font-size;
              }

[type="submit"] {
                width:30px;
                }
      Dapat dilihat bahwa, setiap Attribute Selector harus berada didalam tanda kurung siku "[]". [href] akan cocok dengan seluruh tag yang memiliki atribut href yang biasanya terdapat pada tag <a> dan apapun nilai dari href tidak mempengaruhi. Sama halnya pada contoh [type="submit"] akan cocok untuk tag yang memiliki atribut type dengan nilai submit yang berarti yaitu tombol submit dalam form.
Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.


Comments

Post a Comment

Popular posts from this blog

Pengertian dan Contoh Sederhana tentang Stack dan Queue

-
Image
STACK (Tumpukan) dan Queue (Antrian) Pada kesempatan kali ini, kita akan belajar bersama tentang Stack atau Tumpukan dan Queue atau Antrian. Stack dan Queue ini, berkaitan dengan Struktur Data  dalam sebuah aplikasi namun bisa juga dalam kehidupan sehari-hari kita. Stack dan Queue merupakan fungsi yang biasanya diimplementasikan pada program, tidak terkecuali Pemrograman Java. Untuk itu, sebelum membahas program sederhana Stack dan Queue menggunakan Pemrograman Java, kita simak terlebih dahulu pengertian dan penjelasan dari kedua fungsi tersebut dibawah ini.  STACK/Tumpukkan Stack adalah kumpulan suatu elemen dimana hanya elemen yang baru dimasukkan yang dapat diakses atau dilihat. Stack merupakan perintah pengumpulan data secara linear yang menyusun data seperti tumpukan dan bersifat Last In First Out(LIFO) yang berarti data yang terakhir masuk adalah data yang pertama keluar. Contoh dalam Kehidupan sehari-hari : Setumpuk koran, dimana koran yang paling terakhir ditamb
Read more

Permainan Logika tentang Algoritma

-
Image
3 Permainan Logika Tes IQ Pada kesempatan waktu ini, saya akan memberikan atau membahas tentang sebuah Game atau Permainan yang berkaitan dengan Tes IQ, karena Permainan ini harus dilakukan menggunakan akal, nalar dan logika kita. Karena Permainan ini berkaitan Algoritma, yang menyelesaikan masalah dengan logika, maka dalam postingan ini saya bahas bagaimana Algoritma dalam Game tersebut. Baik, langsung saja kita bahas dibawah bagaimana penyelesaiannya. Game Wolf, Sheep & Cabbage (Petani, Domba, Serigala dan Sayuran)  Pada permainan ini, terdapat Seorang Petani dengan membawa seekor Serigala, seekor kambing, dan rumput yang terkira beratnya tidak jauh berbeda. Untuk pergi ke kota di tengah perjalanan, Petani tersebut harus meyeberangi sungai dengan perahu. Namun kapasitas perahu, tidak memungkinkan untuk Petani tersebut membawa semuanya. Ia harus membawa satu persatu bawaannya. Tetapi ketika Petani tersebut menyeberangkan, sisa bawaannya harus tidak saling berhu
Read more

Cara Menyisipkan Tanggal (JCalender) di Java NetBeans dan di Simpan dalam Database

-
Image
JCalender di Java Netbeans Artikel ini adalah kelanjutan dari artikel sebelumnya tentang database yaitu Contoh Database dengan XAMPP dan Java Netbeans yang tidak menyisipkan komponen tanggal. Maka untuk kali ini, Firman akan memberikan Contoh Program Database dari Java yang dapat memasukkan data tanggal. Biasanya digunakan saat kita membuat program untuk memasukkan tanggal lahir, tanggal saat kita melakukan penjualan pada aplikasi atau lainnya. Lalu bagaimana cara membuat program yang dapat memasukkan data tanggal dan disimpan didalam Database. Baiklah langsung saja kita simak berikut dibawah ini. Saat kita ingin memasukkan tanggal di JFrame Form, kita harus mempunyai sebuah komponen yang dapat menampilkan data tanggal. Oleh karena itu, kita membutuhkan sebuah library (pustaka) untuk mengolah data tanggal tersebut. Library tersebut adalah JCalender   yang mempunyai format .jar . Secara default Library tersebut tidak ada di dalam Palette bawaan Netbeans. Jadi, kita bisa menamb
Read more