HTML Css
sumber: W3 Schools
CSS atau Cascading Style Sheets
- CSS digunakan untuk memberikan berbagai macam style pada elemen HTML.
- CSS bisa dideklarasikan dengan tiga cara :
- Inline : Di deklarasikan ke dalam attribut elemen HTML.
- Internal : Di deklarasikan menggunakan elemen <style> di dalam elemen <head>.
- External : Di deklarasikan pada sebuah file terpisah.
Contoh CSS
Pada paragraf ini terdapat inline CSS.
Pada paragraf menggunakan font family 'cursive'.
Pada paragraf menggunakan font family 'monospace'.
Pada paragraf menggunakan font family 'sans-serif'.
Pada paragraf ini terdapat inline CSS.
Pada paragraf menggunakan font family 'cursive'.
Pada paragraf menggunakan font family 'monospace'.
Pada paragraf menggunakan font family 'sans-serif'.
Codingku HTML Editori
<p style="color:#FF33FF; text-decoration:underline; font-size:13px;">
Pada paragraf ini terdapat inline CSS.
</p>
<p style="font-size:16px; font-family:cursive">
Pada paragraf menggunakan font family 'cursive'.
</p>
<p style="font-size:19px; font-family:monospace">
Pada paragraf menggunakan font family 'monospace'.
</p>
<p style="font-size:19px; color:#FF3333; font-family:sans-serif">
Pada paragraf menggunakan font family 'sans-serif'.
</p>Mengenai CSS
Cara terbaik dari desain sebuah CSS adalah dengan menempatkan CSS pada file yang terpisah atau disebut dengan eksternal CSS.
Internal CSS
- Internal CSS di deklarasikan di bagian elemen <head> pada suatu dokumen HTML.
- Internal CSS akan mempengaruhi semua elemen dibawahnya yang sesuai dengan yang di deklarasikannya.
misal :
<style>
p{color:green}
</style>
</head>
Pada contoh di atas,p{color:green} akan mempengaruhi semua elemen <p>... </p> di dalam dokumen tersebut.
Contoh internal CSS :
Codingku HTML Editori
<html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
Coba sendiri »
Codingku HTML Editori
<html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
0 komentar:
Posting Komentar