a3bed cascading style sheet (css)

Cascading Style Sheet
(CSS)

STIMATA
2016/suvi.rahma@gmail.com

Apa itu CSS?
• Cascading Style Sheet (CSS) adalah
salah satu bahasa pemrograman web
yang digunakan untuk mempercantik
halaman
web
dan
mengendalikan
beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan
seragam.

Struktur Penulisan CSS

Jenis Jenis Selector CSS

1.

Class Selector
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun.
Penulisan class selector dalam css disymbolkan dengan tanda titik ( . ).
Penulisan code di dalam dokumen HTML

•
....

Belajar Membuat Website

....

• Penulisan code dalam cssnya
.judul{
Font : 12pt Impact;
}

Jenis Jenis Selector CSS

2. Id selector
• Cara memberi nama ID :
Dapat mengandung huruf, angka, atau karakter garis bawah
Karakter pertama harus berupa huruf atau karakter garis bawah
Diawali dengan tanda #
Jangan memberi nama id sama dengan value
• Contoh:
• Penulisan code dalam dokumen HTML
....

copy-Right Cyber Bussiner School – 2016

....
• Penulisan code di cssnya
#footer {
color: blue;
border: 1px solid black;
}

Jenis Jenis Selector CSS

3. Tag selector
• Nama dari element HTML digunakan sebagai selector untuk mendefinisikan
tag HTML yang berasosiasi
• Contoh:
• Penulisan code di dokumen HTML
....
Mengarungi Samudra PHP
Belajar HTML dan CSS
....
• Penulisan code di cssnya
h1{
font: 12pt Impact;
color:red;
}

Cara Penempatan CSS
a. Inline CSS
• Inline css merupakan cara penggunaan css dengan menambahkan
langsung di tag dokumen htmlnya sebagai atribut.
• Contoh:

Membuat tulisan warna biru


Membuat tulisan miring



Cara Penempatan CSS
• b. Internal CSS
•

•

Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam
tag .... Tag style tersebut disimpan di antara tag
...
Contoh:

Belajar Css Mudah

Pengaturan paragraf dengan
p{
menggunakan
color:green;
CSS di dalam header dokumen
font-family:arial;
html
font-size:120%;
Dengan contoh ini, maka setiap
}
paragraf

atau yang berada diantara

danakan
memiliki format yang sama

Cara PenempatanCSS
•
•

c. External CSS. Cara ini menggunakan file Css yang dituliskan secara terpisah
dengan dokumen html.
1) Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

p{
font-family: arial;
font-size: small;
}
h1{
color: red;
}
• 2) Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya
dengan memasukkan kode di bawah ini yang disisipkan di antara tag < head > dan

< / head >
• ....



....

Properties Gambar
Properties

Value

Keterangan

Background-image

url ()

Alamat gambar yang dituju

Background-repeat

Repeat
Repeat-x
Repeat-y
No-repeat

Diulang
Diulang sumbu x
Diulang sumbu y
Tidak diulang

Background-position

Top left
Top center
Top right
Center left
Center center
Center right

Bottom left
Bottom center
Bottom right

Properties

Value

Keterangan

Pengaturan warna
Color

Red, dll

Pengaturan spasi
Letter-spacing

Normal
Length

Ukuran standar HTMl
Ukuran panjang (cm,px)

Perataan text
Text-align

Left
Right
Center
Justify

Text-decoration

None
Undrline
Overline
Line-through
blink

Bentuk standart
Garis bawah
Bergaris atas
Text dicoret
Text berkedip

Length
%

Dengan cm, px
Dengan persentase

Pengaturan text indentasi
Text-indent
Pengubahan bentuk karakter
Text-transform

Capitlize
Uppercase
Lowercase
none

Properties

Value

Keterangan

Jenis font
Font-family

Arial, dll

Ukuran font
Font-size

Small
Medium
Large
Length
%

Pengaturan gaya pada font
Font-style

Normal
Italic
Oblique

Ketebalan huruf
Font-weight

Normal
Bold
100 - 900

Kecil
Menengah
Besar
Besar font(pt,px)
Persentase

TUGAS