CSS (Cassading Style Sheet)
|
Sabtu, 27 Februari 2016
Assalamualaikum Wr.Wb
Hari ini saya sedang belajar tentang CSS, karena sebelum kita masuk ke materi selanjutnya kita harus paham terlebih dahulu tentang HTML maupun CSS. Untuk lebih jelasnya mari kita simak bersama-sama.
Pengertian
CSS (Cassading Style Sheets) merupakan suatu aturan untuk mengendalikan beberapa komponen dalam sebuah websiteatau blog sehingga akan lebih terstruktur atau teratur. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS ini memungkinkan kita untuk menampilkan halaman yang sama namun dalam format yang berbeda.
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.
Keuntungan Menggunakan CSS :
- CSS memberikan keseragaman pada halaman web.
- Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet.
- CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
- Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
- CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
Contoh coding CSS adalah sebagai berikut :
h1 {color:blue; font-size:18px;}
- h1 --> disebut sebagai selector atau tag elemen HTML yang dipilih untuk diformat.
- Color --> merupakan properti CSS.
- blue adalah nilai dari properti CSS.
- Setiap deklarasi atau statement CSS dibuat didalam tanda kurawa { }.
- Setiap properti diakhiri dengan tanda titik koma.
untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.
Selector id digunakan untuk menempatkan style pada elemen yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) atribut id dari elemen didefinisikan dengan tanda pagar #. contoh penggunaannya misalkan kita memiliki sebuah tag HTML sebagai berikut :
Definisi id diatas pada CSS akan ditulis sebagai berikut :
Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefinisikan sebuah grup HTML, selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Atribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunan misalkan kita memiliki beberapa elemen HTML sebagai berikut :
Dalam hal ini ada beberapa istilah dan konsep dasar dari css. Tapi sebeleum menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan bagaimana suatu style harus ditulis. Berikut adalah contoh mudah penulisan css pada suatu halaman web :
Contoh CSS 1
<html>
<head>
<style Type="text/css">
h1 {font-family:tahoma}
h2 {color:blue}
p {font-size:11pt; font-style:italic}
</style>
</head>
<body>
<h2>NuSinau</h2>
<p>NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.
</p></body>
</html>
Sintak CSS (Syntax CSS)
selector (properti:nilai)
body (color:blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain.setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.
Selector
Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.
seperti pada contoh diatas; body, p, dan h1, adalah suatu selector dimana warna (color), nama font (font family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahom, bold, blue, dll).
Contoh :
h1 (font-size: 20px; text-align: left;color:blue; font-family:Arial;)
dan juga dapat ditulis seperti dibawah ini.
h1 (font-size:20px;
text-align:left;
color:blue;
font-family: Arial;)
pengelompokan Selector (Grouping of Selector)
Seperti dapat dilihat, satu selector dapat memiliki beberapa properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai properti dengan nilai yang sama. Dengan begitu harus dilakukan pengelompokakan selector.
h1 , body , p , ul
{
color:blue;
}
Pada contoh diatas, elemen header, body,paragraph, unordered list berada pada group yang sama. semua elemen tersebut nantinya akan berwarna biru.
Cara yang digunakan untuk menyisipkan CSS dengan :
1. Style sheet Eksternal : meng-link kan suatu alamat yang dituju 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 contohnya 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 element yang ingin dibuat stylenya.
*Declaration => Isi dari property dan nilai dari css.
Pengelompokan dalam CSS
Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai properti yang sama (misalnya, font, ukuran, warna, dll).
Dengan satu perintah dapat memberikan properti style pada elemen yang berbeda dengan nilai yang sama. Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika merubah properti di elemen.
Macam-macam Css :
Padding, Margin dan Border
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam.
Border : Adalah garis tepi dari komponen.
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border.
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.
Fungsi dari Padding : Jarak antara garis tepi/border untuk suatu elemen ke bagian dalam/isi dari elemen itu sendiri.
Padding dari Css Padding :
~ Padding-top : memberi jarak pada bagian dalam tas.
~ Padding-right : memberi jarak pada bagian dalam kanan.
~ Padding-botton : memberi jarak pada bagian dalam bawah.
~ Padding-left : memberi jarak pada bagian dalam kiri.
Catatan : 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, anda style dari batas area pada box/kotak.
Property dari CSS border :
- border-style
- border-width
- border-color
- border-individual
Berikut ini adalah contoh dari syntax pada CSS :
1. Untuk memberi background pada website.
body {
background-color: lightblue;
}
Selain bisa menggunakan background warna yang kita inginkan 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 pink;
bacground-color: grey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
5. Menambahkan height dan width
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,td {
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 lagi silahkan Anda buka website resmi di http://W3Schools.com/.
Sekian penjelasan dari saya dan semoga bermanfaat untuk Anda.
Wassalamulaikum Wr.Wb
Tidak ada komentar:
Posting Komentar