Saat browser membaca style sheet, itu akan memformat dokumen HTML sesuai dengan informasi di style sheet
Tiga Cara Menyisipkan CSS
Ada tiga cara menyisipkan style sheet
- CSS eksternal
- CSS dalam
- CSS sebaris
CSS eksternal
Dengan lembar gaya eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file
Setiap halaman HTML harus menyertakan referensi ke file style sheet eksternal di dalam elemen, di dalam bagian kepala
Contoh
Gaya eksternal ditentukan di dalam elemen, di dalam bagian halaman HTML
Ini adalah sebuah paragraf
Lembar gaya eksternal dapat ditulis dalam editor teks apa pun, dan harus disimpan dengan a. ekstensi css
Eksternal. file css tidak boleh mengandung tag HTML apa pun
Inilah cara "mystyle. css" file terlihat
"gaya ku. css"
tubuh {
warna latar belakang. biru muda;
}
h1 {
warna. angkatan laut;
margin-kiri. 20px;
}
Catatan. Jangan menambahkan spasi antara nilai properti dan satuan
Salah (spasi). margin-left: 20 px;
Benar (tanpa spasi). margin-left: 20px;_
CSS dalam
Lembar gaya internal dapat digunakan jika satu halaman HTML tunggal memiliki gaya yang unik
Gaya internal didefinisikan di dalam
Ini adalah judul
Ini adalah sebuah paragraf
CSS sebaris
Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk satu elemen
Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke elemen yang relevan. Atribut gaya dapat berisi properti CSS apa pun
Contoh
Gaya sebaris ditentukan dalam atribut "gaya" dari elemen yang relevan
Ini adalah sebuah paragraf
Tip. Gaya sebaris kehilangan banyak keuntungan dari lembar gaya (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan hemat
Beberapa Lembar Gaya
Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama dalam style sheet yang berbeda, nilai dari style sheet yang terakhir dibaca akan digunakan.
Asumsikan bahwa style sheet eksternal memiliki gaya berikut untuk
elemenKemudian, asumsikan bahwa style sheet internal juga memiliki style berikut untuk
elemenContoh
Jika gaya internal ditentukan setelah tautan ke lembar gaya eksternal, maka
elemen akan menjadi "oranye"Cobalah sendiri "
Contoh
Namun, jika gaya internal ditentukan sebelum tautan ke lembar gaya eksternal, maka
elemen akan menjadi "angkatan laut".Cobalah sendiri "
Urutan Berjenjang
Gaya apa yang akan digunakan bila ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Semua gaya di halaman akan "mengalir" ke lembar gaya "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi
- Gaya sebaris (di dalam elemen HTML)
- Lembar gaya eksternal dan internal (di bagian kepala)
- Bawaan peramban
Jadi, gaya sebaris memiliki prioritas tertinggi, dan akan menggantikan gaya eksternal dan internal serta default browser
Cobalah sendiri "
Pernah mendengar tentang Ruang W3Schools?
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_ mendefinisikan 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
Mengapa gaya CSS saya tidak berfungsi?
Membuat ulang CSS. Ini dapat dengan mudah diperbaiki dengan masuk ke WP admin > Elementor > Tools > Regenerate CSS. Kemudian, Anda dapat menghapus cache (cache WP dan cache browser) dan menyegarkan halaman . Menghapus Cache Situs. Periksa apakah Anda memiliki plugin caching di situs Anda atau caching tingkat server apa pun diaktifkan. Bersihkan cache itu.Mengapa CSS saya tidak muncul di HTML saya?
Jika Anda menambahkan/memodifikasi CSS atau JavaScript sebaris dan tidak melihat perubahan tercermin dalam sumber HTML, laman kemungkinan sedang di-cache. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.Mengapa CSS saya tidak diterapkan Dreamweaver?
coba tautkan kembali stylesheet Anda - hapus seluruhMengapa CSS tidak berfungsi dalam kode VS?
Langkah-langkah untuk memecahkan masalah pemuatan CSS di VS Code. Periksa apakah kita telah menautkan file CSS yang benar dan menggunakan jalur yang benar . Periksa ekstensi file. Tinjau sintaks tautan dan file CSS dan pastikan itu valid. Gunakan DevTools browser (mis. Chrome) untuk menghapus cache dan memeriksa kesalahan.Mengapa CSS saya tidak berfungsi?
Kesalahan ini terjadi karena kompiler hanya dapat mengimpor file dari folder src . Di sini, file CSS disimpan di luar folder src, sehingga compiler gagal mengimpornya. Agar kode ini berfungsi, Anda hanya perlu menyimpan file CSS di dalam folder src.