Baca Juga
Ada 3 cara penggunaan css yaitu inline css, embedded css, external css.
1. Inline CSS
Inline css merupakan cara penggunaan css dengan menambahkan langsung di tag dokumen htmlnya sebagai atribut.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-style:italic;">Membuat tulisan miring</p>
</body>
</html>
Priview
Penulisan CSS dengan cara inline ini di mulai dengan kata style lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam tag <style> ...</style>. Tag style tersebut disimpan di antara tag <head>...</head>
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar Css Mudah</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara </p><p>dan</p>akan memiliki format yang sama
</body>
</html>
Priview
3. External CSS
Cara ini menggunakan file Css yang dituliskan secara terpisah dengan dokumen html. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Ada dua langkah yang harus dikerjakan untuk menggunakan css dengan cara ini
1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan:
style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p{
font-family: arial;
font-size: small;
}
h1{
color: red;
}
2. Langkah kedua adalah memanggil file style.css dari semua halaman web.
Caranya dengan memasukkan kode di bawah ini yang disisipkan di antara tag <head> dan </head>
<!DOCTYPE html>
<html>
<head>
<title>External CSS File</title>
<link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
<h1>Belajar External CSS</h1>
<p>Sungguh Mudah Sekali belajar CSS File External</p>
</body>
</html>
Priview
Silahkan mencoba..
Bagian 16. Cara Menggunakan CSS
Reviewed by Akief Takaful
on
11:36 PM
Rating:
Reviewed by Akief Takaful
on
11:36 PM
Rating:
No comments: