Mengenal apa itu CSS
Halo teman-teman kembali lagi bersama saya Gim!
Pada artikel kali ini saya akan membahas seputar Cascade Style Sheet atau secara umum yang dikenal yaitu CSS, apa sih fungsi dan kerjanya css ini? Yuk simak artikelnya!
Pendahuluan
Cascade Style Sheet atau yang dikenal dengan CSS ini selalu digunakan oleh para perancang tampilan website atau desaigner website untuk mengatur elemen website mereka seperti memformat layout, text dll. Tujuan dari CSS ini supaya website memiliki tampilan yang ciri khas dan menarik yang sesuai dengan yang diinginkan.
Pada tahun 1996, sebuah konsorsium untuk standarisasi web, dimana W3C (World Wide Web Consortiun), menyusun sebuah proposal untuk membuat CSS dan disitulah akhirnya CSS berjalan.
Manfaat Penggunaan CSS
Menggunakan CSS memudahkan para programmer/desaigner website mengatur style elemen pada halaman web. Seperti misalnya mengatur style font yang dinginkan, anda dapat mengubah font sesuai dengan keinginan anda sendiri, misal anda dapat menggunakan font arial berwarna merah anda cukup menuliskan properti dari elemen font tersebut sekali saja.
Pembahasan
Perhatikan contoh berikut:
Saya mengubah warna font dan jenis font pada heading
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
</head>
<body>
<h1> Warna Heading</h1>
<h1>Warna Heading</h1>
</body>
<html>
Maka jenis text akan seperti ini:
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
Hanya menuliskan satu kali saja! tetapi jika menggunakan font biasa seperti dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face="arial" color="red"> Warna Heading</font></h1>
<h1><font face="arial" color="red"> Warna Heading</font></h1>
</body>
<html>
<h1><font face="arial" color="red"> Warna Heading</font></h1> seperti ini, kita harus menuliskan nya setiap heading,
Dan apabila menggunakan :
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
Otomatis semua heading/h1 terganti dengan hanya satu perintah saja tanpa harus menuliskan disetiap heading.
Struktur Style
Css memiliki style sebagai berikut:
Elemen selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector bisa berupa id, elemen atau nama class. Declarations menerangkan style yang akan dibuat, terdiri dari properti dan value. Properti dapat diisi dengan ukuran, jenis warna, perataan margin dll. Sedangkan value diisi dengan nilai propertinya, misalnya arial untuk font dll. Setiap akhir penulisan value dan properti harus diakhiri dengan titik koma (semicolon) digunakan juga sebagai tanda pemisah antar properti. Apabila titik koma (semicolon) tidak digunakan, maka syntax program tidak dapat berjalan.
Style CSS pun bisa digabungkan, misal kita ingin jenis font dan warna tidak hanya pada heading 1 saja tetapi ingin di heading 2 dan heading 3. Anda dapat menuliskannya seperti ini:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1, h2, h3 {
color: red;
font-family: "arial";
}
</style>
</head>
<body>
<h1>Warna Heading</h1>
<h2>Warna Heading</h2>
<h3>Warna Heading</h3>
</body>
<html>
Maka hasilnya akan jadi seperti ini:
Tidak hanya heading 1 tetapi semua heading yang di inputkan akan terganti. Salah satu kelebihan CSS itu seperti ini, kita tidak perlu menginputkan banyak syntax pada setiap heading/paragrap hanya dengan satu kali perintah saja.
Style juga dapat digunakan menggunakan elemen id, misal sebagai berikut:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
p {
color: black; /*membuat warna text hitam*/
font-family: arial;
background: red; /*membuat warna background merah*/
font-weight: bold;
}
p.group {
color: black; /*membuat warna text hijau*/
font-family: arial;
background: white; /*membuat warna background putih*/
}
p#one {
color: blue;
font-family: 'times new roman';
}
</style>
</head>
<body>
<p>Hello</h1>
<p calss="group">Hello</p>
<p class="group" id="one">Hello</p>
</body>
<html>
Maka hasilnya akan menjadi seperti ini:
p{
}
digunakan untuk mengatur style pada elemen <p>. Sedangkan perintah
p.group{
}
digunakan untuk mengatur style hanya pada <p> yang memiliki perintah dan class bernama group. Sedangkan pada:
p#one {
}
Digunakan untuk mengatur style pada <p> yang memiliki id bernama one. Meskipun terdapat elemen <p class="group" id="one"> tetapi elemen style ini mengikuti p#one bukan nama group karena id lebih di prioritaskan dari pada class.
Berikut pengenalan css secara basic ya. Untuk pembelajaran css mungkin kedepannya akan saya bahas lebih dalam lagi. Simak artikel kami yang lain di beranda ya!
Sekian Terima Kasih!