Metode untuk memanggil / menggunakan CSS itu sendiri.
Inline Styles
Inline styles ini maksudnya kalian memakai CSS langsung pada tag HTMLnya. Untuk memasukkan CSSnya kalian butuh atribut “style”. Biar gak pada bingung ini contohnya.
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<p style=”color:#000000″>Contoh</p>
</body>
</html>
Nah jadi outpunya akan menghasilnya tulisan “Contoh” dengan warna hitam, iya color:#000000 itu untuk mengubah tulisan jadi warna hitam.
Internal Styles
Internal styles yaitu memakai CSS masih di dalam file HTML namun tidak langsung pada tagnya seperti Inline Styles, melainkan kita buat beberapa baris kode CSS dan kemudian kita panggil. Contohnya simplenya seperti ini
<html>
<head>
<title>Belajar CSS</title>
<style> p{color:#000000″} </style>
</head>
<body>
<p>Contoh</p>
</body>
</html>
Kode itu sama menghasilkan tulisan “Contoh” dengan warna hitam. Hanya penulisannya saja berbeda dimana kode CSSnya dibedakan tempatnya dan di apit tag <style>
External Styles
External Style dimana kita membuat file yang berisi kode CSS dan file berisi kode HTML terpisah, jadinya ada 2 file. Contohnya seperti ini
Pertama buat file CSS, misalnya kita beri nama style.css
p{color:#000000″}
Dan yang kedua kita buat file HTML, dimana diberi nama latihan.html
<html>
<head>
<title>Belajar CSS</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
<body>
<p>Contoh</p>
</body>
</html>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”screen” /> itu digunakan untuk memanggil file CSS yang akan digunakan. Dan output yang dihasilkan sebenarnya sama juga dengan yang di atas yaitu tulisan “Contoh” dengan warna hitam.
Mungkin kalian akan mengambil kesimpulan mendingan pakai cara yang pertama lebih pendek dan simple sekali. Iya cara yang pertama yaitu Inline Style memang simple dan kode yang kita buat akan menjadi lebih pendek, namun akan lain halnya jika anda akan membuat banyak paragraf / tulisan dengan warna hitam, apakah setiap tag <p> anda akan menulis “style:color#000000″ tentu itu akan menjadi boros dan tidak sesuai dengan perkiraan semula.
Setelah kesimpulan diatas mungkin kalian akan berkesimpulan memakai cara kedua yaitu Internal Style karena gak usah repot – repot untuk membuat 2 file, karena toh juga 1 file saja sudah bisa untuk membuat semua paragraf menjadi berwarna hitam. Tidak juga sih, bagaimana jika ternyata anda membuat paragraf yang sama di file HTML lain. Biar lebih jelas, jadi ceritanya kalian buat 2 file HTML, dimana dikedua file tersebut kalian ingin membuat paragraf berwarna hitam. Ini tentu juga akan menjadi pemborosan karena di setiap file HTML anda akan membuat <style>.
Berarti cara ketiga yaitu External Style yang bagus dong ?. Tidak juga sebenarnya ketiga cara tersebut tidak ada yang bagus maupun jelek. Ini tergantung kebutuhan saja, kalau misalnya kalian membuat style untuk satu tag saja misalnya kalian hanya ingin membuat 1 paragraf di seluruh web anda dengan warna merah, tentu cara kedua (Internal Styles) dan cara ketiga (External Styles) akan menjadi kurang efektif. Begitu juga ketika anda hanya akan membuat paragraf di 1 file HTML dari seluruh website anda berwarna merah tentu cara kedua (Internal Styles) akan menjadi lebih efektif. Dan ketika anda akan membuat seluruh paragraf dalam website anda menjadi merah maka cara ketiga (Eksternal Styles) akan lebih baik digunakan.
No comments :
Post a Comment