1. Dokumen menjelaskan pengertian CSS dan cara menambahkannya ke dalam kode HTML. CSS digunakan untuk mengatur tampilan dan tata letak konten website.
2. Terdapat tiga cara untuk menambahkan CSS yaitu external style sheet, internal style sheet, dan inline style. External style sheet disimpan dalam berkas terpisah dengan ekstensi .css.
3. CSS memiliki banyak properti untuk mengatur warna, ukuran font, posisi gambar, dan lainnya untuk
2. 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
3. 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.
4. 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;”>
5. 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)
6. 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 */
7. 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
8. 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
9.
10. 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
11. 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
12. 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 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
13. 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
14. 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
15. 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
16. 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
17. 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-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
18. 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-style
border-top-width Menentukan ukuran border atas thin / medium / thick
length
border-width Menentukan ukuran dari keempat border
sekaligus
thin / medium / thick
length
19. 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 auto
length
%
margin-right Mengatur margin kanan auto
length
%
margin-top Mengatur margin atas Auto / length / %
20. CSS Padding Properties
CSS padding properties digunakan untuk menentukan spasi antara border elemen
dengan isi element.
Property Description Values
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
%
21. CSS List Properties (1)
CSS list properties digunakan merubah jenis list, memberi gambar sebagai
pengganti bullet, dll.
Property Description Values
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
22. 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