Daftar Konten
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan halaman web. Dalam tutorial ini, saya akan memberikan pengantar dasar tentang CSS dan cara menggunakannya untuk mengubah tampilan halaman web.
1. Persiapan
Sebelum memulai membuat stylesheet CSS, pastikan bahwa Anda sudah memiliki dokumen HTML. Anda dapat membuat stylesheet CSS di dalam tag <head> dokumen HTML menggunakan tag <style>.
2. Pengenalan CSS
Setiap stylesheet CSS terdiri dari aturan CSS. Aturan CSS terdiri dari selector dan deklarasi. Selector digunakan untuk memilih elemen HTML yang akan diubah tampilannya, sedangkan deklarasi berisi properti CSS dan nilainya. Berikut adalah contoh aturan CSS yang sederhana:
h1 {
color: red;
font-size: 32px;
}
Pada contoh di atas, selector h1 digunakan untuk memilih heading level 1 (h1). Selanjutnya, deklarasi color: red mengubah warna teks menjadi merah, dan font-size: 32px mengubah ukuran font menjadi 32 piksel
3. Menggunakan Class dan ID
Selain menggunakan tag HTML sebagai selector, Anda juga dapat menggunakan class dan ID. Class digunakan untuk memilih beberapa elemen HTML, sedangkan ID digunakan untuk memilih elemen HTML yang unik. Berikut adalah contoh penggunaan class dan ID dalam CSS:
/* Memilih semua elemen dengan class "kelas" */
.kelas {
color: blue;
}
/* Memilih elemen dengan ID "id" */
#id {
color: green;
}
4. Menambahkan Background dan Border
Anda juga dapat menambahkan background dan border pada elemen HTML menggunakan CSS. Berikut adalah contoh kode CSS untuk menambahkan background dan border pada elemen:
/* Menambahkan background pada elemen */ background-color: lightblue; /* Menambahkan border pada elemen */ border: 2px solid black;
5. Menambahkan Animasi
CSS juga dapat digunakan untuk menambahkan animasi pada elemen HTML. Anda dapat menggunakan properti animation untuk menentukan animasi dan durasinya. Berikut adalah contoh kode CSS untuk menambahkan animasi:
/* Menambahkan animasi */
animation: example 2s linear infinite;
/* Menentukan animasi */
@keyframes example {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
6. Menyimpan dan Menerapkan Stylesheet
Setelah selesai membuat stylesheet CSS, simpan file dengan ekstensi .css. Kemudian, hubungkan stylesheet dengan dokumen HTML dengan menambahkan tag <link> di dalam tag <head>. Berikut adalah contoh kode untuk menghubungkan stylesheet dengan dokumen HTML:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Itulah tutorial dasar tentang CSS. Sekarang Anda dapat mencoba mengubah tampilan halaman web dengan menggunakan stylesheet CSS. Anda juga dapat mengembangkan pengetahuan CSS Anda dengan mencari lebih banyak.
