Memahami Anatomi dan Cara Kerja Cascading Style Sheet

Assalamu’alaikum Wr.Wb

Alhamdulillah back again with me hihihi. Hari ini kita udah masuk CSS ya. Apa sih kepanjangan CSS itu? Cs situ adalah Cascading Style Sheet. Jadi langsung saja ya kita bahas tentang CSS dan saya seperti biasa akan memberi contoh codingan dan hasilnya ya.

A. Definisi dan fungsi cascading style sheet

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

B. Manfaat CSS

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur.

2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.

3. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.

4. Dapat berkolaborasi dengan JavaScript

5. Dapat digunakan dalam hampir semua jenis web browser.

C. Pengcodingan CSS

a. Inline

Di dalam file html yang sama, dalam masing-masing tag

b. Embedded

Di dalam file html yang sama, hanya dalam satu file html saja

c. External

Di luar file html, bisa digunakan di berbagai file html, dengan format file.css

D. Anatomi dari Cascading Stylesheet

D. Beberapa Properti pada CSS Text Format

E. Beberapa Properti Pada CSS Format

F. Pengaturan warna pada teks/color

CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut :

1 . nilai HEX à misalnya, "#ff0000"

2 . nilai RGB à misalnya, "rgb(255,0,0)"

3 . nama dari warna tersebut à misalnya "red“

4 . Menggunakan Color in CSS à Misalnya, “Thistle, GoldenRod, Salmon”

Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut :

selector {color:nilai warna;}

G. Praktikum

k Nah kali ini saya akan memberikan contoh kodingan yang saya buat. Saya memakai aplikasi Sublime Text 3 ya. Kalian bisa belajar ini dirumah atau dimana pun ya. Kalian bisa berkreatifitas dengan mengembangkan apa yang saya buat.

1 1. In line CSS