CSS Selector

 

CSS : CSS Selector


copyright by Razadd

Halo semuanya!

Di hari yang cerah ini saya akan menjelaskan komponen penting dalam bahasa pemrograman CSS yaitu CSS Selector! Nahh, sebelum kita kupas tuntas tentang Apa yang dimaksud dengan CSS Selector? ada baiknya kita mengenal terlebih dahulu CSS 


APA ITU CSS?


copyright by Razadd


        CSS (Cascading Style Sheet) adalah sebuah bahasa pemrograman berbasis HTML yang digunakan saat proses mendesign suatu tampilan Website, Tampilan elemen CSS tertulis dalam bahasa Markup yang memang serupa dengan HTML.

Dalam suatu website, HTML berperan sebagai penyusun struktur website sedangkan CSS untuk mengatur layout halaman website. Dapat disimpulkan, HTML dan CSS saling berhubungan satu sama lain.

Fungsi CSS

        Dalam bahasa Markup, CSS mengatur tampilan elemen yang memisahkan konten dari tampilan visual sebuah website. CSS inilah yang mengatur tampilan halaman suatu website agar lebih indah dan menarik. CSS juga menjadi satu cara untuk mengatasi keterbatasan penulisan format HTML dalam mengatur sebuah website.

Nah.. sampai sini kita cukup tahu betapa pentingnya CSS sebagai pelengkap HTML dalam membangun suatu website.

Jenis CSS 

1. Inline CSS

Metode penulisan CSS yang langsung dituangkan pada tag HTML yang hendak diberikan style CSS.

See the Pen Untitled by helio (@stellarfantasy) on CodePen.

2. Internal CSS

Penulisan kode CSS terdapat pada bagian <head> atau kepala HTML dan diapit oleh tag <style>.

See the Pen Untitled by helio (@stellarfantasy) on CodePen.

3. Eksternal CSS

Metode yang satu ini adalah metode terbaik untuk penulisan CSS, mengapa?

Penulisan Eksternal CSS berbeda dari yang lain karena HTML dan CSS nya ditulis secara terpisah, dan pada kode CSS hanya perlu menargetkan selectornya.

See the Pen Untitled by helio (@stellarfantasy) on CodePen.



APA ITU SELECTOR CSS?


copyright by Razadd

        Dalam bahasa pemrograman CSS, Selector dipergunakan untuk memilih elemen mana yang hendak di pengaruhi, bisa untuk diubah atau diatur dengan bebas sesuai ketentuan yang ada agar tertata dengan baik.


Type Selector




src ; https://www.google.com/url?sa=i&url=http%3A%2F%2Fwww.corelangs.com%2Fcss%2Fbasics%2Fid-selectors.html&psig=AOvVaw0oiPTYAVAmAJdXRbG_HTEl&ust=1668652702601000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOi_mfDVsfsCFQAAAAAdAAAAABAE

Komponen Type Selector terdiri dari :

1. Element Selector.
2. Deklarasi yang teridiri atas properti dan value/nilai/perintah.


ID Selector

Dalam penulisannya terbagi menjadi dua yaitu ;
1. ID
2. Class

ID disini sebagai kode unik yang menjadi pembeda antara satu sama lain. ID selector ditulis dalam bentuk hashtag (#).

See the Pen Untitled by helio (@stellarfantasy) on CodePen.



Class Selector

Class Selector agak sedikit berbeda dengan ID Selector, mengapa?
Class Selector dapat dimiliki lebih dari satu tag, begitupun sebaliknya. Dalam sebuah tag dapat memiliki lebih dari satu class.

Kode penulisan Class Selector diawali dengan tanda (.).

See the Pen Untitled by helio (@stellarfantasy) on CodePen.



Child Selector

Child Selector merupakan salah satu jenis selector yang penulisannya harus runtut sesuai turunan atau tingkatannya. Child Selector tidak berlaku untuk turunan kedua dan seterusnya.

    

See the Pen Untitled by helio (@stellarfantasy) on CodePen.


Descendant Selector

Penulisan dari Descendant Selector berurutan sesuai tingkatan turunan elemennya, tetapi lebih fleksibel dibandingkan dengan Child Selector, mengapa?
Descendant Selector tidak memiliki batas turunan untuk ditargetkan.


See the Pen Untitled by helio (@stellarfantasy) on CodePen.

Nah.. bagaimana?
semogaa dari apa yang sudah dibaca dapat menjadi ilmu yang berguna bagi orang banyak juga yaa!

~

~

~

~

~

Teruslah menuntut ilmu dan jangan lupa kesehatan nomor 1😜






saya Razadd disini pamit undur diri, Semoga harimu menyenangkan~!😇😇😇


Made in 2022 by Razadd

Comments

Post a Comment

Popular posts from this blog

C# : Mengetahui Sintak Dasar Bahasa Pemrograman C#

Image
 Dasar Bahasa Pemrograman C# Semua bahasa pemrograman memiliki sintaks maupun simbol-simbol yang hampir sama.  Untuk C# sendiri yang merupakan pengembangan dari bahasa C terdahulunya (C dan C++).  C# banyak mengambil inspirasi dari kedua bahasa terdahulunya itu sehingga tidak dapat dipungkiri jika sintak nya hampir mirip. 1. Struktur Dasar Bahasa Pemrograman C# struktur dari program C# terdiri atas 3 bagian yaitu : Bagian Deklarasi Pustaka Bagian Class Bagian Fungsi atau Method A. Bagian Deklarasi Pustaka Penulisan pustaka ( library ) yang dibutuhkan program ditulis pada bagian ini, karena itulah bagian ini terletak di bagian paling atas. Pustaka berisikan kumpulan Variabel, Konstanta, Fungsi, Method, Class, dan Objek yang nantinya dapat dipergunakan di program. B. Bagian Class Pemrograman yang berorientasikan objek seperti C# ini menggunakan paradigma OOP ( Object Oriented Programming ). Setiap pembuatan program C#, bagian class ini digunakan untuk mencakup fungsi dan va...
Read more