Pengenalan CSS

Assalamualaikum wr.wb

Pada Kesempatan Kali ini saya akan membahas tentang CSS sebagai pengenalan awal sebelum kita mengetahui materi-materi selanjutnya tentang CSS.

1.Latar Belakang
Cascading Style Sheet atau yang disingkat CSS memungkinkan anda untuk mendesain tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

2. Tujuan
Mengetahui dan memahami CSS agar dapat mempraktekannya dengan benar

3. Alat dan Bahan

OS Linux mint 17.3
Artikel referensi CSS

4. Pembahasan

CSS Memiliki beberapa Versi

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Sifat dari CSS

Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain.Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Penggunaan CSS

Penulisan css internal
Penulisan css external.
Penulisan css Inline style.

Cara Penulisan CSS Internal kode css ditulis langsung pada halaman website anda diantara<head></head>

Cara Penulisan CSS Eksternal
File CSS disimpan dengan ekstensi CSS kemudian diimport atau dihubungkan kedalam file HTML atau PHP yang ingin kita design dengan CSS .

<link rel="stylesheet" type="text/css" href="style.css" />
Tag link diatas digunakan untuk menghubungkan file CSS dengan HTML/PHP . sintaxs tersebut diletakan pada file html.pada atribut rel dan type di tag link di atas digunakan untuk mendefinisikan bahwa yang dipanggil atau yang dihubungkan adalah file style sheet atau CSS . Kemudian atribut href digunakan untuk meletakan letak file CSS. pada contoh diatas file style contoh pada sintaxs diatas file style.css. dan file yang dipanggil tersebut harus terletak atau diletakkan pada satu folder atau direktori.

Apabila file berada pada direktori atau folder yang berbeda dapat menggunakan sintaxs seperti dibawah ini :

href="../style.css"
Contoh jika data tersebut ada pada folder yang bernama "data". maka dapat ditulis sintaxs seperti dibawah ini :
href="data/style.css"

Cara Penulisan CSS Inline ditulis langsung pada selektor atau bagian yang akan dirubah atau di atur dengan CSS.nya.

Contoh Penulisan CSS Inline.
Apabila akan mengatur CSS pada elemen <p></p maka CSS dapat langsung dimasukkan pada elemen tersebut dengan menggunakan style="";

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

Kegunaan CSS

CSS dapat mengubah font,ukuran font,warna dan format font. mengatur ukuran layout lebar tinggi dan warna elemen,mengubah tampilan form,membuat halaman website yang responsive dan masih banyak lagi yang dapat dilakukaan oleh CSS .
Berikut adalah Struktur Penulisan CSS dan berikut penjelasannya :

Selector

Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, Kita telah memberi style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, Anda dapat menuliskan nama ID tersebut dengan diawali dengan tanda kress (#)
Contoh : #header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.
Contoh : .artikel

Property dan Value

Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna teks, warna background, jarak antar elemen, garis pinggir dan lain sebagainya.

Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap property diakhiri dengan titik koma ( ; ), jika Anda tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut.

5. Kesimpulan
Kesimpulannya adalah CSS merupakan style yang digunakan untuk mendesain suatu elemen seperti font,image,font style , margin,padding,float dll. yang dapat digunakan melalui beberapa cara penggunaan contoh cara internal,eksternal atau inline yang dapat secara langsung kita memasukkan perintah didalamnya .

6. Referensi