CSS adalah materi yang saya suka dan saya kuasai, yah.. walaupun tidak 100% hehehe.. kali ini saya akan membagikan sedikit pengetahuan dan tutorial mengenai css. langsung saja...
PENDAHULUAN MATERI CSS
Sebelumnya saya minta maaf apa bila ada salah kata dalam penafsiran saya, karena ini adalah pemahaman saya sendiri SO mingkin ada banyak kesalahan mengenai pengertiannya. tapi saya akan mencoba untuk mempermudah dalam memahami css.
A. ) Pengertian CSS
Semua pasti tahu CSS adalah kode yang digunakan untuk membuat design sebuah web atau blog, saya menyebutnya dengan "Baju Sebuah WEB"tentu "BAJU" digunakan untuk memperindah penggunanya agar menarik perhatian orang yang melihatnya. Berikut Contoh Sintax/Kode CSS
example : .header {
width : 100px;
height : 100px;
background-color: #f00;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 10px;
margin-top : 10px;
}
#body {
font-size : 30px;
width : 100%;
height : auto;
padding : 10px 20px 30px;
}
B. ) Penjelasan SYNTAX
1. ) Nama Dari Sebuah Bagian
Oke kita pelan pelan dulu dalam penjabaranya, ini adalah tahap paling penting dalam mengartikan sebuah kode CSS. perhatikan kode diatas.
disitu ada ".header" dan "#body" mereka adalah nama dari salah satu bagian dari web, dalam css ada 2 kode yang digunakan untuk penamaan bagian bagian dari susunan halaman web ( Contoh : bagian atas 'header', bagian tengah 'isi', bagian bawah 'footer' ) yaitu tanda '.' dan '#' di awal sebuah syntax (kode) yang harus digunakan ketika membuat blok - blok / bagian - bagian dari halaman web.
Kode Awal Nama Kode . class # id
kedua nama awalan tersebut mempunyai fungsi yang sama. tapi biasanya cara pemanggilannya berbeda. Nanti saya jelaskan dibawah berkaitan dengan Penerapan CSS..
Bingung....??? gini, jika kamu akan membuat bagian baju harus dinamai terlebih dahulu bagian bagian nya misal = kerah baju, badan baju dll anggp saja ".header" & "#body" adalah nama sebuah bagian dari baju ex: .header = kerah baju , #body = badan baju. ketika kamu membuat nama bagian dari baju WAJIB hukumnya menggunakan "." / "#" diawal sebuah nama bagian tersebut. tentu saja kamu dapat merubah nama dari syntax CSS diatas.
misal: .header kamu ganti .nduwur & #body kamu ganti #badan .
2. ) Pembungkus Sebuah Element CSS
Perhatikan Kode yang saya cetak tebal
#body { font-size : 10px; width : 100%; height : auto; padding : 10px 20px 30px; }Disutu ada kurung kurawal yang saya cetak tebal " { " dan " } " YA !! kurung kurawal merupkan pembungkus Element Element Dari #body, "{" menandakan awal dari sebuah element dan "}" menandakan akhir dari element. Masih Bingung ??? Tanda Kurung "{}" merupakan pengaman dari #body cara gampangnya jika kamu akan menempelkan sesuatu entah itu emblem atau kerah atau yang lain, disini tanda kurung "{}" digunakan untuk menjahit emblem tersebut agar tidak lepas.
3. ) Element CSS
Perhatikan kode bercetak tebal berikut
#body { font-size : 30px; width : 100%; height : auto; padding : 10px 20px 30px; }mereka adalah element element yang bertanggung jawab dalam Pewarnaan, Ukuran, Penempatan dll DISINLAH KAMU MENDESIGN BAGIAN HALAMAN WEB SESUAI YANG KAMU SUKAI, Setiap Element Mempunyai attribut yang dibungkus oleh ":" (titik dua) dan ";" Contoh Atribut Diatas Adalah "30px", "100%", "auto", dan "10px 20px 30px" INGAT setiap atribut HARUS diapit oleh Titik Dua ":" dan Titik Koma ";" (titik koma) Berikut penjelasan mengenai element tersebut.
Element penjelasan font-size : 30px ; "font-size" digunakan untuk menentukan berapa ukuran teks di bagian #body disini saya menggunakan 30px widht : 100% ; "width" digunakan untuk menentukan berapa panjang #body disini saya menggunakan 100% yang berarti memenuhi seuruh layar dekstop height : auto ; "height" digunakan untuk menentukan berapa tinggi #body disini saya menggunakan auto yang berarti otomatis memanjang, jika konten yang ada didalamnya memiliki tinggi 100px maka #body otomatis akan menjadi 100px padding : 10px 20px 30px ; PERLU DINGINGAT "padding" adalah jarak dari konten yang ada didalam #body dengan border #body dan "margin" adalah jarak antara #body dengan blok-blok yang lain INGAT jangan terbalik. disini saya menggunakan 10px 20px 30px, 10px adalah jarak atas, 20px adalah jarak kiri dan kanan, 300 adalah jarak bawah. jika dirincikan syntax nya kurang lebih menjadi seperti ini :
padding-top : 10px;
paddding-left : 20px;
padding-right : 20px;
padding-bottom : 30px;
C. ) Penerapan CSS
1. ) Penempatan CSS
Setelah semua siap dibuat sekarang kita hanya perlu memasangnya. Ada 2 cara pemasangan CSS yaitu internal (dalam HTML itu sendiri) atau eksternal (membuat file .css) semua memiliki kekurangan dan kelebihan masing masing.
A. ) Cara penempatan internal (dalam html)
kamu hanya tinggal mengkopi semua css kamu dalam file html, dengan tag <style>, perhatikan kode HTML berikut
<html> <head> <title> css internal </title> <style> .header { width : 100px; height : 100px; background-color: #f00; margin-left : 10px; margin-right : 10px; margin-bottom : 10px; margin-top : 10px; } #body { font-size : 30px; widht : 100%; height : auto; padding : 10px 20px 30px; } </style> </head> </html>Dapat kita lihat diatas, CSS berada dalam kode HTML dengan syntax <style>"kode css"</style>
B. ) Cara penempatan eksternal (diluar html)
buat folder "style" tanpa petik simpan file CSS kamu dalam folder tersebut. selanjutnya edit file HTML kamu seperti ini..
<html> <head> <title>materi yang saya kuasai : CSS </title> <link rel="stylesheet" href="css/style.css" /> </head> <body>Bisa dilihat ada sebuah tag "link" yang bertipe "stylesheet" memanggil file css dengan nama style.css dalam folder css.
2. ) Pemanggilan CSS
Oke kita masuk tahap akhir, tadi kita sudah mengetahui "CLASS" dan "ID" yang ada di atas.
.header = class
#body = id
CLASS dan ID digunakan untuk pemanggilan css dalam syntax HTML
dalam pemanggilan CSS kita bisa mengunakan cara langsung dan tidak langsung,
CARA LANGSUNG
Cara ini hanya bisa digunakan untuk mendesain satu persatu tag yang ingin didesain.
<font id="body"> ini adalah teks </font>
<input id="body" type="text">
<li class="header"> menu </li>
Dari contoh diatas tag 'font' dikenai css id 'body', tag 'input' dikenai css id 'body', dan tag 'li' dikenai css class 'header'.
Mari kita lihat bagaimana kode css bekerja, berikut adalah css yang sudah kita buat :
.header { width : 100px; height : 100px; background-color: #f00; margin-left : 10px; margin-right : 10px; margin-bottom : 10px; margin-top : 10px; }
#body { font-size : 30px; widht : 100%; height : auto; padding : 10px 20px 30px; }
berikut adalah hasil dari css.
CARA TIDAK LANGSUNG
Cara ini biasanya digunakan untuk menyatukan tag-tag yang ada didalamnya mari kita lihat contohnya...
<div class="header">
.............<font> ini adalah teks </font>
............. <input type="text">
............. <li> menu </li>
</div>
Bisa kita lihat tag "font, input, li" berada diantara tag div yang memakai css class header ini berarti semua.
Berikut hasil dari penulisan kode diatas.
BINGUNG ????KESIMPULANNYA- Cara langsung, ibarat kamu menempelkan emblem, pin, dll (tag : font, input, li ) dibajumu tanpa ada perantara, langsung kamu tempelkan saja tanpa kamu gabungkan terlebih dahulu dalam hal ini emblem, pin, dll yang terkena css desainanmu
- Cara tidak, langsung ibarat kamu mau menempelkan emblem, pin, dll (tag : font, input, li ) dibajumu, tapi kamu tempelkan dulu emblem, pin, dll ke kain baru kamu tempelkan ke bajumu, nah, kain tersebut yang terkena css desainanmu
SATU LAGI....
Jika kamu masih bingung dengan tutor yang diatas, saya tambahkan tutorial yang singkat dan jelas.. - intinya kamu bisa langsung mengkode css kamu disebelah sini... Lihat syntax berikut
<body>
<font style="font-size : 30px; widht : 100%; height : auto; padding : 10px 20px 30px;" >
</body>
Maka otomatis tag font akan terkena css (style) dengan ketentuan font-size : 30px; widht : 100%; height : auto; padding : 10px 20px 30px .
Sekian tutorial dari saya jika ada tutur kata yang kurang berkenan saya mohon maaf sebesar besarnya karena ini adalah pemahaman saya sendiri, mungkin bisa dikoreksi lagi... saya Neil Zian Aulia
......PAMIT.......
0 komentar:
Posting Komentar