Singkatan CSS adalah singkatan dari "cascading style sheets". CSS digunakan untuk menata situs web dan aplikasi yang digunakan di semua perangkat. Style sheet biasanya digunakan bersama HTML dan bahasa pemrograman front-end seperti JavaScript.

CSS dapat diimplementasikan dengan salah satu dari tiga cara—inline, internal, atau eksternal. Meskipun CSS eksternal adalah pendekatan yang disarankan, ada beberapa contoh ketika dua metode implementasi yang tersisa mungkin lebih praktis.

Dalam artikel tutorial ini, Anda akan mempelajari semua dasar-dasar CSS untuk mulai membangun aplikasi hari ini.

Kapan Menggunakan Metode Implementasi CSS yang Berbeda

CSS sebaris adalah metode implementasi yang ideal ketika tujuannya adalah untuk hanya menyertakan satu atau dua preferensi gaya pada halaman web, bersama dengan beberapa kasus khusus lainnya. Metode CSS sebaris menggunakan gaya kata kunci bersama dengan properti CSS untuk mencapai hasil tertentu.

Jika Anda bermaksud mengubah warna satu judul menjadi merah, maka CSS sebaris mungkin merupakan pilihan yang baik. Kasus khusus, seperti yang disebutkan di atas, adalah saat membuat tata letak HTML yang terutama terdiri dari tabel (praktik yang sudah ketinggalan zaman).

Menggunakan Contoh CSS Sebaris

Judul Utama

Baris kode di atas akan menampilkan teks “Main Heading” yang dilapisi warna merah. Ini sangat mungkin satu-satunya alasan praktis untuk menggunakan CSS sebaris karena biasanya hanya ada satu h1 elemen pada halaman web tertentu.

Jika Anda berniat untuk melapisi semua h2 elemen pada halaman web dengan warna kuning. Anda harus menggunakan CSS gaya kata kunci, bersama dengan warna properti dan nilainya (kuning) pada setiap elemen. Namun, cara yang lebih efisien untuk menyelesaikan tugas ini adalah dengan menggunakan CSS internal.

Menggunakan Contoh CSS Internal

Menempatkan kode di atas di tag file HTML Anda akan memastikan bahwa semua h2 elemen dalam file itu dilapisi dengan warna kuning. CSS internal dipisahkan dari kode HTML, dan ini membuat metode ini lebih efisien karena memfasilitasi penargetan berbagai kelompok elemen.

Jadi mengapa metode implementasi CSS eksternal masih merupakan pendekatan yang paling direkomendasikan? Pemisahan kekhawatiran. Dengan CSS eksternal, kode CSS Anda benar-benar terpisah dari kode HTML Anda, yang memastikan skalabilitas untuk proyek besar dan membuat proses pengujian lebih efisien.

Menggunakan Contoh CSS Eksternal

Memasukkan baris kode di atas ke dalam tag file HTML Anda akan memfasilitasi penataan halaman web Anda menggunakan metode CSS eksternal. Satu-satunya aspek dari kode di atas yang akan berubah adalah nilai yang ditetapkan ke href properti, yang harus selalu menjadi nama file CSS (termasuk ekstensi .css).

Terkait: Apa Itu Cascading Style Sheets dan Untuk Apa CSS Digunakan? Dengan file CSS Anda ditautkan ke dokumen HTML Anda, Anda sekarang dapat mulai menulis kode CSS di file CSS Anda. Pada titik ini, satu-satunya perbedaan antara contoh CSS internal di atas dan CSS eksternal adalah gaya menandai. Oleh karena itu, memasukkan kode berikut ke dalam file CSS akan menghasilkan hasil yang sama seperti contoh CSS internal di atas.

h2{
warna: kuning;
}

Menjelajahi Struktur Dasar CSS

Deklarasi CSS dasar berisi tujuh elemen penting, seperti yang dapat Anda lihat dari contoh di bawah ini. Mereka semua bekerja sama untuk mencapai serangkaian preferensi gaya tertentu.

Pemilih

