DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT FILE CSS

Tutorial sederhana cara membuat file CSS untuk mempercantik tampilan website atau aplikasi web kamu.

Daftar Isi:

Persiapan Awal
Membuat File CSS Baru
Menghubungkan File CSS dengan ...
Menulis Kode CSS

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.

Persiapan Awal

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.

Membuat File CSS Baru

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.

Membuka Text Editor

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.

Menyimpan File CSS

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.

Menghubungkan File CSS dengan HTML

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.

Menentukan Selektor

Pada CSS, selektor digunakan untuk memilih elemen HTML yang ingin kamu desain. Selektor bisa berupa tag HTML, class, atau id.

Menambahkan Deklarasi

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!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding