Belajar CSS ( Cascading Style Sheets ) Paling Mudah

Hi, hari ini saya akan membagikan buat kalian yang ingin tahu tentang CSS.

Apa Itu CSS ?

CSS adalah singkatan dari Cascading Style Sheets
CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan di layar, kertas, atau dalam media lain
CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus
Eksternal stylesheet yang disimpan dalam file CSS

PENGERTIAN CSS

Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna dan tampilan yang ada di situs web dapat

dirubah/diformat ulang dengan cepat. CSS juga telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser. 

Penulisan CSS

<style type="text/css">

... css...

</style>

Contoh :

<h1 style=”color:red”>merah, meriah euy...</h1> 

ISTILAH-ISTILAH DALAM STYLE SHEET

1. Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <h2> di tampilkan dengan warna orange.

2. Style sheet

Style sheet dapat di-embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

3. Selector

selector { property1: value; property2:value, . . .} h1{ color:green; background-color:orange} Style sheets terdiri dari dua bagian:

a. Selector

Bagian pertama sebelum tanda “{}” disebut selector

b. Declaration

Terdiri dari properti dan nilainya. 

Mengapa menggunakan CSS?

CSS adalah digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak dan variasi dalam tampilan untuk perangkat yang berbeda dan ukuran layar. 

PEMAKAIAN ELEMEN STYLE

Mari kita mulai dengan mengatur warna huruf dan latar belakang. Anda dapat mengerjakan ini dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen anda. 

1. Pewarisan (Inheritance) CSS

Contoh :

2. Classes
Contoh Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita.

3.Selektor Kontekstual (Contextual-Selector)
Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold dan italic tampil dengan huruf arial dan berwarna biru.

CSS menawarkan berbagai macam cara untuk mengganti warna.
Paling mudah adalah dengan menggunakan salah satu dari predefined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kreiss).

I {color: #0000FF)

Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti
ini :

I {color: rgb (0, 0, 255))
I {color: rgb (0%, 0%, 100%))

Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita
sukai.

Contoh program pemanfaatan CSS | Disini


Selamat Mencoba , Semoga Berhasil !!!
Terima Kasih telah membaca dan mengunjungi Dodi Blog dan sekian dari saya semoga bermanfaat bye.