Dalam deklarasi CSS, pemilih dapat berupa Indo, A kelas, elemen, atau dalam beberapa kasus khusus, pemilih semu. Dalam struktur CSS di atas A elemen digunakan sebagai pemilih, yang berarti semua tautan di halaman web akan dilapisi dengan warna merah. Pada dasarnya, tujuan dari pemilih adalah untuk mengidentifikasi elemen (s) yang harus ditata.

Deklarasi Awal dan Akhir

Deklarasi awal dan akhir penting karena menyertakan semua preferensi gaya yang berlaku untuk pemilih tertentu. Kedua elemen tersebut diwakili oleh sepasang kurung kurawal buka dan kurung kurawal tertutup. Cara yang baik untuk mengingat penggunaan deklarasi awal atau akhir deklarasi adalah dengan mengingat bahwa jika Anda memiliki kurung kurawal terbuka, harus ada kurung kurawal tertutup yang sesuai, dan sebaliknya.

Properti

Properti CSS dalam struktur deklarasi dapat berupa salah satu dari lebih dari seratus tipe properti yang berbeda. Jenis properti yang digunakan dalam struktur CSS di atas adalah warna dan properti ini menargetkan teks pada halaman web. Jika Anda ingin mempelajari lebih lanjut, lihat kami daftar lengkap properti CSS dan penggunaannya.

Pemisah Properti/Nilai

Meskipun mungkin tampak kecil dan tidak signifikan, pemisah properti/nilai sama pentingnya dengan semua elemen lain dalam struktur CSS. Jika ada kejadian di mana elemen ini dilupakan, seluruh deklarasi CSS tidak akan dijalankan.

Nilai

Nilai properti CSS mewakili gaya persis yang ingin Anda terapkan ke properti tertentu. Nilai yang tersedia untuk digunakan bergantung pada tipe properti. Misalnya, properti yang digunakan dalam struktur di atas adalah warna, yang berarti hanya ada satu jenis nilai yang dapat diterapkan ke properti ini, nama warna. A warna nilai dapat disajikan dalam salah satu dari empat bentuk: nilai kata (seperti pada contoh di atas), nilai heksadesimal, nilai HSL (Hue, Saturation, Lightness), atau nilai RGB (Merah, Hijau, Biru).

Pemisah Deklarasi

Pemisah deklarasi menunjukkan bahwa Anda berada di akhir deklarasi gaya tertentu. Dalam struktur di atas hanya ada satu pemisah deklarasi, tetapi bisa lebih. Itu semua tergantung pada jumlah properti CSS yang ingin Anda gunakan pada tertentu kelas, Indo, atau elemen.

Apa itu id dan kelas?

id dan kelas memainkan peran mendasar dalam proses styling CSS. Seperti elemen HTML, CSS id dan kelas digunakan sebagai penyeleksi dalam deklarasi CSS. Namun, kelas dan id diutamakan daripada elemen HTML.

Aturan umum dalam CSS adalah bahwa deklarasi gaya terakhir yang Anda tambahkan ke file akan menimpa yang ada sebelumnya. Oleh karena itu, jika ada dua deklarasi dengan h2 pemilih dalam file CSS, deklarasi yang ditambahkan terakhir menimpa yang ada sebelumnya.

Namun, jika ini h2 elemen memiliki Indo yang digunakan sebagai pemilih dalam deklarasi CSS, terlepas dari posisinya (sebelum atau sesudah) ke deklarasi CSS yang memiliki h2 elemen sebagai pemilihnya, preferensi gaya di Indo deklarasi akan selalu didahulukan dari elemen. Singkatnya, Indo akan menimpa pemilih gaya lainnya.

Penting untuk diingat bahwa dalam deklarasi CSS, id dimulai dengan tanda angka dan kelas dimulai dengan titik. Perbedaan yang paling signifikan antara Indo dan kelas apakah itu Indo unik, sedangkan a kelas dapat digandakan. Misalnya, koleksi serupa tag dapat diberikan hal yang sama kelas nama; namun, Indo setiap tag harus unik.

Menjelajahi Berbagai Jenis Selektor

