Mengenal CSS dalam
dunia website – dalam dunia website , pastinya tidak lepas dari adanya kode kode
program untuk menampilkan tampilan website yang sedemikian rupa dan memiliki
fungsi masing masingnya, website itu terbangun dari beberapa kode utamanya
yaitu html serta sebagai kode untuk
menjembatani antara web dengan database maka menggunakan php, namun kita kali ini akan menyinggung tentang kode
CSS, apa pengertiannya, apa kegunannya, bagaimana strukturnya dan bagaimana
menggunakannya.
Pengertian
CSS
CSS dikenal dengan
kepanjangan Cascading Style Sheet, yaitu salah satu elemen yang ada dalam
website yang dapat memperindah tampilan dalam website dan membuat tampilan
website lebih tertata. CSS dapat menghemat banyak pekerjaan karena kita dapat
menggunakannya setiap saat ketika kita membutuhkannya tanpa perlu mengubahnya
lagi jika tampilannya relative sama.
Mengapa
Perlu menggunakan CSS ?
CSS memiliki kelebihan
untuk menetukan gaya tampilan pada website anda, termasuk desain, tata letak,
dan variasi tampilan di layar untuk berbagai perangkat sehingga membuat website
anda berubah tampilan sesuai dengan ukuran layar atau disebut responsive.
Awal mula CSS terbentuk
adalah karena di dalam HTML hanya diciptakan untuk menggambarkan isi dari
halaman web berupa tag dan tidak dapat membuat tampilannya lebih menarik
seperti
<title> ini
adalah judul website </title>
<h2> Ini adalah
heading 2 <h2>
Untuk mengatasi masalah
itu , maka World Wide Web Consortium (W3C) menciptakan CSS, sehingga dapat
menentukan desain dari website yang berisi dokumen.
Struktur
CSS
Untuk mengetikkan CSS,
anda perlu memahami dari struktur yang ada pada CSS tersebut yaitu :
-
Selector adalah elemen yang akan
didefinisikan dalam style css, Selector dapat berupa tag html, maupun berupa
class css dan id css.
-
Property adalah atribut yang berfungsi
untuk mendefinisikan selector, ini digunakan untuk memilih ingin dirubah bagian
apa style nya.
-
Value adalah nilai dari sebuah property
yang digunakan untuk mengatur tampilannya.
Class CSS
Class css adalah suatu
elemen CSS yang didepannya terdapat symbol titik . Contoh :
.judul{color:red;}
Id CSS
Id CSS adalah suatu
elemen CSS yang didepannya terdapat symbol pagar. Contoh :
#body{background-color:blue;}
Kenapa disebut Class
CSS dan ID CSS ?
Hal itu karena ketika
anda ingin menggunakan style tersebut dalam sebuah tag, anda perlu menyertakan
atribut html yaitu class atau id.
Contoh penggunaaan
class CSS :
<h1
class=”judul”></h1>
Contoh penggunaan ID
CSS :
<body
id=”body”></body>
Perbedaan antara ID dan
Class adalah, jika ID merupakan unik css, yaitu css yang biasanya digunakan
sekali dalam suatu tag html, jika class CSS, maka dia digunakan berulang kali
dalam tag html.
Jenis
Jenis CSS
CSS dibagi menjadi 3
jenis jika dibedakan berdasarkan cara peletakannya, yaitu :
-
Inline CSS : CSS yang terdapat pada tag
html, contohnya <p style=”font-size:12px; color:#cecece;”> ini akan
menampilkan tulisan berukuran 12 px dan berwarna abu abu</p> . Pada jenis
CSS ini akan diperlukan banyak style, jika anda ingin membuat tampilan di tag
html lain, maka perlu mendefinisikan style lagi di tag lain.
-
Internal CSS : CSS ini terdapat pada
bagian diantara tag <head></head> pada sebuah dokumen HTML. Pada
Jenis ini, CSS akan didefinisikan sekali di bagian head dapat digunakan
berulang kali asalkan masih di dokumen html ini. Contohnya :
<!DOCTYPE
html>
<html>
<head>
<title></title>
<style
type="text/css">
.paragraf-warning{
color: yellow;
text-align: center;
background: #cecece;
}
</style>
</head>
<body>
<p
class="paragraf-warning">
tulisan ini akan berwarna kuning dan
rata tengah serta warna latar abu abu
</p>
<p>
sedangkan tulisan ini tidak memiliki style css</p>
</body>
</html>
Kelebihan
dari Internal CSS adalah dapat digunakan lagi style nya selama masih dalam
dokumen html yang sama namun kelemahannya adalah jika anda memiliki file html
yang berbeda, anda perlu mendefinisikan lagi CSS di dokumen lain.
-
Eksternal CSS : CSS ini terdapat di file
lain yang tidak ada di dokumen html , jika ingin menggunakannya, anda perlu
memanggil file CSS itu dengan cara mengetikkan <link
rel="stylesheet" type="text/css" href="lokasicss.css">
pada bagian head di html. Untuk penulisan file lokasicss.css itu hanya
diketikkan style nya saja seperti berikut :
.paragraf-warning{
color: yellow;
text-align: center;
background: #cecece;
}
Lalu
simpan dengan file lokasicss.css , dengan cara ini, maka anda dapat
menggunakannya berulang kali di file dokumen html yang berbeda, cukup dengan
menuliskannya pemanggilan file css di bagian head seperti diatas.
Itulah artikel singkat
mengenai Mengenal CSS dalam dunia website, masih banyak
artikel artikel menarik yang akan saya posting selanjutnya, so staytune di
websitelo.blogspot.com. Terimakasih. Salam Coding ^_^