View

Jenis Selector Dasar CSS

CSS memiliki banyak selector, kita akan membahasnya satu persatu:   Universal Selector Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.   Contoh Universal Selector CSS:   * { color: blue; background-color: white; } Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan background berwarna putih.   Element Type Selector Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan sel [...]

View

Cara Penggunaan Selector dalam CSS

  CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.   Agar mudah memahami cara penggabungan selector CSS ini kita akan mempersiapkan sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html   <!DOCTYPE html> <html> <head> <title>Belajar CSS&a [...]

View

Efek Cascading berdasarkan sumber kode CSS

Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.   Efek Cascading berdasarkan sumber kode CSS Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita  juga membuat internel style sheet untuk mengubahnya menjadi warna merah, maka warna a [...]

View

Cara Menghitung ke-spesifik-an Selector CSS

Pengertian ke-spesifik-an selector CSS Jika pada tutorial sebelumnya kita telah membahas tentang urutan prioritas CSS berdasarkan sumber kode CSS tersebut (dimana inline style memiliki prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. Dalam kasus ini kita akan mempelajari apa yang akan terjadi jika beberapa kode CSS yang dibuat saling menimpa.   Agar lebih mudah dipahami, saya akan langsung membuat file sample kita, yaitu spesifik.html :   <!DOCTYPE html> <html> <head>    <title>Contoh Kas [...]

View

Pengertian Inheritance dalam CSS

Pengertian Inheritance dalam CSS Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya.   Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>.   Sebagai contoh, perhatikan potongan HTML berikut ini:   <div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div> &a [...]

View

Mengenal Model Warna RGB dalam CSS

Mengenal Model Warna RGB Dalam desain di media visual seperti televisi maupun monitor komputer, model warna yang digunakan adalah model warna RGB (Red Green Blue). Disebut RGB, karena warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.   Format #RRGGBB Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk CSS. Dimana RR adalah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 sampai dengan FF. Kenapa FF? Karena CSS menggunakan angka hexadesimal. FF adalah nilai maksimal, equivalen dengan 255 dalam [...]

View

Nilai Persentasi (Value) dalam CSS

Nilai Persentasi (Value) dalam CSS Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.   Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya. [...]

View

Cara Mengubah Jenis Font dengan Property font-family dalam CSS

Cara Mengubah Jenis Font dengan Property font-family Untuk menentukan jenis font dari sebuah text HTML, kita bisa menggunakan property CSS : font-family. Berikut adalah contoh penulisan kode CSSnya :   <style type="text/css"> body { font-family: Arial; } p { font-family: Courier, monospace; } div { font-family: “Duru Sans”, Verdana, sans-serif; } <style> Seperti yang terlihat, nilai yang didukung oleh property font-family adalah nama-nama font yang diinginkan. Saya menyebutnya ‘nama-nama’ karena kita bisa memberikan lebih dari 1 nama font untuk 1 jenis elemen HTML.   [...]