Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial kali ini kita akan membahas cara menginput kode CSS ke halaman HTML. HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya.CSS digunakan untuk mendesain tag-tag HTML ini. Berikut ini adalah peraturan dalam penggunaan Syntax CSS :
Berikut ini adalah penjelasannya :
- Selector adalah untuk ke elemen HTML yang ingin di beri style CSS.
- Block Deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
- Setiap deklarasi termasuk nama properti dan nilai, yang dipisahkan oleh titik dua.
Ada 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Metode Inline Style
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style. Berikut ini adalah contoh scriptnya :
Untuk mencobanya silahkan klik tombol di bawah ini : <!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:red; font-size:12px">
ini paragraph yang diberi format warna teks merah dan ukuran huruf dua belas pixel.
</p>
</body>
</html>Metode Internal Style Sheets
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Ada 3 Type selector CSS, contoh penggunaannya adalah di bawah ini :
Tag Selector
Tag HTML diletakkan di dalam tag <head> Letakkan di sini style css-nya</head> Class Selector
Cara menggunakan selector ini adalah dengan menggunakan tanda dot/titik (.). Class selector digunakan ketika style ingin digunakan secara banyak.
Untuk mencobanya silahkan klik tombol di bawah ini :
Untuk mencobanya silahkan klik tombol di bawah ini :
Sekian untuk tutornya hari ini. Termi kasih
<!DOCTYPE html>
<html>
<head>
<style>
.contoh {
color: red;
font-size:12 px;
}
</style>
</head>
<body>
<p class="contoh">
ini paragraf tidak langsung diberi format warna teks merah dan ukuran hurufnya adalah 12 pixel.
Tapi harus di panggil class tersebut di dalam tag htmlnya
</p>
</body>
</html>
Untuk mencobanya silahkan klik tombol di bawah ini :
Id Selector
Cara menggunakan selector ini adalah dengan menggunakan tanda #. Id selector adalah kebalikan dari class selector, hanya bisa digunakan di satu tempat saja.
<!DOCTYPE html>
<html>
<head>
<style>
#contoh {
color: red;
font-size:12 px;
}
</style>
</head>
<body>
<p id="contoh">
Ini paragraph tidak langsung diberi format warna teks merah dan ukuran hurufnya adalah 12 pixel.
Tapi harus dipanggil id tersebut di dalam tag html-nya. Bedanya dengan class, id hanya bisa digunakan sekali.
Sedangkan class bisa digunakan lebih dari 1 kali.
</p>
</body>
</html>Untuk mencobanya silahkan klik tombol di bawah ini :
Metode External Style
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut. Cara memanggilnya adalah sebagai berikut :
<link href="style.css" type=text/css" rel=""stylesheet" />
Sekian untuk tutornya hari ini. Termi kasih
0 comments:
Post a Comment