Kali ini saya akan melanjutkan belajar CSS, dengan menjabarkan property CSS. Kemarin saya telah menjelaskan tentang Properti CSS : Part 1. Sekarang kita lanjut.
1. CSS Margin
Margin dalam CSS digunakkan agar memberi pembatas lembar putih dalam halaman. Dengan CSS, kita bisa memiliki akses penuh untuk mengatur berbagai ukuran margin diberbagai posisi.
Macam Marginnya :
- margin-top
- margin-bottom
- margin-left
- margin-right
- px, em, dll
- auto - otomatis menyesuaikan dengan isi
- %
- dan inherit - mewarisi dari margin induk
- Margin dengan empat nilai ( maka sesuai dengan yang ditulis nilainya dan akan sesuai dari posisi kanan, kiri, bawah dan atas) / margin: 50px 50px 50px 50px;
- Margin dengan tiga nilai ( maka akan dideklarasikan untuk nilai pertama untuk margin atas, nilai kedua untuk margin kanan dan kiri dan nilai ketiga untuk margin bawah) / margin: 50px 50px 50px;
- Margin dengan dua nilai ( maka akan dideklarasikan untuk nilai pertama adalah ukuran margin atas dan bawah serta nilai kedua untuk margin kanan dan kiri) / margin: 50px 50px;
- Margin dengan satu nilai ( maka dideklarasikan untuk semua margin karena hanya satu nilai yang ditulis, maka akan berlaku untuk semua posisi margin) / margin:50px;
- Ada juga margin auto. Margin ini berguna untuk membuat pembatas lembar putih secara otomatis.
- margin inherit, akan mewarisi margin induk. Jadi margin ini akan mengadaptasi margin dari margin induk yang sudah ada.
2. CSS Padding
Padding digunakkan untuk membuat pembersihan konten dengan batasan yang disesuaikan. Memungkinkan kita membuat konten dengan latar yang bersih. Padding ini bisa diatur penuh pada bagian kanan, kiri, atas dan bawah.
- padding-left
- padding-right
- padding-top
- padding-bottom
- % - sesuai dengan nilai yang diinginkan akan diukur dari layar penuh atau margin ataupun ukuran induk konten
- px
- inherit - dengan mewarisi padding induk
- padding: 25px 50px 75px 100px; akan dideklarasikan sesuai ukuran dari atas, kanan, bawah, dan kiri.
- padding: 25px 50px 75px; dengan aturan nilai pertama untuk atas, nilai kedua kiri dan kanan, dan nilai ketiga untuk bawah.
- padding: 25px 50px; Menyatakan bahwa atas dan bawah dideklarasikan nilai pertama dan nilai kedua untuk kanan dan kiri
- padding: 25px; dengan keempat padding memiliki ukuran yang sama.
3. CSS Height dan Width
Property ini mendukung agar suatu elemen tertentu memiliki lebar dan tinggi yang ditentukan. Property-nya dasarnya ada.
div {
height: 200px;
width: 50%;}
Namun masih ada property turunan lainnya. Silahkan coba sendiri di text editor anda.
4. CSS Outline
Digunakkan untuk membuat line di luar elemen atau box model. Total lebar elemen dan tinggi tidak terpengaruh oleh lebar garis besar. Memiliki style
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
p {
border: 1px solid black;
outline-color: red;
outline-style: dotted; }
keseluruhan property outline ada
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
CSS Text memungkinkan beberapa text memiliki format yang berbeda dan terstruktur. Untuk Text, kita bisa mengatur color, rata,decoration, shadow, dan spacing. Color yang diatur disini bisa sebuah color standard, atau rgb dan atau kexadesimal.
body {
color: blue;}
Mengatur rata dengan align digunakan untuk mengatur alignment horizontal teks.
h1 {
text-align: center;}
h2 {
text-align: left;}
h3 {
text-align: right;
}
Decoration untuk mengatur atau menghapus dekorasi dari teks.
h1 {
text-decoration: overline;}
h2 {
text-decoration: line-through;}
h3 {
text-decoration: underline;}
Font dalam CSS bisa mendeklarasikan font family, boldness, size, and the style of a text. Font yang direkomendaskan adalah font serif dan sans-serif. Namun yang sering digunakkan adalah sans-serif karena tidak terlalu formal.
Sekian dulu ya, Terima Kasih
Referensi :
http://www.w3schools.com/css/css_padding.asp
0 komentar:
Posting Komentar