HTML - CSS Cascading Style Sheet
Apa Itu CSS CSS merupakan singkatan dari Cascading Style Sheet yang mempunyai kegunaan untuk mengatur tampilan dokumen HTML yang mungkin dilakukan berulang-ulang Contoh : Pengaturan jarak antar baris, teks, warna, format border bahkan penampilan gambar file. CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri sehingga memudahkan pembuatan dan pemeliharaan dokumen web Kode CSS bersifat lintas platform, yang berarti script ini dapat dibaca oleh berbagai macam sistem operasi dan browser kecuali Internet Explorer yang sering salah mengartikan script CSS yang menyebabkan tidak sempurnanya tampilan.
Selector { Property : Value }] Sintaks Kode CSS Style sheet didefinisikan dalam bentuk rule, terdiri dari: Selector : Tag HTML yang akan dikenal CSS Declaration : property dan nilai (Value) yang akan ditentukan untuk tag bersangkutan Sebuah selector dapat memiliki lebih dari satu deklarasi, dimana setiap deklarasi harus diakhiri oleh tanda titik koma (;) Contoh rule : h1 { color:blue ; font-family:arial; } Keterangan: Selector : h1 Property : color Value : blue Seluruh elemen (tag) HTML dapat digunakan sebagai selector Selector { Property : Value }]
Cara Penulisan kode CSS kedalam Dokumen HTML Terdapat 3 cara penulisan code CSS kedalam dokumen HTML : 1. Inline Style : Menuliskan kode CSS langsung pada tag yang akan diubah atau diatur stylenya <p style=“color:red”>Satu Baris Paragraf</p> 2. Embedded Style : Menuliskan Kode CSS pada bagian header HTML <html> <head> <title>Header Style</title> <style> h1 {color: blue} </style> </head>
Lanjutan … 3. Linked Style : Menuliskan Kode CSS pada file terpisah dan dipanggil melalui tag <link> dari HTML. File HTML : <html> <head> <title>Header Style</title> <link rel="stylesheet" type="text/css“ a href=“format.css"> </head> </html> File CSS : body {font-family:verdana} h3 {color:red ; font-style:italic} p {font-family:times ; color:blue ; font-size:12px}
Contoh : Inline Style <html> <head> <title>CSS</title> </head> <body> <h2> Demo Inline Styles</h2> <p styles=“color: red; text-decoration: underline”> Contoh paragraf yang menggunakan style.</p> <p> contoh paragraf yang tdk menggunakan style. </p> </body> </html>
Contoh : Embeded / Header Style <html> <head> <title>CSS Header Style</title> <style type=“text/css”> Body {background:black; color:white;} H2 {color:yellow; border-bottom: 1px solid white;} p {color:blue;} </style> </head> <body> <h2> demo embbeded styles </h2> <p> Halaman ini adalah halaman yang sudah diatur stylenya oleh kode CSS. </p> </body> </html>
Contoh : Linked Style File : style.css p { color : #FFFFFF ; font-family : arial ; font-wight : bold ; background : #FF0000 } h3 {color:red ; font-style:italic} File : sample.html <html> <head><title>CSS Guide</title> <link rel=“stylesheet” type=“text/css” href=“style.css> </head> <body> <h3>ini adalah halaman pertaman yang diatur style nya melalui kode CSS yang ditulis secara terpisah pada file tersendiri.</h3> </body> </html>
JENIS-JENIS SELECTOR Selector dapat diklasifikasikan menjadi beberapa Jenis : Selector tag atau selector elemen Selector Pseudeo-kelas Selector Kelas (div) Selector Pseudo-elemen Selector Keturunan Selector ortu-anak Selector Bersebelahan Selector ID dan Class Selector Universal
Selector Pseudo-Kelas Selector ini digunakan untuk mengatur sebuah atribut dalam suatu tag. Contoh : <html> <head> <title>Pseduo-Kelas</title> <style type="text/css"> a:link { color: blue } a:hover { background-color: blue ; color: white; } a:visited { color: green; } a:active { color: red; } </style> </head> <body> <h2>Info Kota</h2> <a href="#">Jokjakarta</a> <a href="#">Jakarta</a> </body> </html>
Selector Kelas - DIV Selector DIV adalah salah satu tag dalam kode html yang paling banyak digunakan dan merupakan sebuah "wadah" bagi semua dokumen (teks, image dll) dan di dalam tag DIV biasanya berisi sekaligus beberapa elemen html/tag html. Dalam desain web/blog, tag DIV bahkan menjadi wadah (memuat) keseluruhan halaman-halaman blog yang didalamya juga berisikan tag div dan beberapa tag yang lain. Sekalipun tag DIV secara khusus mempunyai karakter/sifat bawaan seperti "display:block", namun sifat-sifat ini dapat dirubah menggunakan kode css. Dalam penggunaanya, beberapa attribute atau properti css harus ditambahkan agar tag DIV mampu berfungsi sesuai dengan apa yng diharapkan. Dalam bentuk yang paling sederhana anda dapat membuat boks/kotak dengan memanfaatkan tag DIV.
Contoh : DIV <html> <head> <title>Selector Kelas - DIV</title> <style type="text/css"> .judul { background-color: green; color: yellow; font-family:Tahoma; } .tubuh { background-color: blue; color: white; font-family: Tahoma; } </style> </head><body> <div class="judul"> <p>Penggalan Lirik : Jangan Menyerah</p> <p>Karya : D'masiv</p></div> <div class="tubuh"> <p>Tak ada manusia yang sempurna</p> <p>Jangan Kau sesali segala yang telah terjadi</p></div> <p>Kita pasti pernah dapatkan cobaan yang berat</p> <p>Seakan hidup ini tak ada artinya lagi</p> </div> </body></html>
Selector CLASS & ID Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yaitu id dan class. Selector ID Digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama ID hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada ID yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”. Selector Class Digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh : ID <html> <head> <title>CSS Tag ID</title> <style type="text/css"> p {text-align:justify ; color:#999 } #penting {text-align:center ; color:#F00 } </style> </head> <body> <p>Artikel Paragraf 1</p> <p>Artikel Paragraf 2</p> <p id="penting"> Artikel Paragraf Penting</p> </body> </html>
Contoh : Class <html> <head> <title>CSS Tag Class</title> <style type="text/css"> p{ font-size: 18px; text-alignment:justify; } .merah{ color: red; } .biru{ color: blue; } </style> </head> <body> <p class="merah">konten pada paragraf ke-1</p> <p class="biru"> konten pada paragraf ke-2</p> <p class="merah"> konten pada paragraf ke-3</p> <p class="biru"> konten pada paragraf ke-4</p> </body> </html>
Contoh : Class & ID File : Format.css #top { bacground-color: #ccc; padding: 1em } .intro { color; red; font-weight: bold; } File : Sample.html <html> <head><titile>Class and ID</title> <link rel=“stylesheet” href=“format.css” type=“text/css”> </head> <body> <div id=“top”> <h2>Pempek</h2> <p class=“intro”>Masakan khas dari Palembang</p> <p class=“intro”>yuuummmmyyyy ….. Makyusssss</p> </div> </body> </html>
Selector untuk Elemen Turunan Dalam dokumen HTML, konten sebuah elemen bisa berupa elemen lainnya. Maka diperlukan cara penulisan tersendiri untuk memilih sebuah elemen HTML yang akan ditetapkan sebagai target pemformatan dengan CSS. Mari kita lihat contoh di bawah ini : File [index.html] <h1>Judul dengan <em>bagian penting</em> di dalamnya</h1> <p>Artikel yang terdapat <em>bagian penting</em> di dalamnya</p> Apabila kita ingin melakukan pemformatan pada elemen “em” yang berada pada elemen “h1”, maka penulisan CSSnya adalah sebagai berikut : h1 em { color:red; } em : Ukuran bersifat relatif terhadap ukuran font sekarang (exist). 1em identik dengan ukuran font sekarang. Jika 2em berarti 2x ukuran font sekarang.
Selector Bersebelahan Selector ini digunakan apabila kita ingin mengatur elemen HTML yang bersebelahan dengan suatu elemen yang lain. Contoh : <html> <head> <title>Selector Bersebelahan</title> <style type="text/css"> h1 + h2 { border-top-style: solid; } </style> </head> <body> <h1>Tanaman Bunga Hias</h1> <h2>Anggrek</h2> <h2>Guzmania</h2> <h2>Melati</h2> </body> </html>
Selector Pseudo-Elemen CSS menyediakan tiga Pseudo elemen : Pseudo elemen First-Letter : Karakter Pertama Pseudo elemen First-Line : Baris Pertama Pseudo elemen First Child : Elemen anak pertama Dinamakan pseudo-elemen karena sesungguhnya tidak terdapat elemen ekivalen dalam HTML.
Contoh Pseudo Elemen <html> <head> <title>Pseudo Elemen</title> <style type="text/css"> P:first-letter { font-size: 500%; float: left; color: gray; } .pertama:first-line {font-variant: small-caps; font-weight: bold; } </style> </head> <body> <p>Jazz merupakan aliran musik yang berasal dari Amerika Serikat. Awalnya dikenal hanya di komunitas Afrika Amerika sejak awal abad 20. Sebutan Jazz baru diluncurkan di Chicago sekitar tahun 1915. Saat ini Jazz telah dikenal dimana-mana.</p> <p class="pertama">Di Indonesia Jazz mulai banyak diterima diberbagai kalangan. Beberapa acara bergengsi sudah sering digelar. Misalnya : Java Jazz Festival dan Jakarta Jazz Festival.</p> </body> </html>
Selector Universal Selector ini ditujukan untuk semua elemen. Contoh : <html> <head> <title>Selector Universal</title> <style type="text/css"> * { color: Blue; font-family:Arial; } </style> </head> <body> <h2>Selector Universal</h2> <p>Selector ini ditujukan untuk semua elemen</p> </body> </html>
Pengelompokan Selector (Grouping) Declaration pada CSS bisa diterapkan untuk satu jenis atau beberapa jenis elemen sekaligus. Caranya adalah dengan menuliskan beberapa Selector dalam satu baris kode CSS yang dipisahkan dengan tanda “,” (koma) sebelum penulisan Declaration. Contohnya, pada CSS dinyatakan : h1, h2, h3, h4 { color:red; } Maka akan mengasilkan tampilan halaman web dimana konten pada elemen “h1”, “h2”, “h3” dan “h4” memiliki warna yang sama, yakni merah. Demikian juga pemformatan untuk elemen yang lain bisa dilakukan dengan cara yang sama.
Property CSS : BOX Model Padding dan Margin, Float, Center Alligment, Ordered vs Unordered List, Styling Headings, Overflow, Position.
PADDING Padding adalah area kosong yang mengelilingi sebuah elemen HTML dan memberikan jarak antara Content dengan Border. Sama halnya dengan Margin dan Border, Padding yang letaknya berada di bagian luar elemen HTML akan berpengaruh terhadap kebutuhan ruang untuk penempatan sebuah elemen HTML. Padding tidak memiliki unsur warna, namun keberadaanya terpengaruhi oleh unsur warna dari latar belakang sebuah elemen yang dinaunginya. Tiap elemen HTML memiliki empat sisi Padding yaitu padding atas, padding kanan, padding bawah dan padding kiri. Masing-masing besaran luas padding bisa ditentukan dengan menggunakan Property : “padding-top” - untuk padding atas, { padding-top: length | percent; } “padding-right” - untuk padding kanan, { padding-right: length | percent; } “padding-bottom” - untuk padding bawah, { padding-bottom: length | percent; } “padding-left” - untuk padding kiri. {padding-left: length | percent; }
MARGIN Jarak sebuah elemen HTML dengan elemen HTML lain yang bersinggungan disebut dengan “margin”. Tiap elemen HTML memiliki empat sisi margin yaitu margin atas, margin kanan, margin bawah dan margin kiri. Luas area dari masing-masing margin bisa diatur dengan menggunakan Property berikut : “margin-top” - untuk margin atas, { margin-top: auto | length | percent; } “margin-right” - untuk margin kanan, {margin-right: auto | length | percent; } “margin-bottom” - untuk margin bawah { margin-bottom: auto | length | percent; } “margin-left” - untuk margin kiri. { margin-left: auto | length | percent; } Meringkas Penggunaan Property Margin : { margin: 10px 20px 30px 40px; } (Margin 4 value : Atas, Kanan, Bawah, Kiri) { margin: 10px 20px 30px; } (Margin 3 value : Atas, Kanan-Kiri, Bawah) { margin: 10px 20px; } (Margin 2 value : Atas-Bawah, Kanan-Kiri) { margin: 10px; }
Contoh
FLOATS Property ini memiliki fungsi untuk mengatur elemen agar arata kanan atau kiri terhadap browser dan elemen lainnya. Contoh : File css : .content { float: left ; } File HTML : <div id=content> <p> …………………………</p> </div> atau <div style=“float: left; width: 300px;”><p>……</p> <img src=“gambar.jpg” style=“float: right” ; >
Lanjutan …..
Ordered vs Unordered List Secara default, penampilan kedual list ini sama. Namun dengan bantuan CSS kita dapat mempercantik keduanya dengan mudah. Caranya : hilangkan karakter bullet dan gunakan gambar background sebagai penggantinya. Contoh penulisan CSS : ul#topnav { list-style: none; float: left; width: 960px; margin: 0; padding: 0; background: #f0f0f0; border: 2px solid #ddd; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 2px solid #ddd; } ul#topnav li a { float:left; display: block; padding: 10px; color: #333; text-decoration: none; } ul#topnav li a:hover { background: #fff; }
Lajutan ….. Contoh HTML : <html> <head> <title>Ol vs Ul</title> <link href="ol.css" rel="stylesheet" type="text/css" /> </head> <body> <ul id="topnav"> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">Visi & Misi</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </body> </html>