Cascading Style Sheet (CSS) adalah sistem untuk pengkodean situs web yang memungkinkan desainer untuk memanipulasi beberapa fitur sekaligus dengan menetapkan elemen tertentu ke grup. Misalnya, dengan menggunakan kode untuk latar belakang situs web, desainer dapat mengubah warna atau gambar latar belakang di semua halaman situs web dengan satu perubahan pada file CSS. Berikut cara membuat CSS untuk situs web dasar.
Langkah
Bagian 1 dari 4: Menulis CSS Sebaris
Langkah 1. Pastikan Anda memiliki pemahaman dasar tentang tag HTML
Anda harus tahu cara kerja tag dan
src
dan
href
atribut.
Langkah 2. Pelajari beberapa properti CSS dasar
Anda akan menemukan bahwa ada sangat banyak properti. Namun, tidak perlu mempelajari semuanya.
-
Beberapa properti CSS dasar yang baik untuk diketahui adalah
warna
dan
font-family
- .
Langkah 3. Pelajari tentang nilai untuk masing-masing properti
Semua properti membutuhkan nilai. Untuk
warna
properti, misalnya, Anda dapat menempatkan
merah
nilai.
Langkah 4. Pelajari tentang
gaya
atribut HTML.
Ini digunakan dalam elemen seperti
href
atau
src
. Untuk menggunakannya, di dalam tanda kutip setelah tanda sama dengan, masukkan atribut CSS, titik dua, lalu nilai properti. Ini dikenal sebagai aturan CSS.
Langkah 5. Pahami bahwa CSS sebaris biasanya tidak digunakan untuk situs web oleh pengembang web profesional
CSS sebaris dapat menambahkan kekacauan yang tidak perlu ke dokumen HTML. Namun, ini adalah cara yang bagus untuk mengenalkan cara kerja CSS.
Bagian 2 dari 4: Menulis CSS Dasar
Langkah 1. Luncurkan program yang ingin Anda gunakan
Seharusnya memungkinkan Anda membuat file HTML dan CSS.
Jika Anda tidak menginstal program khusus, Anda dapat menggunakan Notepad atau editor teks lainnya. Cukup simpan file Anda sebagai file teks dan file CSS
Langkah 2. Buka file HTML untuk situs web Anda
Anda juga harus membukanya dengan editor HTML, jika Anda sudah menginstalnya.
Editor HTML memungkinkan Anda mengedit HTML dan CSS secara bersamaan
Langkah 3. Buat tag di dalam kepala HTML Anda
Ini akan memungkinkan Anda menulis CSS tanpa perlu file terpisah.
Langkah 4. Pilih elemen yang ingin Anda tambahkan gayanya dan ketik nama elemen diikuti dengan kurung kurawal ({})
Untuk membuat kode Anda lebih mudah dibaca, selalu letakkan kurung kurawal kedua pada barisnya sendiri.
Langkah 5. Di antara kurung kurawal, ketik aturan CSS Anda seperti yang akan Anda gunakan
gaya
atribut.
Setiap baris harus diakhiri dengan titik koma (;). Untuk membuat kode Anda dapat dibaca, setiap aturan harus dimulai pada barisnya sendiri dan setiap baris harus diindentasi.
Sangat penting untuk dicatat bahwa gaya ini akan mempengaruhi semua elemen dari jenis yang dipilih pada halaman. Gaya yang lebih spesifik akan dibahas di bagian selanjutnya
Bagian 3 dari 4: CSS Lebih Lanjut
Langkah 1. Buat file CSS, bukan file HTML dan simpan menggunakan
.css
perpanjangan.
Buka file HTML Anda juga.
Langkah 2. Buat tag di kepala HTML Anda
Ini akan memungkinkan Anda untuk menautkan file CSS terpisah ke dokumen HTML Anda. Tag tautan Anda memerlukan tiga atribut:
rel
Tipe
dan
href
-
rel
berarti "hubungan" dan memberi tahu browser apa hubungannya dengan dokumen HTML. Di sini seharusnya memiliki nilai
"lembar gaya"
- .
-
Tipe
memberitahu jenis media apa yang sedang ditautkan. Di sini seharusnya memiliki nilai
"teks/css"
-
href
- di sini digunakan mirip dengan cara digunakan dalam elemen, tetapi di sini harus menautkan ke file CSS. Jika file CSS terletak di folder yang sama dengan file HTML, hanya nama file yang perlu ditulis dalam tanda kutip.
Langkah 3. Pilih elemen dari tipe berbeda yang ingin Anda tambahkan gaya yang sama
Tambah sebuah
kelas
atribut ke elemen-elemen ini dan atur mereka sama dengan nama kelas pilihan Anda. Ini akan memberi elemen Anda gaya yang sama.
Langkah 4. Tetapkan gaya apa yang akan diterima kelas
Ketik nama kelas di file CSS Anda dengan titik (.) sebelumnya (mis.
.kelas
).
Langkah 5. Pilih elemen tunggal yang ingin Anda tambahkan gaya khusus dan tambahkan
Indo
atribut.
Id dibuat dalam CSS menggunakan simbol pound (#) daripada titik.
Id lebih spesifik daripada kelas, jadi id akan menimpa gaya kelas apa pun jika memiliki atribut dengan nilai yang berbeda dari kelas
Bagian 4 dari 4: Belajar Lebih Lanjut
Langkah 1. Kunjungi sekolah w3
Ini adalah situs web resmi yang ditujukan untuk mengajarkan keterampilan pengembangan web. W3 memiliki banyak referensi yang terdaftar untuk HTML dan CSS, serta bahasa web lainnya.
Langkah 2. Temukan situs lain yang secara khusus ditujukan untuk mempelajari dan mengajarkan HTML dan CSS
Situs seperti CSStricks.com secara khusus ditujukan untuk mengajarkan CSS dan keterampilan desain web. Menemukan sumber terpercaya akan membantu Anda dalam perjalanan belajar Anda.
Langkah 3. Hubungi desainer dan pengembang web
Pengalaman dan pengetahuan mereka dapat mengajarkan Anda pengetahuan dan keterampilan yang berharga.
Langkah 4. Lihat kode sumber situs web yang Anda temui
Melihat CSS situs web yang dikembangkan dengan baik dapat menunjukkan kepada Anda cara mendesain bagian-bagian situs web. Menyalinnya sebagai latihan dan mengutak-atik kode dapat membantu Anda mempelajari cara menggunakan atribut CSS yang berbeda.