MAKALAH

“Perintah Dasar CSS”

OLEH Mahdya A

Datuamas

D19010006

JURUSAN TEKNOLOGI PENDIDIKAN FAKULTAS

KEGURUAN DAN ILMU PENDIDIKAN

UNIVERSITAS MADAKO

Tolitoli

2022
Contoh property dan values pada

Property Values Keterangan

Background-
Url Alamat gambar yang sudah di aploud
image
Repeat Gambar diulang dalam halaman
Repeat-y Gambar diulang dalam sumbu y
Background-
Repeat-x Gambar diulang dalam sumbu x
repeat
Gambar tidak diulang hanya muncul 1
no-Repeat
gambar

Contoh property dan values pada font

Property Values Keterangan

font-family Arial; Jenis font adalah arial

small; kecil

medium; menengah
Font-size
large; besar

12px; besar 12 pixel (Bisa diganti 12pt)

Normal; Font normal

Font-style
Italic; Font miring

Normal; Ketebalan font normal

Font-weight Bold; Font Tebal

100-900 Ketebalan font dengan nilai dari 100-900

Contoh Property Dan Value pada Text

 Property Values Keterangan

none; Menampilkan text asli

Menampilkan Text bergaris

Underline;
bawah

Menampilkan text bergaris atas

Text- decoration Overline;

Menampilkan text tercoret

line-through;

Menampilkan text berkedip

blink;

Text- transform Menampilkan text huruf besar

uppercase;

left; Text rata kiri

right; Text rata kanan

Text-align
center; Text rata tengah

justify; Text rata kanan kiri

Contoh Selector Pada Link

Selector Keterangan

a:link Keadaan awal link

Keadaan link saat dikenai mouse

a:hover

a:active Keadaan link saat di klik

a:visited Keadaan link setelah

dikunjungi
Contoh property dan value pada

Property Values Keterangan

Elemen render dalam rangka, seperti yan

muncul dalam aliran dokumen
Static;

Unsur diposisikan relatif terhadap posi

Absolute; pertama (tidak statis)

Unsur diposisikan relatif terhada

Fixed; jendela browser
Position

elemen diposisikan relatif terhada

posisi normal, sehingga "left:
20" menambahkan 20 pixel ke posi
Relative;
KIRI elemen

Nilai dari properti posisi diwariskan da

Inherit; elemen induk

Contoh Property dan Value pada Border

Property Values Keterangan

Border 1px solid #000; ukuran border bisa

diubah dalam ukuran
2px dotted
pixel. Border-style
#ff0000;
(contoh solid;dotted)

3px double blue; merupakan style pada

 5px groove
border setiap style tampilan berbed
#3300ff;
Border-color bisa menggunakan warn

5px ridge RGB juga Desimal. Property border bis

#3300ff; diganti dengan border- left; border-righ

border- top; border-bottom;
5px inset
#3300ff;

5px outset
#3300ff;

Contoh property dan value pada border-radius

Property Values Keterangan

Garis melemgkung disemua sisi denga

Border-
10px; ukuran 10px
radius

border- top- Garis melengkung pada sisi atas dan k

left- radius 2em 0.5em; dengan ukuran berbeda

border- top- Garis melengkung pada sisi atas da

right 3em 2.5em; kanan dengan ukuran berbeda
-radius

border-
Garis melengkung pada sisi bawah da
bottom- right-
1em 2em; kanan dengan ukuran berbeda
radius

border-
Garis melengkung pada sisi bawah da
bottom- left-
2em 1em; kiri dengan ukuran berbeda
radius
 borde Garis melengkung pada
bottom-
2em; sisi bawah dan kiri
left-
dengan ukuran sama
radius

Margin dan Padding

 Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal
memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri
dari kontent yang ada pada struktur header di sekitarnya.
 Padding adalah kode yang mengatur seleksi batas jarak dalam
seperti memberi jarak pada header dengan batas tepi header misalnya
padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.

Contoh property dan value pada margin dan padding

Property Values Keterangan

10px 5px 0px atas 5, kanan 5, bawah 0, kiri 10

margin
5px;

margin- top
10px; karak atas 10px

margin- right
5px; jarak kanan 5px

margin-
2em; jarak bawah 2em
bottom

margin- left
3em; jarak kiri 3en

atas, kanan, kiri dan bawah 2em

padding 2em;

Contoh property dan value pada display

Property Values Keterangan

Berfungsi untuk menghilangkan atau

menyembunyikan
None; elemen yang diberi kode tersebut

Berfungsi untuk memberi

blok baru atau baris baru seperti kode
Block; dan

DISPLAY

Berfungsi sama seperti kode span,

yang memberi desain background
berbeda hanya pada elemen tersebut
Inline;

jika layar tidak muat maka secara

Inline-block; otomatis membuat baris baru.