hari ini saya sedang belajar memahami CSS di w3schools maupun diweb browser. Karena sebelum kita melengkah lebih lanjut kita harus paham terlebih dahulu tentang html maupun Css. Untu lebih lanjutnya mari kita simak penjelasan berikut ini :
Pengertian
Css adalah slah satu bahasa style web yang sangat populer yang dipakai pada berbagai apliklasi web.
Kegunaan dari css itu sendiri yaitu untuk menentukan halaman web yang anda buat, termasuk desain, tata letak dan variasi tampilan untuk perangkat yang berbeda dan ukuran layar.
Cara yang digunakan untuk menyisipkan Css bisa dengan :
1.Style sheet Eksternal : meng-link kansuatu alamat yang ditujuh dengan penempatannya didalam <head></head>.
2.Style sheet Internal : Digunakan untuk satu halaman tunggal jadi kita membuat script <style> didalam <head</head>
3.Gaya Inline : Menerapkan gaya yang unik untuk elemen tunggal hanya cukup menambahkan atribut style untuk elemen yang relevan contonya seperti <h1><h2><h3><h4> dan seterusnya.
4.Multiple style sheet : Pemilihan style sheet yang berbeda maka nilai-nilainya akan diwariskan dari style sheet yang lebih spesifik.
Syntax dari Css :
* Selector => Html elementyang ingin dibuat stylenya.
* Declaration => Isi dari property dan nilai dari css.
Macam-macam Css :
Css margin property => digunakan untuk menghasilkan ruang disekitar elemen/ halaman sifat dari margin itu sendiri untuk mengatur ukuran ruang putih luar perbatasan maksimal ukuran dari margin yang digunakan 80px.
Fungsi dari margin : jarak antara garis tepi/border untuk suatu elemen ke bagian sebelah luar/jarak antara batas elemen kebagian sebelah luar/jarak antara batas elemen ke elemen lainnya.
Property dari Css margin :
- Margin-top : memberi jarak pada bagian luar atas
- Margin-right : memberi jarak pada bagian luar kanan
- Margin-Botton : memberi jarak pada bagian luar bawah
- Margin-Left : memberi jarak pada bagian luar kiri
Css padding Property => digunakan untuk menghasilkan ruang disekitar konten yang mengatur ukuran ruang putih antara sisi elemen dan perbatasan elemen maksimal elemen ini memiliki padding 50px.
Fungsi dari padding : Jarak antara garis tepi/Border untuk suatu elemen ke bagian dalam/isi dari elemen itu sendiri.
Property dari Css Padding :
- Padding-top : memberi jarak pada bagian dalam atas
- Padding-right : memberi jarak pada bagian dalam kanan
- Padding-botton : memberi jarak pada bagian dalam bawah
- Padding-left : memberi jarak pada bagian dalam kiri
Np: Untuk pemberian nilai dari property digunakan titik dua(:) akhir dari property digunakan titik koma(;)
Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.
Property dari Css border :
- border-style
- border-width
- border-color
- border-individual
A.Css Comment(komentar) berfungsi untuk menjalankan kode kita dan dapat membantu kita ketika mengedit source code dikemudian hari. Cara penulisannhya /* */.
B. Css ID dan Class berfungsi untuk menentukan style untuk elemen tunggal yang unik. Id pemilih menggunakan distribut id elemen Html dan didefinisikan dengan "#".
C. Selector Class berfungsi untuk menentukan gaya/sekelompok elemen hal tersebut berbeda dgn ID dan kelas. Selector class ini menggunakan atribut class Html dan didefinisikan dgn "." .
Berikut ini adalah contoh dari syntax pada Css.
1.Untuk memberi baground pada website.
body {
background-color: lightblue;
}
Selain bisa menggunakan baground warna kita juga bisa menggunakan baground image/gambar yaitu dengan cara :
body {
background-image: url("paper.gif");
}
2.Memberi Border
body{
border-style: solid;
}
3.Menambahkan Margin
p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
4.Menambahkan Padding
p.one {
border: 1px solid red;
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
5.Menambahkan height dan weidth
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
6. Menambahkan text
body {
color: blue;
}
h1 {
color: green;
}
7.Memberi link
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
8. Menambahkan Table
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
9.Menambahkan align
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
10. Menambahkan font
p {
font-family: "Times New Roman", Times, serif;
}
Untuk lebih jelasnya silahkan anda buka di website resmi dari http://www.w3schools.com/.
Sekian penjelasan dari saya semoga bermanfaat. terima kasih
Wassalamualaikum wr.wb
Tidak ada komentar:
Posting Komentar