Pendahuluan Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk menggambarkan presentasi dokumen yang ditulis dalam markup. Inilah sebabnya mengapa pengembang web mendapatkan keuntungan dari memisahkan konten (HTML) dari sebuah situs web, dengan presentasinya (CSS), melalui situs web yang terlihat lebih baik dan ramah pengguna. Pada artikel ini, kami telah mempersempit ke hal-hal penting yang akan membantu Anda memahami bagaimana CSS membuat HTML menjadi indah.
Dasar-dasar CSS | Penjelasan
CSS (Cascading Style Sheets) adalah bahasa style sheet yang digunakan untuk mendeskripsikan tampilan dan pemformatan dokumen HTML. Struktur Aturan CSS Sebuah aturan CSS memiliki dua bagian utama: pemilih, dan satu atau lebih blok deklarasi.
selector {
property: value;
}
- Pemilih: Ini menargetkan elemen HTML yang ingin Anda beri gaya.
- Properti: Ini menentukan aspek elemen yang ingin Anda ubah, seperti warna, ukuran font, atau margin.
- Nilai: Ini menentukan pengaturan untuk properti.
Pemilih CSS
1. Pemilih Elemen: Menargetkan semua contoh elemen HTML tertentu.p {font-size: 16px;}2. Pemilih Kelas: Menargetkan elemen dengan atribut kelas tertentu. Dimulai dengan titik (.)..highlight {background-color: yellow;}3. Pemilih ID: Menargetkan elemen unik dengan atribut ID tertentu. Dimulai dengan tanda pagar (#).#main-title {font-weight: bold;}4. Pemilih Atribut: Menargetkan elemen berdasarkan atributnya.a[target="_blank"] {color: green;}5. Pemilih Keturunan: Menargetkan elemen yang bersarang di dalam elemen tertentu.div p {line-height: 1.5;}
Properti CSS yang umum
Setelah memilih elemen, Anda dapat menggunakan berbagai properti CSS untuk mengubah gaya halaman web Anda. Berikut ini beberapa properti yang sering digunakan:
- color (Warna): Mengatur warna teks.
- background-color: Menetapkan warna latar belakang elemen.
● Penataan Teks:
- keluarga-font: Menentukan jenis huruf teks.
- font-size: Menentukan ukuran teks.
- text-align: Meratakan teks (mis., kiri, kanan, tengah).
- margin: Mengatur ruang di luar elemen.
- padding: Mengatur spasi di dalam elemen, antara konten dan batas.
- border: Mengatur batas di sekitar elemen.
- posisi: Menentukan bagaimana suatu elemen diposisikan (misalnya, statis, relatif, absolut).
- atas, kanan, bawah, kiri: Menentukan pergeseran elemen yang diposisikan.
Desain Responsif dengan CSS
Desain responsif sangat penting untuk menghasilkan situs web yang terlihat bagus dan berfungsi dengan baik di semua jenis perangkat -baik itu desktop maupun smartphone. Ada beberapa cara utama untuk mencapai desain web responsif, tetapi semuanya menggunakan teknik CSS.
● Kueri Media: Ini memungkinkan Anda menentukan gaya yang berbeda berdasarkan perangkat, yang bisa berupa lebar atau tingginya.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
● Tata Letak Fluida: Untuk memiliki tata letak yang mengalir, disarankan untuk menggunakan unit relatif (%, vw, vh) daripada unit tetap (px).
● CSS Grid dan Flexbox: Anggota Bangga Keluarga Tata Letak, model tata letak ini memungkinkan desain yang bermakna dan responsif
Kesimpulan
Ini adalah pengetahuan mendasar bagi setiap pengembang web tentang cara menata HTML menggunakan CSS. Mengetahui sintaks, selektor dan properti css akan memberi Anda kekuatan super untuk membuat halaman web yang terlihat keren dan ramah pengguna. Lebih jauh lagi, mempelajari praktik desain responsif akan membantu mereka membuat situs mereka terlihat bagus di perangkat apa pun. Susunan HTML dan CSS ini memungkinkan dimulainya pengembangan web yang lebih luas, serta kreativitas yang berkeliaran tentang versi cetak mengenai ukuran dan desain. Dari pemula hingga menengah, mahir dalam CSS adalah tangga pertama menuju kesuksesan yang Anda butuhkan untuk menjadi pengembang web yang baik.
Kembali ke>> Dasar-dasar HTML: Membangun Halaman Web Pertama Anda