CSS Cascading Style Sheet Hani Al Hazani, S.Kom STMIK Pranata Indonesia Kampus E – Parungpanjang
Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website. Dapat digunakan untuk Merubah ukuran font Merubah warna background Mengatur perataan paragraf dll Pengenalan CSS
Menambahkan CSS ke dalam HTML External Style Sheets External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. File ini berekstension .css Untuk menyertakan file css, letakkan tag berikut ke dalam <head>…</head> <link rel="stylesheet" type="text/css" href=“namafile.css" /> Biasa dipakai jika beberapa halaman akan menggunakan style yang sama. Menambahkan CSS ke dalam HTML
Menambahkan CSS ke dalam HTML Internal Style Sheets diletakkan di antara <head>…</head> <style type=“text/css”> letakkan css di sini </style> Inline Style diletakkan di dalam elemen HTML <h1 style=“color: #0099ff;font-family: Verdana; size: 18pt;”> Menambahkan CSS ke dalam HTML
Istilah Dalam CSS Style rule Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H1> di tampilkan dengan warna biru. selector { property1: value; property2:value, . . .} H1{ color:green; background-color:orange} Style sheets terdiri dari dua bagian: 1. Selector Bagian pertama sebelum tanda “{}” disebut selector 2. Declaration Terdiri dari property dan value Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma) Istilah Dalam CSS
Komentar biasa digunakan untuk memberi keterangan pada css yang dibuat. Komentar tidak akan ditampilkan pada browser Komentar dalam CSS dibuat dengan /* tulis komentar di sini */ Komentar pada CSS
Class Selector Class selector Diawali dengan tanda titik (.) dan diikuti nama class .namakelas {….} Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut Misalnya <p class=‘judul’>…</p> Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam class selector judul Class Selector
ID Selector Class selector Diawali dengan tanda titik (#) dan diikuti nama id #namaid {….} Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut dan biasanya bersifat unik dalam sebuah halaman Misalnya <p id=‘header’>…</p> Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam id selector header ID Selector
CSS Background Properties (1) CSS background properties digunakan untuk mengatur tampilan background pada sebuah elemen. Misalnya menentukan warna background, membuat background berupa gambar, dan menentukan posisi background. Property Description Values background Property yang digunakan untuk menyeting semua backgroung property dalam sebuah deklarasi saja. background-color background-image background-repeat background-attachment background-position background-attachment Menentukan apakah background gambar fixed atau scroll scroll fixed background-color Menentukan warna background color-rgb color-hex color-name transparent
CSS Background Properties (2) background-image menentukan gambar sebagai background url none background-position Menentukan posisi awal background yang berupa gambar top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat Menentukan bagaimana background yang berupa gambar akan ditampilkan secara berulang repeat repeat-x repeat-y no-repeat
CSS Text Properties (1) CSS Text properties digunakan untuk mengatur tampilan text. Misalnya menentukan warna text, perataan text dan dekorasi text. Property Description Values color Menentukan warna text letter-spacing Menentukan jarak spasi antar huruf normal length unit text-align Perataan text dalam sebuah element left right center justify text-decoration Menambahkan dekorasi ke dalam text none underline overline line-through blink
CSS Text Properties (2) text-indent Memberikan indent pada baris pertama length % text-transform Menentukan bentuk huruf none capitalize uppercase lowercase white-space Menentukan bagaimana white space akan ditangani normal pre nowrap word-spacing Menentukan jarak spasi antar kata normal length
CSS Font Properties (1) CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf. Property Description Values font Sebuah property singkat untuk menyeting semua properti untuk font dalam sebuah deklarasi font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar font-family Menentukan jenis huruf family-name generic-family
CSS Font Properties (2) font-size Menentukan ukuran huruf font-style xx-small x-small small medium large x-large xx-large smaller larger length % font-style Menentukan style huruf normal italic oblique font-weight Menentukan ketebalan huruf normal bold bolder lighter
CSS Border Properties (1) CSS border properties digunakan untuk mengatur border di setiap elemen. Misalnya saja warna border, ketebalan border dan style border. Property Description Values border Digunakan untuk menentukan property border(atas, kiri, kanan, bawah) dalam satu deklarasi saja border-width border-style border-color border-bottom Digunakan untuk menentukan property border bagian bawah dalam satu deklarasi saja border-bottom-width border-style border-color border-bottom-color Menentukan warna border bawah border-color border-bottom-style Menentukan style border bawah border-style border-bottom-width Menentukan lebar border bawah thin medium thick length
CSS Border Properties (2) border-color Menentukan warna keempat border color border-left Digunakan untuk menentukan property border bagian kiri dalam satu deklarasi saja border-left-width border-style border-color border-left-color Menentukan warna border kiri border-left-style Menentukan style border kiri border-style border-left-width Menentukan lebar border kiri thin medium thick length border-right Digunakan untuk menentukan property border bagian kanan dalam satu deklarasi saja border-right-width border-style border-color border-right-color Menentukan warna border kanan border-right-style Menentukan style border kanan
CSS Border Properties (3) border-right-width Menentukan lebar border kanan thin medium thick length border-style Menentukan style dari keempat border sekaligus None / hidden / dotted / dashed / solid / double / groove / ridge /inset / outset border-top Digunakan untuk menentukan property border bagian atas dalam satu deklarasi saja border-top-width border-style border-color border-top-color Menentukan warna border atas border-color border-top-style Menentukan style border atas border-top-width Menentukan ukuran border atas thin / medium / thick length border-width Menentukan ukuran dari keempat border sekaligus
CSS Margin Properties CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen. Property Description Values margin Mensatur margin properti untuk kempat sisi (atas, kanan, bawah, kiri) sekaligus margin-top margin-right margin-bottom margin-left margin-bottom Mengatur margin bawah auto length % margin-left Mengatur margin kiri margin-right Mengatur margin kanan margin-top Mengatur margin atas Auto / length / %
CSS List Properties (2) list-style-type Menentukan tipe penanda list item none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin
Terima Kasih