Hari 2 ~ Tentang CSS

 

CSS

Tentang css

                CSS adalah Bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

                CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website.

 

Kelebihan CSS

                Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak. Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah. Dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir. Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

 

Cara Kerja CSS

                 CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Struktur syntax CSS cukup sederhana. Truktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma. Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

 

CONTOH :

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

<style>

p {

color: blue;

text-weight: bold;

}

<style>

 

semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

<style>

p {

text-align: center;

font-size: 16px;

color: pink;

}

</style>

CSS Style Internal, External, dan Inline

 

CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.

External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.

CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.

 

 

Kesimpulan

·         CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.

·         Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.

·         Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.

CSS Syntax

Pemilih menunjuk ke elemen HTML yang ingin Anda gaya.

Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.

Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.

Penjelasan :

·         p adalah pemilih di CSS (menunjuk ke elemen HTML yang ingin Anda beri gaya: <p>).

·         Color adalah properti, dan red merupakan nilai properti

·         text-align adalah properti, dan center merupakan nilai properti.

    CSS Selector

                Selektor CSS digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda gaya.

                Lima kategori CSS :

·         Selektor sederhana (pilih elemen berdasarkan nama, id, kelas)

·         Selektor kombinator (memilih elemen berdasarkan hubungan spesifik di antara mereka)

·         Selektor kelas semu (memilih elemen berdasarkan status tertentu)

·         Selektor elemen semu (memilih dan menata bagian elemen)

·         Pemilih atribut (memilih elemen berdasarkan atribut atau nilai atribut)

 

Selector elemen css

                semua elemen <p> pada halaman akan diratakan tengah, dengan warna teks merah: 

selector css id

                Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

Id dari sebuah elemen adalah unik di dalam sebuah halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.

Selector css class

Untuk memilih elemen dengan kelas tertentu, tulis karakter titik (.), diikuti dengan nama kelas.

Dalam contoh ini semua elemen HTML dengan class="center" akan berwarna merah dan rata tengah:  

Universal css selector

                Pemilih universal (*) memilih semua elemen HTML pada halaman. 

 Pengelompokan css selector     

                Pemilih pengelompokan memilih semua elemen HTML dengan definisi gaya yang sama.

Lihat kode CSS berikut (elemen h1, h2, dan p memiliki definisi gaya yang sama):

Akan lebih baik untuk mengelompokkan pemilih, untuk meminimalkan kode.

Untuk mengelompokkan pemilih, pisahkan setiap pemilih dengan koma.

 Css selector sederhana

 

Value  Dan Propety CSS

Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.

Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:

Selector, Property dan Value ini adalah elemen inti dari CSS, 90% tutorial yang akan kita pelajari mengenai CSS akan membahas tentang ketiga aspek ini.

Pada artikel selanjutnya, kita akan mempelajari Aturan dan Cara Penulisan Kode CSS kedalam halaman HTML.

 

 

 

LAMPIRAN

https://www.hostinger.co.id/tutorial/apa-itu-css -> tentang css

https://www.w3schools.com/css/css_syntax.ASP -> css syntax,selector,property dan value

 

Name               : Adnan Taufik A

Classs              : XI TKJ 1

 School            :SMK IT Ihsanul Fikri Mungkid