Macam-Macam Penerapan CSS

Macam-Macam Penerapan CSS - Pada artikel kali ini, saya akan membahas sedikit materi CSS beberapa jenis penerapan atau penggunaan dari CSS itu sendiri.

Sebenarnya kalau saya lihat belum banyak orang yang paham betul dengan penerapan CSS, kebanyakan cuma copy-paste codenya saja dan mengikuti langkah-langkah yang dishare. Memang ada benarnya juga, tapi disini saya tidak membicarakan CSS untuk tampilan blog. Melainkan CSS untuk mengatur style dari teks pada artikel.

Disini kurang lebih ada 3 jenis cara penerapannya, dan tidak semua cara ini dapat digunakan di mywapblog. Berikut ulasannya:

Inline Style Sheet
CSS inline sendiri dari namanya sudah jelas bahwa penulisannya ditulis satu baris langsung dengan teks pada artikel dengan kode HTML. Contohnya:

< p style="color:#00F; font-style:italic;">Ini contoh teks yang disetting dengan css inline< /p>

Embedded Style Sheet
Embed berarti tertanam, yang maksudnya kode dari CSS tersebut satu berada satu dokumen dengan kode HTML kita yang kemudian dipanggil dengan atribute class ataupun ID. Untuk penulisan CSS-nya berada di dalam tag < style> < /style> yang juga masih dibagian tag < head >. Contohnya:

< html>
< head>
< title>Contoh Embeded CSS< /title>
< style> #huruf { text-align:center; color:red; }
< /style>
< /head>
< body>
< p id="huruf"> Ini contoh paragraf yang diatur dengan Embeded CSS pada dokumen HTML brother. Silahkan coba sendiri, dan jangan lupa hapus spasi pada setiap tag diatas supaya berhasil dicompile.< /p>
< /body>
< /html>

External Style Sheet

Oke yang terakhir ini disebut dengan External Style Sheet, pasti sudah tahukan arti kata External? Artiya itu "luar", sehingga dapat disimpulkan bahwasanya kita seperti menggunakan CSS import namun pada sebuah artikel, bukan untuk tampilan blog ya :D. Disini kita cukup membuat script css'nya lalu menguploadnya ke hosting atau membuat secara online di xtgem.

Selanjutnya kita panggil css external dengan menggunakan tag < link> yang posisinya sama dengan embeded, yakni di dalam tag head dari dokumen HTML. Contohnya lihat di bawah.

Script css:

.huruf { text-align:justify; font-syle:underline; color:red; }

Scrpit HTML Keseluruhan:

< html>
< head>
< title>Contoh External CSS< /title>
< link href="style.css" rel="stylesheet" type="text/css"/>
< /head>
< body>
< p class="huruf"> Ini contoh paragraf yang diatur dengan External CSS pada dokumen HTML brother. Silahkan coba sendiri, dan jangan lupa hapus spasi pada setiap tag diatas supaya berhasil dicompile.< /p>
< /body>
< /html>

Wah wah akhirnya selesai juga, oya dari beberapa metode di atas yang dapat kita pakai di mywapblog hanya yang pertama atau inline css saja. Saya tidak tahu kenapa karena saya coba yang lain tidak bisa bekerja, hmm masih menjadi misteri. Baiklah semoga bermanfaat dan mohon maaf apabila sulit dipahami nih. Selamat berpuasa and good luck :grin:

Tags: jenis jenis penerapan css, macam-macam penggunaan css, cara menggunakan css pada dokumen html.

Tweet