Cascading StyleSheet !!!
CSS adalah bahasa stylesheet yang menggambarkan presentasi dari HTML (atau XML) dokumen.
CSS menjelaskan bagaimana elemen harus diberikan pada layar, di atas kertas, atau di media lain.
Tutorial ini akan mengajarkan Anda CSS dari dasar hingga lanjutan.
Contoh :
CSS Tutorial ini berisi ratusan contoh CSS.
Dengan editor online kami, Anda dapat mengedit CSS, dan klik pada tombol untuk melihat hasilnya.
Tiga Cara Sisipkan CSS
Ada tiga cara untuk memasukkan style sheet:
- Style sheet eksternal
- Internal style sheet
- Gaya inline
Style Sheet eksternal
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!
Setiap halaman harus menyertakan referensi ke eksternal style sheet file di dalam <link> elemen. <Link> elemen masuk dalam <head>:
Style Sheet internal
Style sheet internal dapat digunakan jika satu halaman tunggal memiliki gaya yang unik.
Gaya internal didefinisikan dalam <style> elemen, dalam <head> dari sebuah halaman HTML:
Inline Styles
Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.
Untuk menggunakan gaya inline, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.
Contoh di bawah menunjukkan bagaimana untuk mengubah warna dan margin kiri dari <h1> elemen:
CSS Backgrounds
Latar belakang properti CSS digunakan untuk menentukan efek latar belakang untuk elemen.
Latar belakang properti CSS:
- warna latar belakang
- gambar latar belakang
- background-repeat
- background-attachment
- background-position
Warna latar belakang
Thebackground-colorproperti menentukan warna latar belakang dari elemen.Warna latar belakang halaman diatur seperti ini:Contoh
Dengan CSS, warna yang paling sering ditentukan oleh:
- nilai HEX - seperti "# ff0000"
- nilai RGB - seperti "rgb (255,0,0)"
- nama warna yang valid - seperti "merah"
Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.
Pada contoh di bawah ini, <h1>, <p>, dan <div> elemen memiliki warna latar belakang yang berbeda:
SELAMAT MENCOBA !!!
0 komentar:
Posting Komentar