Ada tiga tipe dasar selektor—single, multiple, dan nested. Sejauh ini, artikel ini telah membahas secara luas penyeleksi tunggal.

Saat menggunakan CSS, akan ada contoh ketika Anda menginginkan elemen yang berbeda pada posisi yang berbeda pada a halaman web untuk memiliki gaya serupa yang berbeda dari gaya umum yang diterapkan ke seluruh halaman web. Dalam hal ini, mengetahui cara menggunakan banyak pemilih akan sangat membantu.

Contoh Template HTML Dasar

Selamat datang

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  arsitek
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Tentang

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  arsitek
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Judul

Lorem ipsum dolor sit amet consectetur adipisicing elit. Kerjakan aspernatur vel dicta quod quibusdam!
Ea delectus duduk, laboriosam eos aperiam asperiores? Di ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officis fuga animi,
perferendis di telinga iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
menghambat maksimal? Eius modi optio ad, nisi tempora sapiente?







Judul

Lorem ipsum dolor sit amet consectetur adipisicing elit. Kerjakan aspernatur vel dicta quod quibusdam!
Ea delectus duduk, laboriosam eos aperiam asperiores? Di ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officis fuga animi,
perferendis di telinga iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
menghambat maksimal? Eius modi optio ad, nisi tempora sapiente?

Jika Anda melihat lebih dekat pada file HTML di atas, Anda akan melihat dinamika yang ada di antara id dan kelas. Mengacu pada file di atas, jika Anda ingin menerapkan gaya yang sama ke tentang bagian dan artikel di halaman web saja, kode CSS berikut akan melakukannya.

Menggunakan Beberapa Contoh Selector

#Tentang, .konten{
warna putih;
warna latar: darkcyan;
}

Saat menggunakan beberapa pemilih, Anda harus selalu memisahkan setiap pemilih menggunakan koma. Contoh di atas memiliki dua penyeleksi, dan Indo dan kelas. Jika koma yang mengikuti tentangIndo hilang, deklarasi CSS tidak akan dijalankan.

Kembali ke Contoh Template HTML Dasar di atas, ada dua tag hadir—satu di bagian selamat datang dan yang lainnya di bagian tentang. Jika tujuan Anda hanya menargetkan salah satu dari ini tag, pemilih bersarang harus menjadi metode masuk Anda.

Menggunakan Contoh Selektor Bersarang

#Selamat datang p span{
warna merah;
}

Pemilih bersarang di atas berisi Indo dan dua elemen HTML. Seperti yang Anda lihat dari contoh di atas, pemilih bersarang memberi Anda kemampuan untuk menargetkan elemen tertentu dalam grup.

Oleh karena itu, hanya menjangkau bagian di tag dari div dengan selamat datang id akan dilapisi dengan warna merah.

Baik Anda menggunakan bahasa gaya seperti CSS atau bahasa pemrograman, Anda benar-benar harus tahu cara menulis komentar. Komentar sangat penting dalam proyek tingkat perusahaan tempat beberapa pengembang bekerja sama, dan juga berguna saat melakukan pengembangan skala kecil.

Komentar CSS berisi dua garis miring, dua tanda bintang, dan bagian komentar.

/* Beginilah cara menulis komentar satu baris di CSS */

/*
Beginilah cara Anda menulis
komentar multi-baris
di CSS
*/

Apa berikutnya?

Artikel ini memberi Anda komponen dasar CSS. Anda sekarang dapat menggunakan identitas:

• Salah satu dari tiga metode implementasi CSS
• Semua elemen dalam deklarasi CSS
• Tiga tipe dasar pemilih
• Komentar CSS

Namun, ini baru permulaan. CSS memiliki beberapa kerangka kerja yang akan membantu Anda mengembangkan pemahaman bahasa yang lebih baik. Satu-satunya tantangan adalah memutuskan mana yang terbaik untuk Anda.

CSS Tailwind vs. Bootstrap: Kerangka Mana yang Lebih Baik?

Saat memilih kerangka kerja CSS, penting untuk menemukan kerangka kerja yang memenuhi kebutuhan Anda.

Baca Selanjutnya

Tentang Penulis