Pengenalan CSS

BLC Telkom - KPLI Klaten

Assalamualaikum wr.wb

Setelah kemarin saya membahas beberapa tentang HTML sekarang saya akan berbagi beberapa Tutorial tentang CSS, Untuk lebih lanjutnya sebelum itu saya akan memperkenalkan CSS itu apa?

Latar Belakang
Penampilan dari Halaman yang kita buat baik dari HTML/PHP/Java script belum terlihat sempurna keindahannya. maka dari itu untuk menambah dan menyempurnakan Halaman dari tampilannya hampir sebagian orang mnggunakan CSS.

Tujuan
Agar dapat Mempelajari dan mempraktekan penerapan CSS pada HTML/PHP

Pembahasan
1. Pengertian CSS
2. Versi CSS
3. Penulisan

Pengertian CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam . CSS bukan merupakan bahasa pemograman.
Style pada CSS dapat mengatur beberapa style,misalnya heading,subbab,bodytext,footer,images, dan style lainnya yang dapat digunakan bersama-sama dalam beberapa berkas file. pada umumnya CSS digunakan untuk memformat tampilan halaman web yang dibuat denganbahasa HTML atau XHTML . CSS dapat mengendalikan ukuran gambar,warna bagiana tubuh text warna tabel , ukuran border, warna border,warna hiperlink,warna mouse over,spasi antar paragraf,spasi antar teks,margin.
atau CSS juga merupakan bahsa syle sheet yang digunakan untk mengatur tampilan dokumen . dengan CSS memungkinkan kita untuk menampilkan halaman yang smaa dengan format yang berbeda.

Versi CSS

Beberapa versi CSS yaitu :

CSS 1
CSS 2
CSS 3

CSS 1 , Dikembangkan berpusat pada pemformatan dokumen HTML
CSS 2, Dikembangkan memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 2 Mendukung penentuan posisi konten,dowloadable,huruf font,tampilan pada tabel, tabel layout,dan media tipe untuk printer.

CSS 3 , Adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website

CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS 3 desainer dimudahkan dalam hal komtabilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. selain itu banyak juga fitur baru pada CSS 3 seperti : Multiple
background,border-radius, drop-shadow,border-image,CSS math dan CSS objec model.

Penulisan

Penulisan CSS tidak sama dengan penulisan Script pada HTML/PHP seperti biasanya. Bagian pertama sebelum tanda "{}" dinamakan Selector atau gampangnya kita namai kode yang dapat dipanggil dan digunakan untuk memanggil. Sedangkan Bagian yang berada di dalam tanda "{}" merupakan deklsration yang terdiri dari dua unsur yaitu Property dan Value .
Contoh :
h1 {
color: #0789de;
}

h2 {
color: #ffffffff;
}
Keterangan :

h1 dan h2 = Selector
color = Property
#ffffffff dan #0789de = Value

Selain itu ada tiga metode penulisan CSS atribut, yaitu :
1. Inline Style Sheet
Cara penulisan engan menambahkan atribut Style="..." dalam tag HTML tersebut. Style tersebut hanya akan berlaku pada tag yang bersangkutan tidak akan memengaruhi tag HTML lain .
Contoh penulisan CSS dengan metode Inline Style Sheet

-
Script

Hasil

2.Embedded Style sheet
CSS didefinisikan terlebih dahulu dengan tag<style>...</style> diatas tag <body> . Pada pendefinisian ini disebutkan atribut - atribut CSS yang akan digunakan untuk tag-tag HTML,yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet

Script


Hasil

Contoh penerapan CSS lain :

Script

Hasil

Sekian bahasan untuk kali ini tentang pengenalan CSS, semoga bermanfaat dan dapat menambah pengetahuan teman - teman.
Terimaksih Wassalamualaikum wr.wb

Risanurhaeni

Pengenalan CSS

Artikel Menarik Lainnya