Metode penerapan CSS Internal,External,Dan Inline – Mungkin Anda pernah mengunjungi sebuah website dengan tampilan yang menarik, dan sempat bertanya bagaimana cara membuat tampilan website yang menarik. Apabila Anda sudah menguasai bahkan sering menggunakan mungkin akan langsung mengetahui kalau untuk membuat tampilan tersebut dengan mengatur CSSnya. Namun bagi yang belum mengetahui mungkin akan bertanya-tanya.
Pada kesempatan kali ini Emalution akan membahas mengenai CSS, dan juga metode penerapan CSS. Berikut artikelnya,
Pengertian CSS
CSS singkatan dari Cascading Style Sheet merupakan salah satu bahasa yang berfungsi untuk menentukan atau mengatur bagaimana tampilan halaman yang ditulis menggunakan bahasa Markup.
Jika di ibaratkan sebagai tubuh manusia, CSS itu dapat disebut dengan kulit dan aksesoris tambahan seperti pakaian dan sebagainya.
Dalam penerapan CSS dibagi dalam 3 Metode yaitu,
- Inline Style
- External Style
- Internal Style
Berikut penjelasan mengenai ke-3 penerapan CSS,
Inline Style
Yang pertama metode \”Inline Style\” dalam metode ini kita bisa langsung memberikan style dalam Tag HTML contohnya
<p>Ini kata-kata pertama yang akan diubah warnanya</p> <p>Yang ini juga dong </p>
Kode diatas dalam format default dan belum ditambahkan style. Jika sudah ditambahkan style dedngan metode Inline akan menjadi seperti berikut,
<p style=\"color:blue;\">Ini kata-kata pertama yang akan diubah warnanya</p> <p style=\"color:blue;\">Yang ini juga dong </p>
External style
Selanjutnya adalah External Style, Metode merupakan penulisan dimana file css terpisah, dan file memiliki format .css.
Metode ini cocok digunakan jika memiliki banyak halaman, sehingga file .css cukup dipanggil 1 kali saja diawal file halaman.
Berikut contoh penerapannya,
<!DOCTYPE html> <html> <head> <title>Cara Menggunakan CSS</title> <link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\"> </head> <body> <p>ini kata-kata pertama yang akan diubah warnanya</p> <p>Yang ini juga dong</p> </body> </html>
Internal style
Lalu selanjutnya internal style, metode ini CSS diletakkan dalam satu halaman HTML ,contohnya seperti pada template Blogger kebanyakan. Berikut Contoh penerapannya,
<!DOCTYPE html>
<html>
<head>
<title>Cara Menggunakan CSS</title>
<style>
p{color:blue;}
</style>
</head>
<body>
<p>Paragraf kesatu nih, ingin berubah warna biru</p>
<p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
</body>
</html>
Pada metode penerapan Internal, Jadi Stylenya itu diletakkan pada tag <Style> pada halaman yang sama.
Demikian Cara Instalasi VestaCP di CentOS. Selamat mencoba, dan semoga bermanfaat. Jika ada pertanyaan mengenai post ini. Anda dapat menghubungi saya melalui Form Contact yang sudah di sediakan.