A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.
cara kerja css
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.http://www.indaam.com/2010/04/pemahaman-dasar-dasar-css-dan-cara-kerja/
Struktur CSS
- Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration.
- Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule CSS diterapkan.
- Selector dapat berupa elemen HTML, selector class atau selector id.
- Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value.
Metode Penulisan CSS
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas 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 internal :
CSS didefinisikan terlebih dalam sebuah file (*.css). Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya nama file di panggil dengan syntax html pada file HTML.
Contoh penggunaan CSS dengan metode Embedded Style Sheet eksternal :
Basic
- CSS Syntax Standard
body {color:black} - Jika value lebih dari satu kata gunakan tanda kutip ""
p {font-family:"sans serif"} - Jika lebih dari satu properti untuk sebuah selektor
p {text-align:center;color:red} - atau, agar lebih mudah dilihat bisa ditulis seperti ini:
p { text-align:center; color:black; font-family:arial }
Grouping
Untuk mempersingkat penulisan, CSS juga memungkinkan untuk melakukan grouping pada selector‐selector yang memiliki property yang sama. contoh:
h1 { color:green; }
h3 { color:green; }
h5 { color:green; }
p { color:green; }
Di Group menjadi:
h1,h3,h5,p { color:green; }
CSS Class Selector
- Berfungsi untuk memberikan style yang berbeda pada sebuah elemen HTML
- Diawali dengan menambahkan tanda '.' (titik) pada file css
- Pada file HTML ditambahkan property 'class' untuk memanggil selector tersebut.
- Satu elemen HTML dapat memanggil lebih dari satu class
contoh:
style.css
.merah {color:red;}
.right {text-align:right;}
.left {text-align:left;}
contoh.html
- Berfungsi juga untuk memberikan style yang berbeda pada sebuah elemen HTML
- Diawali dengan menambahkan tanda ‘#’ pada file css
- Pada file HTML ditambahkan property ‘id‘ untuk memanggil selector tersebut.
- Penulisan id tidak boleh diawali dengan angka
- Satu elemen HTML hanya boleh menggunakan satu id
contoh:
style.css
#merah {color:red;}
#right {text-align:right;}
#left {text-align:left;}
contoh.html
Selector CSS popular
CSS Dimension
Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML.
Contoh:
- Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
- Digunakan pada saat kita akan merancang tampilan sebuah website.
- Pada dasarnya berfungsi sebagai tempat yang membungkusisidarielemen‐elemen HTML.
- Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model.
- Terdiriatas4 bagian: Margin, Border, Padding, Content.
Contoh margin:
Contoh padding:
- Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman.
- Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut.
- Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.
- Property:
float:left;
float:right; - Untuk me‐nonaktifkan fungsi float gunakan:
clear:both; - Biasanya digunakan untuk membuat gallery.
LATIHAN CSS
1. STYLE DALAM TAG TUNGGAL
2. STYLE DALAM 1 DOKUMEN HTML
3. STYLE DALAM FILE EKSTERNAL
4. LATIHAN: Buat form menggunakan CSS sehingga memiliki tampilan seperti berikut:
Sekian artikel tentang Pengertian, Tipe, dan Fungsi CSS Beserta Contoh. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar