Tutorial CSS Dasar Untuk Pemula
Pada tutorial ini kita akan belajar tentang CSS Dasar Untuk Pemula, dimana seorang programer juga pasti menggunakan CSS untuk merancang sebuah website yang sedang di bangun. Karena CSS memang tidak dapat ditinggalkan dalam merancang website, karena CSS berperan untuk meberikan sentuhan gaya dan keindahan pada sebuah website(desain website/tema). Sehingga website memiliki tata letak dan tampilan rapih dan indah serta disukai mesin telusur. Dalam Tutorial CSS Dasar Untuk Pemula ada tiga bagian penting dan perlu untuk di ketahui, yaitu selector, property, dan value.
Berikut ini adalah uraian dari bagian-bagian CSS tersebut:
Selector
CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan.
Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah ini memberikan contoh dari sebuah selector yang dapat digunakan untuk memberikan gaya atau desain tampilan terhadap seluruh elemen p yang ada pada dokumen HTML(baca tentang struktur HTML):
.p {
....
}
'p' dalam contoh diatas adalah kode untuk menunjukan 'paragraf', dalam CSS ini 'p' berperan sebagai 'selector'. Selector adalah seluruh kode yang berada sebelum karakter “{}”. Selector yang diberikan pada kode di atas memberikan fungsi gaya pada seluruh elemen 'p' yang ada dalam file atau dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: yaitu melalui klasifikasi, identitas, ataupun atribut lainnya dari sebuah elemen.
Property
Property berfungsi menentukan berbagai parameter desain yang dapat dirubah dari elemen yang dipilih oleh selector.
Silahkan perhatikan contoh Tutorial CSS Dasar Untuk Pemula berikut ini:
.p {
font-family: ...;
font-size: ...;
margin: ...;
}
Berdasarkan contoh kode css di atas, kode yang berada sebelum titik dua (:) adalah yang berperan sebagai property. Fungsi pada masing-masing property tersebut bisa di disimpulkan dari nama yang diberikan, yaitu font-family untuk memberikan jenis elemen teks, font-size untuk memberikan ukuran teks, dan margin untuk memberikan jarak/spasi elemen dari tepi halaman website atau blog.
Value
Value adalah nilai dari property yang ingin kita berikan. Dan nilai yang dapat diberikan itu sendiri berbeda-beda, tergantung dengan jenis property-nya.
Berikut contoh value dari properti yang ada pada kode sebelumnya:
.p {
font-family: normal;
font-size: 20px;
margin-left: 50px;
}
Hal yang harus diketahui, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.
Beberapa Nilai dari Property dapat di buat lebih singkat atau pendek dari yang sebenarnya, berikut adalah contohnya:
/* format default,semua property dan value disebutkan. */
.p {
padding-top : 10px;
padding-right : 20px;
padding-bottom : 10px;
padding-left : 20px;
}
/* Sintaks css diatas dapat di buat lebih Singkat menjadi seperti berikut */
.p {
padding: 10px 20px;
}
/* Dapat pula dibuat lebih singkat lagi menjadi seperti berikut */
.p {
padding: 10px;
}
Pada format default dalam kode di atas, nilai padding atas, kanan, bawah, dan kiri disebutkan atau dituliskan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat dibuat lebih singkat dengan menggunakan hanya property padding dan dua value, dimana secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left.
Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu di ketahui bahwa tidak semua property dapat tuliskan dengan menggunakan penulisan singkat. Hanya beberapa property yang dapat ditulis secara singkat misalnya: padding, margin, background, dan border.
Kalimat atau teks yang berada diantara '/*' dan '*/' disebut sebagai komentar pada sebuah file css. Kalimat apapun dapat di tambahkan dalam komentar tersebut, biasanya digunakan untuk memberikan identitas tentang kode css terkait. Untuk tanda atau supaya ingat jika sewaktu-waktu akan melakukan editing. Semua teks atau kalimat yang berada antara karakter '/*' dan '*/' disebut sebagai komentar dan akan diabaikan oleh web browser.
Pada struktur file HTML komentar di apit atau berada diantara karakter '<!-- ' dan ' -->',jadi perlu di ketahui juga bahwa pemberian komentar pada masing-masing file memiliki perbedaan.
Agar CSS dapat diaplikasikan pada HTML, maka CSS harus di referensikan terhadap file atau dokumen HTML tersebut. Untuk mereferensikan CSS ada tiga cara yag dapat di tentukan atau dipilih, yaitu:
Best Practice atau disebut juga referensi eksternal
Kita dapat memberikan referensi pada sebuah file CSS yang berada di luar HTML. Cara ini disebut sebagai best practice dalam pengembangan web dan paling disarankan. Karena ini adalah metode terbaik cara untuk mereferensikan css.
Dengan style css pada header
Metode pemberian atau penulisan CSS ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.
CSS langsung pada Element Style
Ini merupakan metode atau cara yang tidak disarankan dan buruk, karena penulisan seperti ini akan 'mengotori' kode HTML.
Agar lebih jelasnya, berikut ini adalah contoh cara melakukan referensi CSS pada sebuah dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Tutorial CSS dasar untuk Pemula</title>
<!-- Referensi pada Elemen header -->
<style type="text/css">
p {
font-size: 24px;
color: #000;
margin-left: 50px;
}
</style>
<!-- Best Practice Referensi -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- CSS langsung pada atribut style -->
<h1 style="font-family:normal;font-size:52px;color:#999;"> Belajar CSS Dasar </h1>
<!-- Konten dengan Best Practice Referensi -->
<h2> Cara merefrensikan CSS pada HTML </h2>
<h3>Ini tag h3 ukuran 40px dan berwarna merah </h3>
<p>Elemen h1 adalah header(headeng 1)<br/>Elemen h2 adalah heading 2. <br/>Elemen h3 heading 3.<br/>Elemen p adalah paragraf.</p>
</body>
</html>
Sekarang silahkan simpan file diatas dengan nama tutorial-css.html, lalu buat sebuah file dengan nama style.css dan tempel kode css dibawah ini ke dalam style.css tersebut:
.h2{
font-size: 46px;
color: #C71585;
}
.h3 {
font-size: 36px;
color: #0000FF;
}
Agar file css dapat bekerja pada tutorial-css.html simpan kedua file tersebut dalam satu folder, jika sudah anda simpan silahkan coba jalankan tutorial-css.html pada web browser anda.
Anda akan melihat hasilnya seperti pada gambar berikut:
Coba anda perhatikan dimana setiap CSS memberikan pengaruh pada elemen-elemen yang bersangkutan.
Karena Cara ini memungkinkan seorang perancang web hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain layout juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download saat mengakses web terkait.
Terimakasih telah berkunjung dan membaca tutorial ini,mudah-mudahan apa yang saya berikan melalui tutorial ini berguna bagi anda. Silahkan share artikel ini karena mungkin berguna bagi teman anda,dan memberikan kabar baik serta ilmu berguna bagi orang lain merupakan pahala buat anda.
Berikut ini adalah uraian dari bagian-bagian CSS tersebut:
Selector
CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan.
Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah ini memberikan contoh dari sebuah selector yang dapat digunakan untuk memberikan gaya atau desain tampilan terhadap seluruh elemen p yang ada pada dokumen HTML(baca tentang struktur HTML):
.p {
....
}
'p' dalam contoh diatas adalah kode untuk menunjukan 'paragraf', dalam CSS ini 'p' berperan sebagai 'selector'. Selector adalah seluruh kode yang berada sebelum karakter “{}”. Selector yang diberikan pada kode di atas memberikan fungsi gaya pada seluruh elemen 'p' yang ada dalam file atau dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: yaitu melalui klasifikasi, identitas, ataupun atribut lainnya dari sebuah elemen.
Property
Property berfungsi menentukan berbagai parameter desain yang dapat dirubah dari elemen yang dipilih oleh selector.
Silahkan perhatikan contoh Tutorial CSS Dasar Untuk Pemula berikut ini:
.p {
font-family: ...;
font-size: ...;
margin: ...;
}
Berdasarkan contoh kode css di atas, kode yang berada sebelum titik dua (:) adalah yang berperan sebagai property. Fungsi pada masing-masing property tersebut bisa di disimpulkan dari nama yang diberikan, yaitu font-family untuk memberikan jenis elemen teks, font-size untuk memberikan ukuran teks, dan margin untuk memberikan jarak/spasi elemen dari tepi halaman website atau blog.
Value
Value adalah nilai dari property yang ingin kita berikan. Dan nilai yang dapat diberikan itu sendiri berbeda-beda, tergantung dengan jenis property-nya.
Berikut contoh value dari properti yang ada pada kode sebelumnya:
.p {
font-family: normal;
font-size: 20px;
margin-left: 50px;
}
Hal yang harus diketahui, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.
Beberapa Nilai dari Property dapat di buat lebih singkat atau pendek dari yang sebenarnya, berikut adalah contohnya:
/* format default,semua property dan value disebutkan. */
.p {
padding-top : 10px;
padding-right : 20px;
padding-bottom : 10px;
padding-left : 20px;
}
/* Sintaks css diatas dapat di buat lebih Singkat menjadi seperti berikut */
.p {
padding: 10px 20px;
}
/* Dapat pula dibuat lebih singkat lagi menjadi seperti berikut */
.p {
padding: 10px;
}
Pada format default dalam kode di atas, nilai padding atas, kanan, bawah, dan kiri disebutkan atau dituliskan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat dibuat lebih singkat dengan menggunakan hanya property padding dan dua value, dimana secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left.
Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu di ketahui bahwa tidak semua property dapat tuliskan dengan menggunakan penulisan singkat. Hanya beberapa property yang dapat ditulis secara singkat misalnya: padding, margin, background, dan border.
Kalimat atau teks yang berada diantara '/*' dan '*/' disebut sebagai komentar pada sebuah file css. Kalimat apapun dapat di tambahkan dalam komentar tersebut, biasanya digunakan untuk memberikan identitas tentang kode css terkait. Untuk tanda atau supaya ingat jika sewaktu-waktu akan melakukan editing. Semua teks atau kalimat yang berada antara karakter '/*' dan '*/' disebut sebagai komentar dan akan diabaikan oleh web browser.
Pada struktur file HTML komentar di apit atau berada diantara karakter '<!-- ' dan ' -->',jadi perlu di ketahui juga bahwa pemberian komentar pada masing-masing file memiliki perbedaan.
Agar CSS dapat diaplikasikan pada HTML, maka CSS harus di referensikan terhadap file atau dokumen HTML tersebut. Untuk mereferensikan CSS ada tiga cara yag dapat di tentukan atau dipilih, yaitu:
Best Practice atau disebut juga referensi eksternal
Kita dapat memberikan referensi pada sebuah file CSS yang berada di luar HTML. Cara ini disebut sebagai best practice dalam pengembangan web dan paling disarankan. Karena ini adalah metode terbaik cara untuk mereferensikan css.
Dengan style css pada header
Metode pemberian atau penulisan CSS ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.
CSS langsung pada Element Style
Ini merupakan metode atau cara yang tidak disarankan dan buruk, karena penulisan seperti ini akan 'mengotori' kode HTML.
Agar lebih jelasnya, berikut ini adalah contoh cara melakukan referensi CSS pada sebuah dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Tutorial CSS dasar untuk Pemula</title>
<!-- Referensi pada Elemen header -->
<style type="text/css">
p {
font-size: 24px;
color: #000;
margin-left: 50px;
}
</style>
<!-- Best Practice Referensi -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- CSS langsung pada atribut style -->
<h1 style="font-family:normal;font-size:52px;color:#999;"> Belajar CSS Dasar </h1>
<!-- Konten dengan Best Practice Referensi -->
<h2> Cara merefrensikan CSS pada HTML </h2>
<h3>Ini tag h3 ukuran 40px dan berwarna merah </h3>
<p>Elemen h1 adalah header(headeng 1)<br/>Elemen h2 adalah heading 2. <br/>Elemen h3 heading 3.<br/>Elemen p adalah paragraf.</p>
</body>
</html>
Sekarang silahkan simpan file diatas dengan nama tutorial-css.html, lalu buat sebuah file dengan nama style.css dan tempel kode css dibawah ini ke dalam style.css tersebut:
.h2{
font-size: 46px;
color: #C71585;
}
.h3 {
font-size: 36px;
color: #0000FF;
}
Agar file css dapat bekerja pada tutorial-css.html simpan kedua file tersebut dalam satu folder, jika sudah anda simpan silahkan coba jalankan tutorial-css.html pada web browser anda.
Anda akan melihat hasilnya seperti pada gambar berikut:
Coba anda perhatikan dimana setiap CSS memberikan pengaruh pada elemen-elemen yang bersangkutan.
- Teks pada elemen h1 ditampilkan dengan warna abu-abu dan ukuran 50px karena CSS yang berada pada bagian atribut dokumen.
- Elemen h2 dan h3 masing-masing dengan warna dan ukuranya karena css yang di simpan dalam file style.css.
- Teks paragraf memiliki ukuran 24px dan memiliki jarak dengan tepi halaman karena CSS yang langsung ditambahkan pada tag bagian header.
Karena Cara ini memungkinkan seorang perancang web hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain layout juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download saat mengakses web terkait.
Terimakasih telah berkunjung dan membaca tutorial ini,mudah-mudahan apa yang saya berikan melalui tutorial ini berguna bagi anda. Silahkan share artikel ini karena mungkin berguna bagi teman anda,dan memberikan kabar baik serta ilmu berguna bagi orang lain merupakan pahala buat anda.
Komentar
Posting Komentar