Menu
CSS merupakan singkatan dari Cascading Style Sheet yang di gunakan untuk mengatur dan memanipulasi tampilan sebuah website.
Cascading Style Sheet (CSS) berfungsi untuk mengatur tata letak sebuah halaman web. Hal yang dapat di lakukan dengan CSS yaitu mengatur warna, jenis tulisan, ukuran tulisan, jarak antara elemen, posisi elemen, penggunaan background gambar atau warna, serta dapat mengatur tampilan website berdasarkan perangkat tertentu (responsive), dan sebagainya.
Untuk menggunakan bahasa CSS pada dokumen HTML dapat di lakukan dengan tiga cara yaitu inline, internal, dan external. Perbedaan dari ketiganya terletak pada cara penulisannya. Dimana, CSS inline di tulis langsung pada elemen HTML dengan menambahkan atribut “style”. Selanjutnya, CSS internal di tulis pada halaman yang sama dengan menggunakan elemen <style> yang di letakkan di antara elemen <head>, dan CSS external di tulis secara terpisah dengan file HTML, di mana file CSS di simpan dengan extensi .css, dan untuk menggunakannya pada file HTML di gunakan elemen <link> dengan menambahkan dua atribut yaitu “rel” untuk menyatakan tipe file relasi dan “href” di isi dengan URL dari file CSS external.
Sebelum Anda mempelajari lebih lanjut bahasa CSS, mari kita lihat bagaimana syntax dari penulisan kode CSS itu sendiri. Terdapat dua bagian dalam penulisan kode CSS yaitu selector dan declaration di mana bagian declaration terdiri dari nama property dan value. Sedangkan selector merupakan nama dari elemen pada bahasa HTML atau nama yang di tentukan sendiri oleh penggunanya dengan menggunakan id atau class. Berikut adalah format syntax kode CSS.
Sumber: https://www.w3schools.com/css/css_syntax.asp
Berikut adalah contoh penulisan kode CSS dengan selector dari nama elemen dasar.
p {
text-align: center;
color: red;
}
Berikut adalah contoh penulisan kode CSS dengan menggunakan id selector. penulisan nama selector id di tandai dengan simbol “#” di depan nama selector.
#para1 {
text-align: center;
color: red;
}
Berikut adalah contoh penulisan kode CSS dengan menggunakan class selector. Penulisan nama selector class di tandai dengan tanda “.” di depan nama selector.
.center {
text-align: center;
color: red;
}
Berikut adalah contoh penggunaan CSS inline yang di gunakan pada heading dan paragraph untuk mengatur warna pada sebuah tulisan.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Judul berwarna biru</h1>
<p style="color:red;">Paragraph berwarna merah</p>
</body>
</html>
Berikut adalah contoh penggunaan CSS internal, di mana kode CSS di letakkan di dalam elemen <head> di definisikan dengan elemen <style>. Dimana, kode berikut mengatur warna background pada halaman web, mengatur warna tulisan pada heading dan paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Ini adalah heading berwarna biru</h1>
<p>Ini adalah paragraph yang berwarna merah</p>
</body>
</html>
Penggunaan CSS external pada HTML di tulis secara terpisah dengan kode HTML. File CSS di simpan dengan nama file styles.css sedangkan file HTML di simpan dengan nama file css.html dan selanjutnya di relasikan dengan menggunakan tag yang di letakkan di antara tag.
Untuk mempraktekkan bagaimana menggunakan CSS eksternal ikuti langkah-langkah berikut:
1. Ketikkan kode CSS berikut ini dan simpan dengan nama file styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Keterangan:
2. Selanjutnya ketikkan kode HTML berikut ini dan simpan dengan nama file index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf</p>
</body>
</html>
Keterangan:
You cannot copy content of this page
