Kumpulan Kode CSS Terlengkap
Good morning brother's and sista...
Setelah mempelajari dasar CSS dan metode penulisan CSS, tiba saatnya untuk mengenal berbagai macam declaration (property and value) dalam CSS. Mengapa hanya declaration? Bukankah Selector juga bagian dari syntax CSS? Yupz.. Itu benar sekali! Pada dasarnya Selector CSS ditulis before declaration.
Sebenarnya penulisan selector CSS dengan nama TAG HTML bertujuan untuk memudahkan mengingat nama yang cocok dengan attribute:value.Karena itulah, kita hanya butuh NAMA SELECTOR yang telah dilengkapi declaration (nama yang bisa diubah sesuai kebutuhan) untuk memanggil design CSS kedalam HTML (Nama Selector terletak pada tag style (internal method) dan didalam filename.css (eksternal method) yang dipasang di tag body). Namun kita harus tetap memperhatikan cara memanggil SELECTOR kedalam HTML, yaitu dengan element HTML, SELECTOR ID maupun SELECTOR CLASS.
NB: Kita hanya perlu mengetahui TAG HTML yang akan mengatur tampilan utama website dan pasangan Attribute:value untuk desain tampilan website. Example:
<html>
<head>
<title>SELECTOR CSS</title>
<style>
h1 {color:red;font-style:italic}
.BINTANG {text-align:center;color:orange;}
</style>
</head>
<body>
<h1>h1 adalah TAG HTML, color dan font-style- adalah property, red dan italic adalah value.</h1>
<p class="BINTANG">p adalah TAG HTML, class adalah cara pemanggilan CSS (selector class), BINTANG adalah nama selector.</p>
</body>
</html>
Hasilnya
h1 adalah TAG HTML, color dan font-style- adalah property, red dan italic adalah value.
p adalah TAG HTML, class adalah cara pemanggilan CSS (selector class), BINTANG adalah nama selector.
Jadi, intinya penggunaan selector dengan nama TAG HTML bukan aturan yang baku saat menulis syntax CSS.
To the point aja, berikut kumpulan declaration (property:value) dalam syntas CSS:
- Background Declaration
- Background-image: url('urlpicture.jpg') =background gambar. urlpicture.jpg ganti dengan URL gambar anda. Example:
- Background-image: url('http://wapblog.com/urlpicture.jpg')
- Backgournd-repeat: no-repeat =Menampilkan perulangan gambar. The other value: repeat-y or repeat-x.
- Background-attachment: fixed =Menentukan dapat tidaknya scroll gambar bersama dokumen.
- Background-position: left top =Posisi background. The other value: right top,etc.
- Backgorund-color: #FFFFFF =Warna background element HTML.
- Font Declaration
- font-family:Arial =Jenis font. The other value calibri,etc nb:beberapa jenis font tidak support di browser lama.
- Font-style:italic =Bentuk font. The other value: normal or oblique.
- Font-weight:bold =Ketebalan huruf. The other value: 100﹑ 200, -900
- Font-size:12px =Ukuran gambar. The other value: 13px, 17px,etc
- Color:#ffffff =warna font.
- Text Declaration
- Text-decoration:underline =dekorasi text. Valuenya: overline, line-through, blink.
- text-transform:capitalize =huruf kapitar atau kecil.
Valuenya: uppercase, lowercase - text-align:center =perataan teks. Valuenya: right, left., justify
- Border Declaration
- border-color:#FF0000 =warna border
- border:1px =ukuran border. Valuenya: 2px, 3px,etc
- Border-width:10px
- border:dotted =type border. Valuenya: Solid, dashed, double, groove, ridge, inset, outset,etc
- border-top:1px =untuk atas
- border-right:1px =untuk kanan
- border: groove #EBFF00 3px; =gabungan dari beberapa attribute.
- Border-radius:10px =garis melengkung
- border-top-left-radius:1em 0,5em; =garis melengkung sisi atas dan kiri
- border-bottom-right-radius:1em 2em; =garis melengkung sisi bawah dan kanan
- box-shadow: 10px 10px 5px #888888; =bayangan box
- Link Declaration
- a:link =awal link
- a:hover =saat tersentuh pointer
- a:active =link saat diklik
- a:visited =link yang telah dikunjungi
- Position Declaration
- position:static =posisi default suatu element
- position:relative =posisi dapat disesuaikan dengan bantuan property top right,etc
- position:absolute =obkek akan mengikuti induk element atau element pertama(not static) (
- position:fixed =selelu pada posisinya meskipun browser discroll
- position:inherit =posisi mengikuti element induk
- Margin and Padding Declaration
- margin: 7px 5px 0px 5px; =batas luar. ket: atas 5, kanan 5, bawah 0, kiri 7
- margin-top: 7px; =batas atas luar
- margin-bottom: 2em; =batas bawah luar
- margin-right: 5px; =batas kanan luar
- margin-left: 3em; =batas kiri luar
- padding: 2em; =batas dalam
<html>
<head>
<style>
.kucing {border-top-style: dotted;border-right-style: solid; border-bottom-style: dotted;border-left-style: solid;border-color:#FF0000;}
.kelinci {border-style: groove;border-width: 5px;}
</style>
</head>
<body>
<h1 class="kelinci"my name is....</h1>
<p class="kucing"my name is weldy simon. I'm 18 years old. I want to be a....</p>
</body>
</html>
Hasilnya
<html>
<head>
<style>
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
</style>
</head>
<body>
<p><a href="http://mymelody13.blogspot.com" target="_blank">mymelody13</a></p>
</body>
</html>
Hasilnya mymelody13
<html>
<head>
<style>
.Kuda {position: relative;left: 40px;border: 5px solid #73AD21;}
</style>
</head>
<body>
<h2>tanpa .kuda</h2>
<h2 class="kuda">dengan .kuda. Position relative</h2>
</body>
</html>
Hasilnya tanpa .kuda
dengan .kuda. Position relative
thank you for reading and see you... artikel terkait
DASAR/BASIC CSS metode penulisan
CSS KUMPULAN TAG HTML TERLENGKAPo
Makasih gan info artikelnya tentang Kumpulan Kode CSS Terlengkap, cocok bgt buat saya yang pemula. Disini sy menjadi tau macam-macam dari Link Declaration yaitu a:link =awal link, a:hover =saat tersentuh pointer, a:active =link saat diklik, a:visited =link yang telah dikunjungi. Update terus artikelnya ya gan, semoga bermanfaat untuk para pemula lainnya, sukses terus wat agan.....
ReplyDeleteJangan lupa ya.....
kunjungi website saya : https://lurriekurniasih.mahasiswa.atmaluhur.ac.id
dan website kampus saya : http://www.atmaluhur.ac.id