Untuk bisa memahami dalam pembahasan kali ini alangkah baiknya membaca di postingan sebelumnya mengenai tutorial dan tata cara Format Penulisan Dasar-Dasar CSS, dengan begitu akan lebih mudah dalam memahami pembahasan ini. Akan tetapi jika sobat merasa sangup memahami alhamdulillah kalau begitu jadi bisa langsung kebawah untuk tutorialnya.
Embedded Style Sheet
Embedded Style Sheet adalah CSS yang disisipkan pada tag HTML. Embedded Style Sheet tersebut diletakkan sebelum tag <body> pada kode HTML. Penulisannya menggunakan tag <style> sebagai awal atau pembuka dan </style> sebagai penutup. CSS bisa berisi elemen-elemen atau atribut-atribut yang akan digunakan oleh tag HTML. Berikut contohnya.
<html>
<head>
<tilte> Embedded Style Sheet </title>
<style>
<!-- Atribut CSS -->
</style>
<body>
<!-- Tag HTML -->
</body>
</html>
Tutorial dan Cara membuat Embedded Style Sheet
Buat folder terlebih dahulu dengan nama bebas (terserah sobat). Namun, admin membuat folder dengan nama CSS (sobat juga dapat mengikuti penamaan folder seperti yang admin gunakan). Sebenarnya tanpa membuat folder terlebih dahulu juga bisa, namun di sini Admin menyuruh sobat untuk membuatkan folder agar semua file CSS yang akan kita buat selanjutnya bisa ditampung dalam satu folder untuk mempermudah kita dalam mempelajari.
Langkah Kedua
Buat file HTML dengan nama ESS.html kemudian letakkan dalam folder yang sobat buat tersebut. Kemudian ketikkan contoh penggunaan embedded style sheet tersebut.
<html>Lihat skrip, pada skrip embedded tersebut kita menciptakan selektor untuk body, h1, p dan a yang mana memiliki value masing-masing. Kemudian selektor tersebut kita gunakan dalam tag HTML { <body>, <h1>, <p> dan <a> }. Sekarang coba sobat klik dua kali (klik ganda) pada ESS.html dan hasilnya sama seperti screenshot bukan. Hehehe selamat sobat berhasil.
<head>
<tilte> Embedded Style Sheet </title>
<style>
body {
background: #0000;
}
h1 {
font-size: 18pt; color: #FF0000;
}
p {
color: green;
font-weight: bold;
text-decoration: underline;
}
a {
color: orange;
font-weight: bold;
text-decoration: underline;
}
</style>
<body>
<h1> Tutorial dan Cara Belajar Dasar-Dasar CSS yuk !!! </h1>
<p> Contoh Membuat Embedded Style Sheet Dasar CSS </p>
<a> Seputar Dunia Blogging </a>
</body>
</html>
Nah Kita akan mencoba untuk membuatkan contoh penggunaan Embedded Style Sheet yang lain. Kali ini kita akan menggunakan background dengan latar belakang bergambar. Siapkan gambar terlebih dahulu, kemudian letakkan ke dalam folder yang sobat buat tadi. Di sini admin akan memberikan tutorialnya supaya background websitenya memiliki gambar. Siapkan gambar yang akan dibuat background kemudian Buat file HTML yang lain dan simpan dengan nama ESS1.html ke dalam folder. Selanjutnya ketikkan skrip berikut.
<html>background-image: url( 'selamat.jpg' ); merupakan skrip CSS untuk mengubah latar belakang halaman menjadi sebuah gambar. Dari penulisan skrip di atas, kita klik ganda (double click) pada file ESS1.html di folder tersebut dan lihat hasilnya.
<head>
<tilte> Embedded Style Sheet </title>
<style>
body {
background-image: url('selamat.jpg');
}
h1 {
font-size:18pt; color: green;
}
p {
color: blue;
font-weight: bold;
text-decoration: underline;
}
a {
color: orange;
font-weight: bold;
text-decoration: underline; }
</style>
<body>
<h1> Tutorial dan Cara Belajar Dasar-Dasar CSS yuk !!! </h1>
<p> Contoh Membuat Embedded Style Sheet Dasar CSS </p>
<a> Seputar Dunia Blogging </a>
</body>
</html>
Kiranya dari pembahasan singkat mengenai Embedded Style Sheet di atas dapat memberikan pemahaman bagi kita. dan admin ucapkan selamat berkarya. Jangan lupa untuk terus belajar, belajar dan belajar.
Salam Blogging.