Contoh dari Casacading Style Sheet (CSS)

Hallo Sahabat Code-Man ,Kali ini saya akan sedikit membahas tentang Cascading Style Sheet atau lebih dikenal dengan CSS.Setelah saya menjelaskan sedikit tentang CSS saya akan memberikan contoh dari kodingan CSS.Langsung saja ke materi.

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.

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.

Anatomi CSS

Pengkodean CSS

Inline

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

Embedded

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

External

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

Beberapa Properti di CSS

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;}

Contoh dari HTML dan CSS

Contoh Penggunaan Inline 

 Hasil :

Contoh Embedded dan,Selector Class dan ID

Hasil :

Contoh kedua

Hasil :

Contoh External CSS

File CSSnya :

Hasil :

Contoh Embed CSS Macam2 Heading

Hasil :

Contoh Format Paragraf CSS

Hasil :

Contoh Teks Decoration pada CSS

Hasil :

Contoh dari Format Teks CSS

Hasil

Contoh HTML dan CSS yang Saya Buat

Hasil :

Nah itulah sedikit penjelasan dan contoh dari CSS.Semoga apa yang aya jelaskan bisa bermanfaat bagi kalian semua,jika ada sesautu yang kurang tolong beri saya kritik dan saran di kolom komentar :).Sekian dan Terima Kasih


Salam CodeMan !1!1!1