STECHOQ TRAINING CENTER
2. Pengenalan Styling - CSS.html
Pengenalan Styling & CSS
Apa itu CSS?
CSS atau cascading style sheets, jika sebelumnya kita mengenal HTML sebagai bahasa markup (pondasi dari website), nah disini CSS yang akan bertugas untuk men-styling website tersebut.
Bagaimana apakah kalian sudah mengetahui fungsi dari CSS?
Agar kalian lebih paham mengenai konsep CSS, mari kita perhatikan tabel dibawah ini!
Dari analogi tabel di atas dapat kita simpulkan jika:
● HTML sebagai kerangka website
● CSS sebagai cover atau pakaian yang digunakan oleh website
● Javascript berfungsi membuat website kita lebih interaktif
Apakah ada teknik khusus untuk menggunakan CSS?
Ada 3 teknik yang dapat kita gunakan
Inline CSS
Jika kita memilih metode inline, kita hanya perlu menyisipkan kode CSS di dalam attribute <style> pada elemen HTML
Contoh kode di atas, dapat kita lihat jika h1 dengan nilai dari style adalah warna biru, sehingga konten yang berisi kalimat Selamat Datang akan berwarna biru.
Internal CSS
Jika kita menggunakan metode internal, kita hanya perlu menyisipkan kode CSS di dalam tag <style> yang terletak diantara elemen <head>...</head>
Contoh kode diatas akan menghasilkan
● Kalimat Website Pertamaku sebagai judul sehingga berada di tag <h1>, dengan warna biru
● Dan di dalam tag <p> yang berisi kalimat Selamat Datang sebagai isi konten dari paragraf, dengan warna merah
● Dengan latar belakang pada elemen body berwarna kuning
External CSS
Jika kita menggunakan metode external, kita harus menyiapkan file terpisah, sehingga di dalam file ini hanya berisi kode CSS. File ini akan kita hubungkan dengan file HTML menggunakan tag <link> yang berada di dalam elemen <head>
Pada contoh dibawah, file HTML disimpan dengan nama index.html dan file CSS dengan nama styles.css
Bagaimana jika terdapat dua file CSS?
Jika kita memiliki lebih dari file CSS, kita hanya perlu menulis alamat file tersebut sama seperti file penulisan file CSS pada contoh di atas.
CSS Syntax
Dari gambar di atas dapat kita lihat bahwa, CSS terdiri atas:
● Selektor
● Blok deklarasi
● Properti beserta nilainya.
Agar lebih jelas kita akan mengupasnya satu per satu
Selektor
Selektor sebagai kata kunci, jika kita ingin mengakses sebuah informasi dari google kita harus menentukan kata kuncinya. Begitu pula dengan CSS, CSS akan mengakses elemen HTML dengan selektor, dengan begitu CSS dapat men-styling konten yang ada pada elemen tersebut.
Dari contoh di atas, dapat kita lihat jika CSS akan men-styling elemen h1.
Artinya:
● h1 sebagai elemen
● color sebagai properti
● red sebagai nilai.
Selektor dapat berupa tag, class, id, dan attribute
Blok Deklarasi
Blok deklarasi merupakan area yang dapat kita gunakan untuk menulis atribut maupun properti CSS yang akan diberikan kepada elemen yang ingin di styling.
Dari contoh diatas dapat kita lihat jika:
● blok deklarasi dinotasikan dengan { }
● p sebagai kata kunci, sehingga konten di dalam p memiliki ukuran font 18px
Catatan: untuk satu blok deklarasi dapat digunakan lebih dari satu selektor
Jika kita memiliki lebih dari satu selektor kita wajib menggunakan (,) untuk memisahkan antar selektor.
Contoh bentuk lain penulisan:
Hasil dari keduanya tetap sama, yaitu tag h1 sampai h6 berwarna teal.
Properti dan Nilainya
Properti adalah bentuk dari peraturan untuk elemen html untuk men-styling elemen tersebut. Peraturan ini akan berlaku jika terdapat nilai didalamnya.
Format penulisan properti dan nilai:
Contoh lain:
Keterangan:
● Properti harus ditulis di dalam blok deklarasi
●
Properti dan nilai dipisahkan dengan tanda titik dua (
●
Nilai ditulis di dalam tanda kutip jika berupa teks
● Properti diakhiri dengan tanda titik koma (;) jika lebih dari satu properti
● Di dalam satu blok deklarasi dapat diisi lebih dari satu properti
Apakah boleh di dalam satu properti terdapat lebih dari satu nilai?
Boleh, berikut ini contohnya:
Artinya, jika times new roman tidak ada, maka akan menggunakan georgia, dan opsi terakhir adalah roboto.
Penulisan Komentar
Masih ingat penulisan komentar pada HTML?
Penulisan komentar pada CSS lebih simpel dibanding dengan HTML, berikut contohnya:
Diawali dengan /* dan ditutup dengan */
Mengenal Lebih Dalam CSS Selector
Selector Tag
Yaitu memilih berdasarkan tag, contohnya
Artinya, seluruh isi konten di dalam tag p berubah menjadi warna biru
Selector Class
Yaitu memilih berdasarkan nama class yang diberikan. Format nama class adalah dengan memberikan tanda titik (.) sebelum nama class, contohnya:
Pada sebuah elemen html menggunakan kedua class tersebut
Dan dihasilkan
Selector ID
Hampir sama dengan class, bedanya pada format penulisan ID menggunakan (#). ID memiliki sifat lebih spesifik dibanding class, sehingga hanya dapat digunakan pada satu elemen saja.
Contohnya beserta kode HTML:
Hasilnya:
Selector Attribute
Yaitu memilih berdasarkan atribut, contohnya:
Dari contoh diatas dapat kita lihat jika seluruh elemen dalam tag <input> dengan atribut type=text akan berubah sesuai dengan value tersebut.
Selector Universal
Yaitu selektor yang memilih seluruh elemen dengan area tertentu, jika dibandingkan dengan selector class, selektor ini memiliki jangkauan yang lebih luas.
Contohnya:
Berarti, seluruh elemen akan berubah memiliki garis solid berwarna abu-abu dengan ukuran 1px
Referensi:
Last modified: Monday, 7 August 2023, 10:13 AM
