Hai sobat kali ini saya akan membahas tentang tutorial CSS, yaitu salah satu bahasa markup yang harus dikuasai oleh seorang web desainer pemula selain ia juga harus menguasai HTML. Tutorial ini memang saya tunjukkan secara khusus bagi anda para pemula yang ingin belajar serius tentang pemrograman Web. Memang untuk menjadi seorang web desainer anda di tuntut tidak hanya menguasai satu bahasa pemrograman saja, akan tetapi minimal anda bisa menguasai HTML, CSS, PHP, Java Sript dan SQL. Berhubung ini adalah tutorial dasar untuk para pemula, maka saya memulainya dari CSS terlebih dahulu, walaupun sebenarnya HTML wajib pertama kali yang harus diketahui oleh seorang pemula. Namun kita bisa belajar secara berbarengan antara CSS dan HTML, dan di lain kesempatan saya juga akan membahas tentang HTML secara lengkap.
Apa itu CSS?
Pertanyaan tersebut mungkin menjadi dasar bagi orang yang belum pernah mendengar atau mengerti CSS. CSS merupakan singkatan dari Cascading Style Sheets yang mana CSS ini sebagai penjelasan dari elemen-elemen HTML bagaimana elemen-elemen tersebut ditampilkan dalam layar dan dalam media lain. Dengan CSS tampilan sebuah Web akan terlihat cantik dan rapi serta profesional tidak kaku. Saat ini versi terakhir dari CSS adalah CSS3 yang mana fungsinya semakin banyak. Dengan CSS inilah kita bisa mendesain sebuah layout atau tampilan web sesuai dengan keinginan kita, bahkan agar web tetap terlihat profesional layoutnya ketika ditampilkan pada media yang berbeda seperti komputer, tablet, atau smartphnoe. Lewat CSS inilah semua desain layout dari sebuah web tersebut diatur.
Aturan Dasar Penulisan CSS
Dalam mendeklarasikan sebuah atau beberapa elemen HTML dalam CSS biasanya terdiri dari selector, property, dan value dan ini merupakan inti dari CSS. untuk lebih mudah dipahami anda bisa lihat dan perhatikan kode CSS dibawah ini.
Kode h1 dari contoh kode diatas adalah selector, dimana selector ini digunakan untuk mencari semua tag h1 dalam HTML yang ingin di style atau dirubah tampilannya. Sedangkan baris kode yang berada diantara kurung kurawal disebut declaration. Untuk lebih jelasnya anda bisa lihat pada gambar di bawah ini.
Selanjutnya kode font-size dalam CSS disebut dengan property, dimana propertylah yang nantinya akan merubah elemen HTML. Setiap property memiliki value (nilai), pada contoh di atas kode 18px dan green merupakan value dari property font-size dan color. Keempat elemen inilah yang membangun CSS, dan banyak sekali property dalam CSS itu, insyaallah saya akan membahasnya secara lengkap.
Cara Penulisan Selector, Property dan Value
Diatas saya sudah membahas ketiga elemen ini serta kegunaannya, sekarang saya akan membahas tentang bagaimana caranya untuk menuliskan ketiga elemen tersebut dalam CSS.
- Sebuah style dalam CSS diawali dengan penulisan selector yaitu bagaian apa yang ingin diubah tampilannya dari HTML.
- Setelah penulisan selector di ikuti tanda kurung kurawal buka dan tutup yang disebut dengan declaration.
- Penulisan property dengan value dipisah dengan tanda titik dua (:).
- Penulisan antara property satu dengan yang lainnya dipisahkan dengan tanda titik koma (;) dan khusus untuk penulisan property terakhir boleh tanpa titik koma, namun disarankan tetap memakainya.
Cara menginputkan kode CSS dengan inline, internal dan external
Agar kode CSS bisa berjalan dengan baik, maka harus ditambahkan pada file HTML dan terdapat tiga cara menginputkannya yaitu melalui inline style CSS, internal style CSS, dan external style CSS.
Inline Style CSS
Yang dimaksud dengan inline style CSS adalah menginputkan kode css langsung ke dalam tag html dengan bantuan tambahan atribut style. Berikut contohnya jika kita ingin merubah warna paragraf menjadi hijau.
<p style="color: green"> Mohon jangan diganggu, lagi serius belajar CSS. </p>
Internal Style CSS
Cara kedua untuk menginputkan kode CSS kedalam HTML adalah dengan cara seluruh kode CSS ditulis dalam tag <style> pada bagian <head> kode HTML, berikut contoh pengunaannya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
<p>
Mohon jangan diganggu, lagi serius belajar CSS.
</p>
</body>
</html>
External Style CSS
Cara terakhir untuk menginputkan kode CSS ke dalam HTML adalah dengan membuat file CSS tersendiri yaitu terpisah dari file HTML kemudian dihubungkan atau dipanggil dalam file HTML melalui tag <link> yang biasanya terdapat didalam tag <head> pada HTML. Untuk lebih jelasnya kita langsung praktek saja, anda buat sebuah file css dengan dan simpan dengan nama style.css dan letakkan di folder yang sama dengan file HTML yang nanti akan kita buat. Adapun isi kode CSSnya adalah sebagai berikut :
h1 {
color: red;
}
p {
font-size: 18px;
color: silver;
}
Kemudian buat file HTML dengan nama external_css.html, isi kodenya adalah sebagai berikut :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar CSS</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>Belajar CSS</h1> <p> Mohon jangan diganggu, lagi serius belajar CSS. </p> </body> </html>
Perhatikan pada bagian tag <link> disana ditambahkan atribut rel yang merupakan kepanjangan dari relationship dan biasanya untuk CSS kita menggunakan stylesheet. Selain itu juga tag<link> tidak membutuhkan tag penutup, sehingga ini disebut juga istilah self closing tag, yaitu tag yang menutup sendiri. Demikian tutorial singkat pengantar CSS, pada tutorial selanjutnya saya akan membahas tentang Property Colors.
No deposit bonus codes, casino, free slots no deposit
BalasHapusNo deposit casino 군산 출장안마 bonuses are 출장안마 usually for new players who 고양 출장샵 have already made a 서귀포 출장마사지 deposit using 춘천 출장샵 a deposit bonus code. For new players, welcome bonus offers