Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Mengenal Internal dan Inline Style Sheet

Mengenal Internal dan Inline Style Sheet - Kali ini masih tentang Style Sheet. Sebelumnya sudah dibahas tentang External Style Sheet, sekarang akan melanjutkan kembali tentang cara lain untuk memasukkan Style Sheet pada halaman HTML, yaitu ada Internal Style Sheet dan Inline Style Sheet.

Internal Style Sheet


Internal Style Sheet dapat digunakan jika pada satu halaman tunggal memiliki style yang unik. Internal Style Sheet didefinisikan dalam elemen <style>, dan ditempatkan dalam head pada halaman HTML. Format penulisan codingnya akan terlihat seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}
h3 {
    color: yellow;
    margin-left: 40px;
} 
</style>
</head>
<body>

<h3>Ini tulisan Artikel hasil pengaruh dari internal style sheet</h3>

</body>
</html>

hasilnya :

Ini adalah contoh heading tiga hasil pengaruh dari internal style sheet


Inline Style Sheet


Inline Style Sheet digunakan untuk memberikan style pada elemen tunggal HTML. Caranya yaitu dengan menambahkan attribute style pada tag HTML yang akan diberikan style CSS. Pada attribute style tersebut bisa ditambahkan property yang relevan dengan tag HTML tersebut.

Misal Inline Style Sheet di bawah ini, saya akan membuat tulisan H1 berwarna biru dengan jarak margin dari kiri sebesar 30px :


<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

hasilnya :

This is a heading.


Itulah sedikit penjelasan tentang Internal Style Sheet dan Inline Style Sheet yang semoga bisa dipahami konco sinahu semua. Yang terpenting adalah pastikan bahwa nama tag HTML yang akan diberi style sheet sama dengan nama selector pada style CSS nya. Selamat bereksperimen untuk coding.



0 Komentar untuk "Mengenal Internal dan Inline Style Sheet"

Back To Top