CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM
CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan konten dengan dokumen yang mendeskripsikan tampilan Contoh: layout, warna, font, dll Spesifikasi CSS diatur oleh W3C (World Wide Web Consortium) Versi terbaru: CSS3
VERSION HISTORY CSS 1 adalah versi pertama yang dirilis pada 17 Desember 1996 yang mendukung kapabilitas berikut Font properties (typeface dan emphasis) Warna teks, background, dan elemen-elemen yang lain Atribut teks (spasi antar kata dan huruf) Alignment teks, gambar, tabel, dan lain-lain Margin, border, padding, dan pengaturan posisi ID dan class
VERSION HISTORY CSS 2, dikembangkan oleh W3C dan dipublikasikan pada Mei 1998, mendukung beberapa kapabilitas baru: Pengaturan posisi absolut, relatif, dan fixed z-index Media type Teks bidirectional CSS 2.1 dirilis sebagai versi revisi dari CSS 2 dengan menghapus beberapa fitur yang tidak didukung dengan baik oleh browser
VERSION HISTORY Spesifikasi CSS 3 dibagi menjadi beberapa dokumen yang disebut module yang masing-masing menambahkan kapabilitas dari fitur yang ada di CSS 2 Beberapa fitur baru dari CSS3: Media queries Selector level 3 Pewarnaan (HSL, HSLA, RGBA, opacity) Rounded corner Box shadow Efek teks (text shadow, text overflow, word wrap) Web fonts
APPLYING CSS Ada 3 cara untuk mengaplikasikan CSS ke HTML: 1. Inline 2. Internal 3. External
INLINE CSS Style CSS langsung diaplikasikan pada tag HTML Menggunakan atribut style Contoh: <p style= color: red >Judul</p> Baris tersebut akan membuat teks menjadi berwarna merah Untuk menspesifikasikan lebih dari satu properti CSS, pisahkan dengan ; (titik koma) Contoh: <p style= color: red; font-weight: bold >Judul</p>
INLINE CSS Cara ini tidak direkomendasikan karena: CSS menjadi satu lokasi dengan HTML Hanya berlaku untuk satu tag saja Aplikasi pada beberapa tag harus dilakukan berulang-ulang Jika dilakukan perubahan, maka harus perubahan harus dilakukan pada semua tag yang bersesuaian
INTERNAL CSS Style CSS ditulis di dalam tag <head> di HTML menggunakan tag <style> Style tersebut akan berlaku ke seluruh halaman tersebut pada elemen yang bersesuaian Walaupun lebih baik daripada inline CSS, namun bukan juga merupakan cara yang direkomendasikan karena: CSS masih menjadi satu tempat dengan HTML Karena hanya berlaku pada satu halaman, style yang sama harus diaplikasikan pada setiap halaman Jika terjadi perubahan, maka perubahan harus dilakukan pada setiap halaman Contoh: <!DOCTYPE html> <html> <head> <title>css Example</title> <style> p { color: red; </style>...
EXTERNAL CSS Style CSS ditulis dalam file tersendiri (eksternal) yang berekstensi.css File tersebut kemudian dipanggil oleh HTML Kelebihan: CSS terpisah dari HTML CSS terpusat pada satu file Satu file CSS dapat digunakan oleh beberapa file HTML Jika ada perubahan style, perubahan tersebut hanya dilakukan pada satu file tersebut File CSS yang telah di-load akan tersimpan di browser cache (tergantung konfigurasi dan kapasitas cache) sehingga browser tidak perlu load file yang sama dua kali
EXTERNAL CSS HTML p { color: red; <!DOCTYPE html> <html> <head> <title>external CSS</title> <link rel= stylesheet href= style.css >...
SELECTOR
SELECTOR Selector adalah entitas yang ada pada CSS (seperti tag pada HTML) Cara kerja CSS: memilih suatu elemen HTML kemudian melakukan sesuatu terhadap elemen tersebut Dalam memilih elemen, CSS dapat menggunakan nama tag HTML, class, atau ID Sintaks: <selector> { <property1>: <value>; <property2>: <value>;...
SELECTOR p {font-family: Arial; PROPERTY VALUE
HTML TAG SELECTOR Pemilihan elemen HTML dilakukan dengan nama tag
HTML TAG SELECTOR CSS HTML a { color: green; <a href=... >Link 1</a> <a href=... >Link 2</a> <a href=... >Link 3</a>
CLASS SELECTOR Berfungsi untuk mengelompokkan element HTML Class dapat diberikan pada satu atau lebih elemen dari suatu halaman web Contoh: <h1 class= judul >Judul Satu</h1> <h2 class= judul >Judul Dua</h2> Suatu elemen bisa memiliki lebih dari satu class Contoh: <h1 class= judul big red >Judul Satu</h1>
CLASS SELECTOR CSS.green { color: green; HTML <a href=... class= green >Link 1</a> <p class= green >Some text</p> <span class= green >Some other text</a>
ID SELECTOR Berfungsi sebagai identifier untuk suatu elemen HTML ID dapat diberikan hanya pada satu komponen dari suatu halaman web Contoh: <input type= submit id= login_button value= Login > Nama ID bebas Suatu elemen diperbolehkan memiliki ID dan class sekaligus Contoh: <input type= submit id= login_button class= button value= Login >
ID SELECTOR CSS #green { color: green; HTML <a href=... id= red >Link 1</a> <p id= green >Some text</p> <span class= blue >Some other text</a>
GROUPING Beberapa selector dapat dikelompokkan untuk menspesifikasikan properti yang sama Contoh: h2 { color: red;.classa { color: red; #ida { color: red; Dapat dikelompokkan menjadi: h2,.classa, #ida { color: red; Selector-selector yang dikelompokkan dipisahkan dengan koma (,)
NESTING Dengan nesting, suatu elemen dapat dipilih melalui element yang ada di atasnya (parent) Contoh: <div id= outer > <h1>judul</h1> <p>lorem ipsum dolor</p> </div> <p>this is other text</p> #outer p { font-color: red; Maka elemen yang dipilih adalah <p> yang ada di dalam <div> dengan ID outer
PSEUDO CLASS Pseudo class digunakan pada selector untuk menspesifikasikan state dari suatu elemen Sintaks: <selector>:<pseudo class> { <property1>: <value>; <property2>: <value>;...
PSEUDO CLASS ON LINKS Pseudo class yang dapat digunakan pada selector a adalah link dan visited Contoh: a:link { color: green; a:visited { color: red;
DYNAMIC PSEUDO CLASS Digunakan untuk memberikan style berdasarkan action yang dilakukan user terhadap suatu item Contoh: a:hover { text-decoration: none; color: red; background-color: green;
DYNAMIC PSEUDO CLASS Contoh: input:focus { border-color: red;
TEXT
TYPEFACE TERMINOLOGY Ada tiga jenis bentuk font: 1. Serif 2. Sans-serif 3. Monospace
SERIF Font bertipe serif memiliki detil pada ujung hurufnya Untuk teks yang tercetak (print), font serif banyak digunakan untuk teks yang panjang karena lebih mudah untuk dibaca Contoh: Georgia, Times, Times New Roman im
SANS-SERIF Font bertipe serif memiliki bentuk lurus di ujung hurufnya Karena layar komputer memiliki resolusi yang lebih rendah daripada cetak, maka untuk teks yang berukuran kecil, font sans-serif lebih mudah untuk dibaca Contoh: Arial, Verdana, Helvetica
MONOSPACE Setiap huruf yang ada di font bertipe monospace memiliki lebar yang sama Disebut juga fixed-width Banyak digunakan untuk menuliskan kode program karena menghasilkan tampilan yang lebih rapi Contoh: Courier, Courier New, Consolas im
TEXT CSS dapat memberikan beragam properties pada teks: Jenis font Ukuran teks Style teks Huruf kapital teks Spasi teks
FONT-FAMILY Digunakan untuk menspesifikasikan jenis font Properties yang digunakan: font-family Value yang digunakan: nama font Contoh: p { font-family: Tahoma; Font yang digunakan harus terinstall di komputer pengguna Tips: gunakan font-font yang umum terinstall di komputer
FONT-FAMILY Boleh menspesifikasikan lebih dari satu font yang dipisahkan dengan koma; komputer akan mencari font yang terinstall dari kiri ke kanan Contoh: p { font-family: arial, helvetica, serif Maka browser akan mencari font arial; jika tidak ditemukan, maka browser akan mencari font helvetica, dan seterusnya Jika nama font terdiri dari lebih dari satu kata, maka gunakan tanda petik Contoh: p { font-family: Times New Roman
FONT-FAMILY Tips: gunakan properti ini untuk menggantikan tag <font> di HTML Contoh: <font face= verdana >Teks</font>
FONT-SIZE Digunakan untuk menspesifikasikan ukuran teks Properties yang digunakan: font-size Value yang digunakan: ukuran teks Contoh: p { font-size: 14px; Tips: untuk judul, tetap gunakan tag <h1> sampai <h6> agar HTML tetap semantik Tips 2: gunakan untuk menggantikan tag <font> dan atribut size Contoh: <font size= 12 >Teks</font>
FONT-WEIGHT Digunakan untuk menspesifikasikan ketebalan teks Properties yang digunakan: font-weight Value yang digunakan umumnya adalah bold dan normal Ada beberapa value lain yang dapat digunakan: bolder, lighter, 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, dan 900 Contoh: p { font-weight: bold; Tips: gunakan properti ini untuk menggantikan tag <b> di HTML
FONT-STYLE Digunakan untuk menspesifikasikan teks miring Properties yang digunakan: font-style Value yang digunakan: italic dan normal Contoh: p { font-style: italic; Tips: gunakan properti ini untuk menggantikan tag <i> di HTML
TEXT-DECORATION Digunakan untuk memberikan garis pada teks Properties yang digunakan: text-decoration Value yang digunakan: underline, overline, dan line-through Contoh: p { text-decoration: underline; Tips: berikan garis bawah (underline) pada link agar mudah dikenali oleh pengguna Tips 2: gunakan properti ini untuk menggantikan tag <u> di HTML
TEXT-TRANSFORM Digunakan untuk mengubah kapitalisasi teks Properties yang digunakan: text-transform Value yang digunakan: capitalize, uppercase, lowercase, dan none Contoh: p { text-transform: capitalize;
LETTER & WORD SPACING Kerning adalah istilah yang digunakan oleh typographer yang berarti jarak antar huruf Mengubah kerning terkadang diperlukan untuk teks yang ditulis dalam huruf besar Namun untuk teks normal, mengurangi atau menambah kerning dapat membuat teks tersebut sulit dibaca kerning kerning ke r n i n g word spacing word spacing word spacing
LETTER & WORD SPACING Untuk menspesifikasikan kerning, gunakan properti letter-spacing Untuk menspesifikasikan jarak antar kata, gunakan properti word-spacing Contoh: p { letter-spacing: 10px; word-spacing: 20px;
TEXT-ALIGN Digunakan untuk mengatur letak teks secara horizontal Value yang bisa digunakan: left, right, center, dan justify Contoh: p { text-align: center; Gunakan properti ini untuk menggantikan atribut align di HTML Contoh: <span align= center >Teks</span>
TEXT-INDENT Digunakan untuk menspesifikasikan panjang indentasi di awal paragraf Contoh: p { text-indent: 50px;
TEXT SHORTHAND Beberapa value untuk suatu selector dapat disingkat menjadi satu value Contoh: p { font: italic bold 12px courier;
MARGINS AND PADDING Margin adalah jarak di luar border suatu elemen Padding adalah jarak di dalam border suatu elemen
MARGINS AND PADDING Ukuran margin dispesifikasikan menggunakan properti margin Ukuran padding dispesifikasikan menggunakan properti padding Contoh: h1 { margin: 20px; padding: 40px; Properti lain yang dapat digunakan untuk margin: margin-top, margin-right, margin-bottom, margin-left Properti lain yang dapat digunakan untuk padding: padding-top, padding-right, padding-bottom and padding-left
MARGINS AND PADDING Dapat juga menggunakan properti yang berbeda untuk masing-masing sisi Contoh: p { margin-top: 1px; margin-right: 2px; margin-bottom: 10px; margin-left: 5px; Dapat disingkat menjadi: p { margin: 1px 2px 10px 5px;
BORDER-STYLE Digunakan untuk memberikan gaya border (garis tepi) dari suatu elemen Properti yang digunakan: border-style Value yang digunakan: solid, dotted, dashed, double, groove, ridge, inset, dan outset Contoh:.text-field { border-style: inset;
BORDER-STYLE
BORDER-STYLE Dapat juga menggunakan properti yang berbeda untuk masing-masing sisi border Contoh: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
BORDER-WIDTH Digunakan untuk menspesifikasikan tebal border (garis tepi) dari suatu elemen Properti yang digunakan: border-width Value yang digunakan: <angka> px Contoh:.text-field { border-width: 3px;
BORDER-WIDTH Dapat juga menggunakan properti yang berbeda untuk masing-masing sisi border Contoh: h2 { border-top-width: 10px; border-right-width: 5px; border-left-width: 7px; border-bottom-width: 8px; Dapat disingkat menjadi: h2 { border: 10px 5px 7px 8px;
BORDER-COLOR Digunakan untuk menspesifikasikan warna border (garis tepi) dari suatu elemen Properti yang digunakan: border-color Value yang digunakan: nama warna, RGB, atau kode heksadesimal Contoh:.text-field { border-color: #00f;
BORDER-COLOR Dapat juga menggunakan properti yang berbeda untuk masing-masing sisi border Contoh: h2 { border-top-color: red; border-right-color: blue; border-left-color: #ffa500; border-bottom-color: #444;
BORDER SHORTHAND PROPERTY Beberapa properti tersebut (style, width, dan color) dapat disingkat menjadi satu value Contoh: p { border-width: 5px; border-style: solid; border-color: red; Dapat disingkat menjadi: p { border: 5px solid red;
BORDER SHORTHAND PROPERTY Penyingkatan juga dapat dispesifikasikan untuk satu sisi border Dapat disingkat menjadi: p { border-top: 5px solid red;
ALHAMDULILLAH :)