Binti Qomariah - Assalamu'alaikum teman-teman ..
Apa kabar ? Kali ini saya akan membagikan artikel tentang CSS. apa sih CSS itu? Simak ya ..
1. Pengertian
CSS (Cascading Style Sheet) adalah bahasa pemrograman web yang
digunakan untuk menentukan aturan style dari suatu halaman web. Mengapa
kita perlu menggunakan CSS, sedangkan kita mengatur stylenya melalui
html pun juga bisa?.Di dalam html kita hanya mengubah semua tulisan sirkel dalam suatu halaman website. Tetapi di CSS kita bisa mengubah sirkel dalam website tersebut dalam jumlah yang banyak, dapat mencapai ratusan sirkel.
2. Sturuktur Penulisan CSS
a. Aturan Dasar
Penulisan syntax CSS menggunakan aturan yang disebut selector dan pendklerasiannya terdiri dari property dan value.
Bentuk umum dalam penulisan CSS :
selector { property: value;}
Pada umunya suatu selectoctor merupakan elemen/tag HTML yang ingin kita berikan suatu style. Property merupakan suatu elemen/tag HTML yang mempunyai value untuk menentukan tampilan/style dari tag HTML tersebut.
Jika kita ingin menerapakan style CSS yang sama untuk beberapa elemen sekaligus, kita bisa menggabungkan semua elemen tersebut kedalam 1 selector, atau biasa disebut dengan grouping :
P, h1, h2 {
color: green;
Text-align: center;
3. Penerapan CSS pada Dokumen HTML
Untuk menerapkan CSS pada dokumen HTML kita bisa menggunakan 3 cara, yaitu :
3.1. Inline style
Style ini didefinisikan pada setiap elemen HTML yang diinginkan dan biasanya digunakan untuk style yang sudah fix (pasti) saja. Sebenarnya cara ini hampir sama dengan styling menggunakan HTML, sehingga kita tidak dianjurkan untuk menggunakn cara ini :
3.2. Internal Stylesheet
Style ini didefinisikan menjadi 1 dengan dokumen HTML, tepatnya diletakkan di dalam tag <head></head> dan menggunakan tag <style> untuk mendefinisikannya.
3.3. External Stylesheet
Cara ini memisahkan antara file HTML dan CSS. Dan CSS ini disimpan satu folder dengan file HTML dan bertype (.css). Cara inilah yang dianjurkan jika kita memiliki banyak halaman, karena kita hanya perlu memanggil CSS tersebut.
4. Selector
4.1. Elemen Selector
Selector disini merupakan suatu elemen/tag HTML yang akan diberikan suatu style tertentu. Misalnya :
h1 {
color: red;
text-decoration:underline;
}
Contoh pemanggilannya :
<h1>informatika</h1>
4.2. Class Selector
Penulisan selector ini menggunakan tandak titik (.). Metode ini sangat berguna untuk menerapkan suatu style pada bagian/elemen yang diinginkan saja. Suatu class selector dapat digunakan berulang-ulang pada elemen yang berbeda-beda. Misalnya :
.nama_class{
background-color: grey;
text-align: center;
}
Contoh pemanggilannya :
<div class="nama_class">contoh class selector</div>
4.3. ID Selector
Selector ini hampir sama dengan class selector, hanya saja menurut standart yang ada, ID Selector ini hanya boleh digunakan satu kali saja pada satu halaman HTML. Penulisannya menggunakan tanda pagar (#) dan diikuti nama ID. Sebagai berikut :
#nama_ID {
padding: 5px;
width: 500px;
border: solid;
}
Contoh pemanggilnya :
<div id="nama_ID">contoh ID selector</div>
5. Penutup
Baiklah hanya itu saja yang dapat saya bagikan ke teman-teman. Terimakasih sudah berkunjung. Semoga bermanfaat ya teman-teman ..
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon