Gaya dan tata letak visual situs web ditentukan oleh CSS atau Cascading Style Sheets. Ini adalah dokumen yang membentuk markup HTML laman web, yang memberikan petunjuk kepada web browser tentang cara menampilkan laman yang dihasilkan dari markup itu. CSS menangani tata letak halaman, serta warna, gambar latar belakang, tipografi , dan banyak lagi.
Jika Anda melihat file CSS, Anda akan melihat bahwa seperti markup atau bahasa pengkodean, file-file ini memiliki sintaks khusus untuk mereka. Setiap lembar gaya terdiri dari sejumlah aturan CSS. Aturan-aturan ini, ketika diambil secara penuh, adalah apa gaya situs tersebut.
Bagian-bagian dari Aturan CSS
Aturan CSS terdiri dari dua bagian berbeda - pemilih dan deklarasi. Pemilih menentukan apa yang ditata pada halaman dan deklarasinya adalah bagaimana seharusnya ditata. Sebagai contoh:
p {
warna: # 000;
}
Ini adalah aturan CSS. Bagian pemilih adalah "p", yang merupakan elemen pemilih untuk "paragraf". Oleh karena itu, pilih SEMUA paragraf di situs dan berikan mereka dengan gaya ini (kecuali ada paragraf yang ditargetkan oleh gaya yang lebih spesifik di tempat lain dalam dokumen CSS Anda).
Bagian dari aturan yang mengatakan "warna: # 000;" adalah apa yang dikenal sebagai deklarasi. Deklarasi itu terdiri dari dua bagian - properti dan nilainya.
Properti adalah bagian "warna" dari deklarasi ini. Ini menentukan aspek pemilih akan diubah secara visual.
Nilai adalah apa properti CSS yang dipilih akan diubah menjadi. Dalam contoh kita, kita menggunakan nilai hex # 000, yang merupakan singkatan CSS untuk "hitam".
Jadi menggunakan aturan CSS ini, halaman kami akan memiliki paragraf yang ditampilkan dalam font-warna hitam.
Dasar-Dasar Properti CSS
Ketika Anda menulis properti CSS, Anda tidak bisa begitu saja membuatnya sesuai keinginan Anda. Untuk contoh, "warna" adalah properti CSS yang sebenarnya, sehingga Anda dapat menggunakannya. Properti ini yang menentukan warna teks dari suatu elemen. Jika Anda mencoba menggunakan "teks-warna" atau "font-color" sebagai properti CSS, ini akan gagal karena bukan bagian sebenarnya dari bahasa CSS.
Contoh lain adalah properti "gambar latar belakang". Properti ini menetapkan gambar yang dapat digunakan untuk latar belakang, seperti ini:
.logo {
background-image: url (/images/company-logo.png);
}
Jika Anda mencoba menggunakan "gambar latar belakang" atau "latar belakang-grafis" sebagai properti, mereka akan gagal karena, sekali lagi, ini bukan properti CSS sebenarnya.
Beberapa Properti CSS
Ada sejumlah properti CSS yang dapat Anda gunakan untuk menata sebuah situs. Beberapa contoh adalah:
- Border (termasuk border-style, border-color, dan border-width)
- Padding (termasuk padding-top, padding-right, padding-bottom, dan padding-left)
- Margin (termasuk margin-top, margin-right, margin-bottom, dan margin-left)
- Font-family
- Ukuran huruf
- Warna latar belakang
- Lebar
- Tinggi
Properti CSS ini bagus untuk digunakan sebagai contoh, karena semuanya sangat mudah dan, bahkan jika Anda tidak tahu CSS, Anda mungkin bisa menebak apa yang mereka lakukan berdasarkan nama mereka.
Ada properti CSS lain yang akan Anda temui juga yang mungkin tidak jelas bagaimana mereka bekerja berdasarkan nama mereka:
- Mengapung
- Bersih
- Meluap
- Transformasi teks
- Z-index
Ketika Anda masuk lebih dalam ke desain web, Anda akan menemukan (dan menggunakan) semua properti ini dan banyak lagi!
Properti Membutuhkan Nilai
Setiap kali Anda menggunakan properti, Anda harus memberinya nilai - dan properti tertentu hanya dapat menerima nilai tertentu.
Dalam contoh pertama properti "warna" kami, kami perlu menggunakan nilai warna. Ini bisa berupa nilai hex , nilai RGBA, atau bahkan kata kunci berwarna . Namun, salah satu dari nilai-nilai itu akan berhasil, jika Anda menggunakan kata "suram" dengan properti ini, itu tidak akan melakukan apa pun karena, seobjektif mungkin kata itu, itu bukan nilai yang diakui dalam CSS.
Contoh kedua kami dari "gambar latar belakang" membutuhkan jalur gambar digunakan untuk mengambil gambar yang sebenarnya dari file situs Anda. Ini adalah nilai / sintaks yang diperlukan.
Semua properti CSS memiliki nilai yang mereka harapkan. Sebagai contoh:
- Border-color mengharapkan nilai warna
- Border-size mengharapkan nilai ukuran, seperti piksel atau persentase
- Gaya perbatasan mengharapkan salah satu gaya yang dipesan yang digunakan untuk properti ini, seperti "padat"
Jika Anda menelusuri daftar properti CSS, Anda akan menemukan bahwa masing-masing memiliki nilai spesifik yang akan mereka gunakan untuk menciptakan gaya yang dimaksudkan untuk mereka.
Diedit oleh Jeremy Girard