HTML Style (CSS) Tag Beserta Fungsinya
Bismillahirahmanirahim
Assalamualaikum Warahmatullahi Wabarakatuh
CSS Margin, CSS Margin ini berfungsi untuk mengubah posisi kita, lebih jelasnya kita bisa lihat di bawah ini
Assalamualaikum Warahmatullahi Wabarakatuh
Untuk kali ini saya akan membagikan artikel dari pengalaman
belajar saya mengenai HTML Style Tag Beserta Fungsinya. Kita bisa sebut ini adalah CSS atau singkatan
dari Cascanding Style Sheets, CSS ini berfungsi untuk mendesign tampilan dari
HTML bisa merubah ukuran, mewarnai, atau yang lainnya. Untuk lebih lanjut kita
lihat contohnya di bawah ini beserta fungsinya
Inline CSS kita bisa lihat contohnya di bawah ini
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;”>Ini Merupakan Contoh</h1>
</body>
</html>
Internal CSS, untuk internal CSS ini kita defisinikan tag
CSSnya di bagian head, kita bisa lihat contohnya di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:powderblue;}
h1 {color:blue;}
p{ color:red;}
</style>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
</body>
</html>
External CSS, untuk External CSS ini kita harus bkin file
lagi dengan format CSS, yang menjadi penghubung antara format HTML dan CSS
adalah link dari si CSSnya, kita bisa lihat contohnya di bawah ini
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
</body>
</html>
<style rel=”stylesheet” href=”styles.css”> adalah penghubung
antara file format HTML dan CSS, untuk file cssnya isinya kurang lebih seperti
di bawah ini
Body{
Background-color:powderblue;
}
h1{
color:blue;
}
p{
color:red;
}
}
h1{
color:blue;
}
p{
color:red;
}
CSS Fonts, CSS fonts ini berfungsi untuk mewarnai font,
kemudian untuk mengubah tipe font, dan untuk mengubah ukuran font, kita bisa
lihat contohnya di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:blue;
font-family:verdana;
font-size:300%;
}
p{
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
</body>
</html>
CSS Border, CSS Border ini berfungsi untuk memberikan garis
kotak di sebuah kata, kita bisa lihat contohnya di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:1px solid powderblue;
}
</style>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
<p>Ini adalah contoh</p>
</body>
</html>
CSS Padding, CSS Padding ini berfungsi untuk memberikan
jarak kotak dari font atau yang lainnya, kita bisa lihat contohnya
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:1px solid powderblue;
padding:30px;
}
</style>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
<p>Ini adalah contoh</p>
</body>
</html>
CSS Margin, CSS Margin ini berfungsi untuk mengubah posisi kita, lebih jelasnya kita bisa lihat di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:1px solid powderblue;
margin:50px;
}
</style>
</head>
<body>
<h1>Ini adalah Contoh</h1>
<p>Ini adalah contoh</p>
<p>Ini adalah contoh</p>
</body>
</html>
Mungkin kita yang bisa saya sampaikan, mohon maaf apabila
ada kesalahan dalam penyampaian kalimat, semoga bermanfaat bagi kita semua
aamiin ya Allah
Wasalamualaikum Warahmatullahi Wabarakatuh
Sumber Referensi : w3school.com
Sumber Referensi : w3school.com
0 Response to "HTML Style (CSS) Tag Beserta Fungsinya"
Post a Comment