DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Di dunia pengembangan web, CSS atau Cascading Stylesheet adalah bahasa yang digunakan untuk mendesain dan mempercantik tampilan website. Dalam artikel ini, kita akan membahas cara membuat file CSS dengan langkah-langkah yang mudah dipahami.
Sebelum memulai, pastikan bahwa kamu telah mempunyai text editor seperti Notepad++, Sublime Text, Atom, atau program lainnya. Kamu juga perlu mempersiapkan file HTML sebagai acuan desain yang akan diubah.
Langkah pertama dalam membuat file CSS adalah membuat file kosong dengan ekstensi .css. Misalnya, kamu bisa membuat file dengan nama style.css
. File ini nantinya akan kamu isi dengan kode CSS.
Buka program text editor pilihan kamu dan buat file baru. Save file tersebut dengan nama yang kamu inginkan dan pastikan untuk menambahkan ekstensi .css
di belakang nama file.
Tempatkan file CSS yang telah kamu buat pada folder yang sama dengan file HTML. Ini penting agar file HTML dapat mengenali dan memanggil file CSS tersebut.
Setelah file CSS dibuat dan disimpan di lokasi yang sama dengan file HTML, langkah selanjutnya adalah menghubungkan kedua file tersebut.
Buka file HTML dan tambahkan baris kode berikut ini di antara tag <head>
dan </head>
<link rel="stylesheet" type="text/css" href="style.css">
Ganti "style.css"
dengan nama file CSS kamu jika berbeda.
Sekarang, buka file CSS yang telah kamu buat dan siapkan untuk menulis kode CSS.
Pada CSS, selektor digunakan untuk memilih elemen HTML yang ingin kamu desain. Selektor bisa berupa tag HTML, class, atau id.
Setelah selektor ditentukan, kamu bisa menambahkan deklarasi yang terdiri dari property dan value untuk menetapkan gaya pada elemen yang dipilih. Contoh:
h1 {
color: red;
}
Dalam contoh di atas, h1
adalah selektor yang mengacu pada tag h1 HTML, sedangkan color: red;
adalah properti dan nilai yang menetapkan warna teks menjadi merah.
Itulah langkah-langkah sederhana dalam membuat file CSS. Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat tampilan website atau aplikasi web yang lebih menarik. Selamat mencoba!
Link terkait: