Dengan CSS, Anda dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen diposisikan dan ditata, gambar latar atau warna latar apa yang akan digunakan, tampilan yang berbeda untuk perangkat dan ukuran layar yang berbeda, dan
Tip. Kata kaskade berarti bahwa gaya yang diterapkan pada elemen induk juga akan diterapkan pada semua elemen anak di dalam induk. Jadi, jika Anda menyetel warna badan teks ke "biru", semua judul, paragraf, dan elemen teks lainnya di dalam badan juga akan mendapatkan warna yang sama (kecuali jika Anda menentukan yang lain)
Menggunakan CSS
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara
- Sebaris - dengan menggunakan atribut style di dalam elemen HTML
- Internal - dengan menggunakan properti
This is a headingThis is a paragraph.
Try it Yourself »External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the section of each HTML page:
Example
This is a heading
This is a paragraph.
Try it Yourself »The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color_ menentukan warna teks yang akan digunakan
Properti CSS font-family_ mendefinisikan font yang akan digunakan
Properti CSS font-size_ menentukan ukuran teks yang akan digunakan
Contoh
Penggunaan properti CSS color, font-family dan font-size
Ini adalah judulIni adalah sebuah paragraf
Cobalah sendiri "Perbatasan CSS
Properti CSS border_ menentukan batas di sekitar elemen HTML
Tip. Anda dapat menentukan batas untuk hampir semua elemen HTML
Contoh
Penggunaan properti perbatasan CSS.
p {
Cobalah sendiri "
berbatasan. 2px bubuk biru padat;
}Pengisi CSS
Properti CSS padding_ mendefinisikan padding (spasi) antara teks dan border
Contoh
Penggunaan properti border dan padding CSS
p {
Cobalah sendiri "
berbatasan. 2px bubuk biru padat;
lapisan. 30px;
}Margin CSS
Properti CSS margin_ mendefinisikan margin (spasi) di luar perbatasan
Contoh
Penggunaan CSS border dan properti margin
p {
Cobalah sendiri "
berbatasan. 2px bubuk biru padat;
batas. 50px;
}Tautan ke CSS Eksternal
Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini
Selesaikan tutorial interaktif ini untuk mempelajari dasar-dasar melihat dan mengubah CSS halaman menggunakan Chrome DevTools
Lihat CSS elemen
Klik kanan teks Inspect me! di bawah ini dan pilih Periksa. Panel Elemen DevTools terbuka
Periksa saya
Amati elemen Inspect me!_ yang disorot dengan warna biru pada Pohon DOM
Di Pohon DOM, temukan nilai atribut data-message untuk elemen Inspect me!
Masukkan nilai atribut di kotak teks di bawah ini
Di panel Elemen > Gaya, temukan aturan kelas aloha
Panel Gaya mencantumkan aturan CSS yang diterapkan ke elemen apa pun yang saat ini dipilih di DOM Tree, yang seharusnya tetap menjadi elemen Inspect me!
Kelas aloha_ mendeklarasikan nilai untuk padding. Masukkan nilai ini dan satuannya tanpa spasi di kotak teks di bawah
Jika Anda ingin memasang jendela DevTools di sebelah kanan area pandang, seperti pada tangkapan layar di langkah pertama, lihat
Tambahkan deklarasi CSS ke elemen
Gunakan panel Styles saat Anda ingin mengubah atau menambahkan deklarasi CSS ke sebuah elemen
Klik kanan teks Add a background color to me!_ di bawah ini dan pilih Periksa
Tambahkan warna latar belakang ke saya
Klik element.style_ di dekat bagian atas panel Gaya
Ketik Inspect me!_0 dan tekan Enter
Ketik Inspect me!_1 dan tekan Enter. Di pohon DOM, Anda dapat melihat bahwa deklarasi gaya sebaris diterapkan ke elemen
Tambahkan kelas CSS ke elemen
Gunakan panel Gaya untuk melihat tampilan elemen saat kelas CSS diterapkan atau dihapus dari elemen
Klik kanan elemen Inspect me!2 di bawah dan pilih Inspeksi
Tambahkan kelas ke saya
Klik. cls. DevTools menampilkan kotak teks tempat Anda dapat menambahkan kelas ke elemen yang dipilih
Ketik Inspect me!_3 di kotak teks Tambahkan kelas baru, lalu tekan Enter. Kotak centang muncul di bawah kotak teks Tambahkan kelas baru, tempat Anda dapat mengaktifkan dan menonaktifkan kelas. Jika elemen Inspect me!_2 memiliki kelas lain yang diterapkan padanya, Anda juga dapat mengaktifkannya dari sini
Tambahkan pseudostate ke kelas
Gunakan panel Gaya untuk secara permanen menerapkan pseudostat CSS ke suatu elemen. DevTools mendukung Inspect me!5, Inspect me!6, Inspect me!7, Inspect me!8, dan lainnya
Arahkan kursor ke teks Inspect me!_9 di bawah ini. Warna latar berubah
Arahkan kursor ke saya
Klik kanan teks Inspect me!9 dan pilih Inspeksi
Di panel Gaya, klik. hov
Periksalah. arahkan kotak centang. Warna latar belakang berubah seperti sebelumnya, meskipun Anda tidak benar-benar mengarahkan kursor ke elemen tersebut
Mengubah dimensi elemen
Gunakan diagram interaktif Model Kotak di panel Gaya untuk mengubah lebar, tinggi, pengisi, margin, atau panjang batas elemen
Klik kanan elemen data-message1 di bawah dan pilih Inspeksi
Ubah margin saya
Untuk melihat Model Kotak, klik tombol
Tampilkan bilah sisi di bilah tindakan pada panel Gaya.Dalam diagram Model Kotak di panel Gaya, arahkan kursor ke padding. Padding elemen disorot di viewport.
Klik dua kali margin kiri di Model Kotak. Elemen saat ini tidak memiliki margin, sehingga data-message2 memiliki nilai data-message3
Ketik data-message_4 dan tekan Enter.
Model Kotak secara default menggunakan piksel, tetapi juga menerima nilai lain, seperti data-message5, atau data-message6
Bagaimana cara mengedit CSS?
Setelah Anda membuat atau membuka file CSS yang ada, lakukan pengeditan di editor kode. .Di konsol kesalahan di sepanjang bagian bawah editor kodeDi selokan kesalahan di sepanjang sisi kiri editor kodeDi bilah gulir di sisi kanan editorBagaimana cara mengedit CSS di Chrome?
Tekan Ctrl + Shift + i untuk Windows/Linux (atau command + option + i untuk Mac). Klik kanan pada elemen di halaman situs web Anda dan pilih Periksa . Sekarang setelah Anda terbiasa mengakses Alat Pengembang Google Chrome, Anda akan dapat memeriksa elemen CSS untuk mengubahnya secara langsung.Di mana saya bisa menulis kode CSS saya?
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara. .Sebaris - dengan menggunakan atribut gaya di dalam elemen HTMLInternal - by using a element in the section..External - by using a element to link to an external CSS file..Bagaimana cara menambahkan CSS di Chrome?
Baru di Chrome. Ikhtisar CSS .Buka DevTools ( Command + Option + I di Mac; Control + Shift + I di Windows)Buka Pengaturan DevTool ( ? atau Function + F1 di Mac; ? atau F1 di Windows)Klik buka bagian EksperimenAktifkan opsi Ikhtisar CSS