Latar belakang penggunaan CSS
johanandyagasi.blogspot.com. Dalam penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.
Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.
Cara Membuat CSS
Disini admin blog johan andy agasi akan memberikan sedikit informasi Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:
- Selector, adalah bagian atau elemen website yang akan diatur stylenya.
- Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
- Properti, adalah parameter tampilan yang akan kita atur.
- Nilai, merupakan ukuran yang itetapkan pada parameter properti.
p {
margin: 10px;
}
Penjelasan contoh diatas :
- p merupakan selector untuk elemen paragraf
- {...}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
- margin, merupakan properti untuk mengatur jarak dengan elemen lain.
- 10px, merupakan nilai yang ditetapkan untuk properti margin.
p {
margin: 10px;
padding: 5px;
font-size: 10px;
}
Cara Penulisan CSS
Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.
1. Inline CSS
Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style="..." pada elemen tersebut.
Contoh penulisan Inline CSS:
<p style="margin:10px;">
Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).
2. Embedded CSS
Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.
Contoh penulisan Embedded CSS dalam sebuah file html:
- <html>
- <head>
- <title>Contoh Embedded CSS</title>
- </head>
- <style>
- p {
- margin: 10px;
- }
- h1 {
- font-size: 15px;
- }
- </style>
- <body>
- <h1>Judul dengan font 15px</h1>
- <p>Ini adalah paragraf pertama</p>
- <p>Ini adalah paragraf kedua</p>
- </body>
- </html>
Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.
3. Eksternal CSS
Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.
Contoh penulisan Eksternal CSS :
Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css
- p {
- margin: 10px;
- }
- h1 {
- font-size: 15px;
- }
Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php
- <html>
- <head>
- <title>Contoh Embedded CSS</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <h1>Judul dengan font 15px</h1>
- <p>In adalah paragraf pertama</p>
- <p>In adalah paragraf kedua</p>
- </body>
- </html>
Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.
Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel="stylesheet" type="text/css" href="style.css">. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,
Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans seterusnya menjadi lebih ringan karena tidak perlu loading ulang css. itulah beberapa tutorial artikel tentang mengenai CSS dari pembelajaran admin blog johan andy agasi. Untuk lebih itu silahkan tinggalan komentar di bawah apa bila sobat belum paham tentang CSS. Semoga Bermanfaat :")
Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.
0 Komentar untuk " Pengertian CSS "