Cara menggunakan CSS: inline style Embeded style/internal

Cara menggunakan CSS: inline style Embeded style/internal


Inline style adalah penerapan kode css pada satu elemen HTML didalam satu halaman HTML, dengan cara ini kita bisa langsung memberikan style dengan cara memasukkan kode css pada atribut tag HTML. Atribut yang digunakan untuk menyisipkan kode css adalah atribut style, sebagai contoh perhatikan contoh skrip HTML contoh dibawah:
Script HTML :
<!DOCTYPE html>

<html>
  <head>
    <title>rizaly</title>
  </head>
  <body>
    <p>Paragraf kesatu ingin berubah warna biru</p>
    <p>Paragraf kedua nih ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
  </body>
</html>



Skrip HTML diatas jika dijalankan akan menampilkan tulisan yang bewarna hitam, jika kita ingin merubah warna paragraf ke warna biru, maka kita bisa langsung memberikan atribut style dengan nilai color: blue;.
Contoh Script :

Kalian perlu ketahui, bahwa metode inline style tidak efisien jika kita sering merubah dan menggunakan kembali kode CSS yang telah kita buat. Dengan metode ini, kita hanya bisa menerapkan style hanya pada satu elemen, bayangkan jika kita harus memberi dan merubah satu-satu style semua paragraf yang terdapat dalam dokumen HTML.
EMBEDED STYLE/INTERNAL
Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu halaman HTML, maka embedded style bisa digunakan dalam beberapa elemen HTML. Meskipun bisa digunakan dalam beberapa elemen HTML, embedded style hanya bisa diterapkan hanya pada satu halaman HTML.
Metode ini menggunakan tag <style> didalam elemen head, kita membuat baris skrip CSS dalam tag <style>  dan skrip CSS itu akan langsung merubah semua elemen sesuai yang kita atur.
Sebagai contoh, kita akan merubah style tulisan semua elemen paragraf dengan warna biru, maka skrip HTML akan seperti ini.
Contoh HTML :


Script :
<!DOCTYPE html>
<html>
  <head>
    <title>rizaly</title>
    <style> p{color:blue;} </style>
  </head>
  <body>
    <p>Paragraf kesatu ingin berubah warna biru</p>
    <p>Paragraf kedua nih ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
  </body>
</html>


Dengan metode ini baik paragraf kesatu atau kedua akan langsung berubah menjadi berwarna biru, kembali lagi jika kita menggunakan metode inline style maka kita harus merubah satu-satu elemen
.

Penulis :
M. Rizal Yusuf

Tidak ada komentar :

Posting Komentar