4 Cara Membuat CSS

Daftar Isi:

4 Cara Membuat CSS
4 Cara Membuat CSS

Video: 4 Cara Membuat CSS

Video: 4 Cara Membuat CSS
Video: 02. Belajar Dasar LibreOffice Writer Merubah User Interface Antarmuka Pengguna. Indonesia 2024, Maret
Anonim

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

Buat CSS Langkah 1
Buat CSS Langkah 1

Langkah 1. Pastikan Anda memiliki pemahaman dasar tentang tag HTML

Anda harus tahu cara kerja tag dan

src

dan

href

atribut.

Buat CSS Langkah 2
Buat CSS Langkah 2

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

  • .
Buat CSS Langkah 3
Buat CSS Langkah 3

Langkah 3. Pelajari tentang nilai untuk masing-masing properti

Semua properti membutuhkan nilai. Untuk

warna

properti, misalnya, Anda dapat menempatkan

merah

nilai.

Buat CSS Langkah 4
Buat CSS Langkah 4

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.

Buat CSS Langkah 5
Buat CSS Langkah 5

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

Buat CSS Langkah 6
Buat CSS Langkah 6

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

Buat CSS Langkah 7
Buat CSS Langkah 7

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

Buat CSS Langkah 8
Buat CSS Langkah 8

Langkah 3. Buat tag di dalam kepala HTML Anda

Ini akan memungkinkan Anda menulis CSS tanpa perlu file terpisah.

Buat CSS Langkah 9
Buat CSS Langkah 9

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.

Buat CSS Langkah 10
Buat CSS Langkah 10

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

Buat CSS Langkah 11
Buat CSS Langkah 11

Langkah 1. Buat file CSS, bukan file HTML dan simpan menggunakan

.css

perpanjangan.

Buka file HTML Anda juga.

Buat CSS Langkah 12
Buat CSS Langkah 12

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.
Buat CSS Langkah 13
Buat CSS Langkah 13

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.

Buat CSS Langkah 14
Buat CSS Langkah 14

Langkah 4. Tetapkan gaya apa yang akan diterima kelas

Ketik nama kelas di file CSS Anda dengan titik (.) sebelumnya (mis.

.kelas

).

Buat CSS Langkah 15
Buat CSS Langkah 15

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

Buat CSS Langkah 16
Buat CSS Langkah 16

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.

Buat CSS Langkah 17
Buat CSS Langkah 17

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.

Buat CSS Langkah 18
Buat CSS Langkah 18

Langkah 3. Hubungi desainer dan pengembang web

Pengalaman dan pengetahuan mereka dapat mengajarkan Anda pengetahuan dan keterampilan yang berharga.

Buat CSS Langkah 19
Buat CSS Langkah 19

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.

Video - Dengan menggunakan layanan ini, beberapa informasi dapat dibagikan dengan YouTube

Direkomendasikan: