Aturan Penulisan css
Pengertian Selector CSS
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS
membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag
HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi
atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang
memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll.
Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. Mengenai selector,
akan kita bahas secara lebih detail dalam tutorial-turorial CSS selanjutnya.
Pengertian Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS
memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita
inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property adalah “efek
apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya,
dll.
Pengertian Value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang
digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat
berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar
dibawah ini:
Selector, Property dan Value ini adalah elemen inti dari CSS,
Syntax CSS dibagi dalam 3 bagian :
selector {property : value;}
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah (color, font-size, dll)
Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;)
Property dan nilai diapit dalam kurung {}
Contoh property dan values pada background
Property Values Keterangan
Background-
Url Alamat gambar yang sudah di aploud
image
Repeat Gambar diulang dalam halaman
Background- Repeat-y Gambar diulang dalam sumbu y
repeat Repeat-x Gambar diulang dalam sumbu x
no-Repeat Gambar tidak diulang hanya muncul 1 gambar
Contoh property dan values pada font
Property Values Keterangan
font-family Arial; Jenis font adalah arial
small; kecil
Font-size medium; menengah
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
Underline; Menampilkan Text bergaris bawah
Text-
decoration Overline; Menampilkan text bergaris atas
line-through; Menampilkan text tercoret
blink; Menampilkan text berkedip
Text-transform uppercase; Menampilkan text huruf besar
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
a:hover Keadaan link saat dikenai mouse
a:active Keadaan link saat di klik
a:visited Keadaan link setelah dikunjungi
Contoh property dan value pada position
Property Values Keterangan
Elemen render dalam rangka, seperti yang
Static;
Position muncul dalam aliran dokumen
Absolute; Unsur diposisikan relatif terhadap posisi
pertama (tidak statis)
Unsur diposisikan relatif terhadap jendela
Fixed;
browser
elemen diposisikan relatif terhadap posisi
Relative; normal, sehingga "left: 20" menambahkan 20
pixel ke posisi KIRI elemen
Nilai dari properti posisi diwariskan dari
Inherit;
elemen induk
Contoh Property dan Value pada Border
Property Values Keterangan
1px solid #000;
ukuran border bisa diubah dalam ukuran pixel.
2px dotted #ff0000;
Border-style (contoh solid;dotted) merupakan
3px double blue; style pada border setiap style tampilan berbeda.
Border 5px groove #3300ff; Border-color bisa menggunakan warna RGB
juga Desimal. Property border bisa diganti
5px ridge #3300ff;
dengan border-left; border-right; border-top;
5px inset #3300ff; border-bottom;
5px outset #3300ff;
Contoh property dan value pada border-radius
Property Values Keterangan
Garis melemgkung disemua sisi dengan ukuran
Border-radius 10px;
10px
border-top-left- Garis melengkung pada sisi atas dan kiri
2em 0.5em;
radius dengan ukuran berbeda
border-top- Garis melengkung pada sisi atas dan kanan
3em 2.5em;
right-radius dengan ukuran berbeda
border-bottom- Garis melengkung pada sisi bawah dan kanan
1em 2em;
right-radius dengan ukuran berbeda
border-bottom- Garis melengkung pada sisi bawah dan kiri
2em 1em;
left-radius dengan ukuran berbeda
border-bottom- Garis melengkung pada sisi bawah dan kiri
2em;
left-radius dengan ukuran sama
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
margin 10px 5px 0px 5px; atas 5, kanan 5, bawah 0, kiri 10
margin-top 10px; karak atas 10px
margin-right 5px; jarak kanan 5px
margin-bottom 2em; jarak bawah 2em
margin-left 3em; jarak kiri 3en
padding 2em; atas, kanan, kiri dan bawah 2em
Contoh property dan value pada display
Property Values Keterangan
Berfungsi untuk menghilangkan atau
None; menyembunyikan elemen yang diberi kode
tersebut
Berfungsi untuk memberi blok baru atau baris
Block;
baru seperti kode <br> dan <p>
DISPLAY
Berfungsi sama seperti kode span, yang
Inline; memberi desain background berbeda hanya
pada elemen tersebut
jika layar tidak muat maka secara otomatis
Inline-block;
membuat baris baru.
Berikut contoh tampilan ke 8 jenis border ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div{
width: 80px;
height: 80px;
float: left;
margin: 20px;
text-align: center;
}
.satu { border: 10px solid green; }
.dua { border: 10px dotted green; }
.tiga { border: 10px dashed green; }
.empat { border: 10px double green; }
.lima { border: 10px groove green; }
.enam { border: 10px ridge green; }
.tujuh { border: 10px inset green; }
.delapan { border: 10px outset green; }
</style>
</head>
<body>
<div class="satu">solid</div>
<div class="dua">dotted</div>
<div class="tiga">dashed</div>
<div class="empat">double</div>
<div class="lima">groove</div>
<div class="enam">ridge</div>
<div class="tujuh">inset</div>
<div class="delapan">outset</div>
</body>
</html>
