Temukan lebih lanjut tentang CSS
Mari kita jelajahi lebih banyak cara agar CSS dapat membuat pengelolaan konten Anda lebih mudah dan konten Anda lebih menarik bagi pembaca Anda.
Komentar
Seperti halnya bahasa komputer apa pun, CSS mendukung komentar. Untuk mengomentari di bagian CSS, Anda akan menggunakan /* comment */.
/* Mengidentifikasi awal komentar, dan */ menandai akhir. Komentar CSS dapat mencakup beberapa baris teks. Komentar adalah cara yang bagus untuk meninggalkan catatan bagi diri Anda sendiri atau pengembang lain atau untuk mencatat saat mempelajari bahasa tersebut.
Penting
Komentar CSS bersifat publik, dan dapat diakses oleh browser dan pengguna situs web Anda. Jangan menyimpan informasi sensitif dalam komentar.
Komentar CSS diformat secara berbeda dari komentar HTML. Komentar dalam HTML menggunakan sintaks.<!--comment-->
Mengatur font
Anda dapat menggunakan CSS untuk memberi tahu browser font apa yang ingin Anda gunakan untuk teks tertentu. Terkadang Anda ingin menggunakan Arial untuk keterbacaan atau sesuatu yang lebih mewah untuk gaya. Gambar berikut menunjukkan beberapa teks di Arial dan teks lainnya dalam font yang disebut "Dampak."
Opsi paling umum untuk mengatur font yang akan digunakan pada halaman adalah font-family.
font-family biasanya diatur ke daftar font, yang memungkinkan browser menggunakan font pertama yang dapat didukungnya. Misalnya, pengaturan Tahoma, Verdana, sans-serif upaya untuk menggunakan Tahoma, diikuti oleh Verdana, dan akhirnya font sans serif generik.
Anda juga dapat menggunakan opsi lain, seperti gaya, berat, dan dekorasi.
font-style digunakan untuk memiringkan teks dengan mengatur nilai ke italic.
font-weight mendukung pengaturan tebal yang berbeda, dengan bold menjadi yang paling umum. Dan akhirnya, text-decoration digunakan untuk underline, overline, atau line-through teks.
| CSS | Hasil |
|---|---|
font-weight: bold; |
Demo |
font-style: italic; |
Demo |
text-decoration: line-through; |
|
text-decoration dapat terasa berbeda dari opsi lain yang digunakan untuk memodifikasi tampilan font. Perbedaan utamanya adalah yang text-decoration digunakan untuk menerapkan gaya di sekitar atau pada teks tetapi tidak mengubah font aktual itu sendiri. Tebal dan miring memodifikasi font.
Catatan
Menggunakan garis bawah pada halaman web biasanya harus dihindari karena teks dapat tampak seperti hyperlink.
Ukuran font
memungkinkan font-size Anda untuk menunjukkan ukuran font yang ingin Anda gunakan. CSS menawarkan kemampuan untuk menggunakan ukuran absolut atau relatif. Ukuran absolut biasanya diatur dalam piksel dan selalu menggunakan ukuran yang ditentukan. Ukuran relatif dapat didasarkan pada ukuran default untuk browser dan diukur dalam persen atau berdasarkan ukuran elemen referensi.
Catatan
Ukuran font default untuk banyak browser adalah 16 piksel.
Ukuran absolut dapat diukur dalam piksel dan ditunjukkan dalam CSS dengan menggunakan px. Untuk mengatur font menjadi 14 piksel, Anda dapat menggunakan direktif font-size: 14px;.
Ukuran relatif untuk font biasanya diukur menggunakan em atau rem.
em adalah kependek dari elemen dan relatif terhadap induk (em) atau root (rem). Akarnya adalah html elemen .
1em atau 1rem sama dengan ukuran elemen induk atau akar, sementara 2em atau 2em akan dua kali lipat ukurannya. Karena ukuran layar dapat bervariasi, biasanya yang terbaik adalah menggunakan ukuran relatif jika memungkinkan.
Pertimbangkan HTML dan CSS berikut sebagai contoh:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Jika div elemen 1em adalah 14 piksel karena induk adalah div dan diatur ke 14px, sementara 1rem akan menjadi 18 piksel karena html akar diatur ke 18px.
1.5em
div untuk elemen adalah 21 piksel (14 * 1,5 = 21), dan 1.5rem akan menjadi 27 piksel (18 * 1,5 = 27). Anda dapat menggunakan em dan rem untuk memastikan sisa skala halaman saat Memperbarui ukuran induk atau akar.
Warna
Warna font dapat diatur dengan menggunakan color properti .
color dapat diatur ke nilai RGB (merah, hijau, biru) atau ke salah satu dari banyak warna bernama seperti black atau lightgray.
Nilai RGB dalam CSS dapat berupa nilai heksa yang diawali dengan #nilai , atau 0 hingga 255 di dalam rgb fungsi. Untuk mengatur warna ke bayangan default coklat, Anda akan menggunakan color: brown;. Untuk warna ungu kustom, Anda dapat menggunakan color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Penting
Pemilihan warna harus selalu mempertimbangkan mereka yang memiliki kekurangan penglihatan warna. Anda dapat menggunakan alat seperti Color Safe untuk membantu dalam pemilihan warna yang kontras untuk memastikan situs Anda dapat diakses oleh semua pengguna.
Seperti yang mungkin Anda duga, ada lusinan warna bernama yang tersedia, dan nilai RGB menawarkan serangkaian opsi tak terbatas. Editor seperti vscode.dev atau Visual Studio Code dapat membantu mengidentifikasi nilai warna yang tersedia. Kedua editor menampilkan pratinjau contoh warna di CSS Anda. Jika Anda mengarahkan mouse ke atas swatch, Anda disajikan dengan pemilih warna yang dapat Anda gunakan untuk mengatur warna yang Anda inginkan.
