CSS

CSS
Cascading Style Sheet
ERIK HARDIYANTO
POLITEKNIK NEGERI MALANG

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

Menambahkan CSS ke dalam HTML
1. 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
2. Internal Style Sheets
diletakkan di antara <head>…</head>
<style type=“text/css”>
letakkan css di sini
</style>
3. Inline Style
diletakkan di dalam elemen HTML
<h1 style=“color: #0099ff;font-family: Verdana; size: 18pt;”>

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)

Komentar pada 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 */

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

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

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.
color Menentukan warna text color
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.
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 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.
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

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-color
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-color
border-right-style Menentukan style border kanan border-style

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-style
border-top-width Menentukan ukuran border atas thin / medium / thick
length
border-width Menentukan ukuran dari keempat border
sekaligus
thin / medium / thick
length

CSS Margin Properties
CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen.
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 auto
length
%
margin-right Mengatur margin kanan auto
length
%
margin-top Mengatur margin atas Auto / length / %

CSS Padding Properties
CSS padding properties digunakan untuk menentukan spasi antara border elemen
dengan isi element.
padding Menentukan empat padding sebuah elemen
(atas, kanan, bawah, kiri) sekaligus
padding-top
padding-right
padding-bottom
padding-left
padding-bottom Menentukan padding bawah sebuah elemen length
%
padding-left Menentukan padding kiri sebuah elemen length
%
padding-right Menentukan padding kanan sebuah elemen length
%
padding-top Menentukan padding atas sebuah elemen length
%

CSS List Properties (1)
CSS list properties digunakan merubah jenis list, memberi gambar sebagai
pengganti bullet, dll.
list-style Digunakan untuk menentukan semua list
properties sekaligus.
list-style-type
list-style-position
list-style-image
list-style-image Menetapkan image sebagai penanda list none
url
list-style-position Menentukan tempat penanda list item inside
outside

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

CSS

More Related Content

Viewers also liked

Similar to CSS

Recently uploaded

CSS