Tutorial CSS: Belajar CSS dari Awal

Pernahkah Anda terpesona oleh keseluruhan desain, warna, tata letak, antarmuka pengguna situs web, dan elemen lain yang tampak menarik? Tapi, apakah Anda bertanya-tanya bagaimana berbagai grafik ditambahkan ke situs web? Hal ini dilakukan melalui bahasa pengkodean yang disebut CSS.

Blog ini membantu Anda memahami apa itu CSS, dasar-dasarnya, kelebihannya, dan bagaimana Anda dapat menggunakan CSS untuk mendesain situs web Anda atau membangun karier dalam mendesain situs web.

Pelajari Kursus Pengembangan Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Apa itu CSS?

Cascading style sheets (CSS) merupakan bagian integral dari sebuah situs web. Ini adalah bahasa pengkodean yang digunakan bersama dengan HTML dan JavaScript untuk merancang seluruh tata letak situs web - halaman web, warna, ukuran font, ruang antara teks, berbagai elemen, dan pemosisian, latar belakang, dan ukuran layarnya.

Istilah cascading mengacu pada gaya yang ditambahkan ke cascade teks induk ke teks berikutnya. CSS memudahkan untuk mendesain dan mengedit halaman web. Sebelum CSS, desainer web harus menyalin tag, font, warna, perataan, dan aturan penataan lainnya secara manual di semua halaman web. Butuh banyak waktu dan usaha. CSS memecahkan masalah ini dengan menyalin aturan penataan dan menerapkannya ke halaman yang berbeda. Bahkan jika aturan gaya satu halaman diubah, modifikasi secara otomatis berlaku untuk halaman lain di situs web. CSS memungkinkan bisnis untuk membuat antarmuka pengguna yang menarik untuk situs web dan aplikasi seluler mereka.

Jelajahi Kursus Rekayasa Perangkat Lunak Populer kami

Berikut ini adalah beberapa keuntungan signifikan lainnya dari CSS:

• Kecepatan yang ditingkatkan:

  CSS menambahkan warna dan gaya ke situs web dan membuatnya lebih ramah pengguna dengan meningkatkan kecepatan memuat halaman web. Selain itu, ia menawarkan pengalaman menjelajah yang lancar, sehingga meningkatkan lalu lintas situs web secara organik.

• Perawatan Mudah:-

  Keuntungan penting lainnya menggunakan CSS untuk situs web Anda adalah ia menawarkan perawatan situs web yang mudah. Anda dapat mengubah tata letak seluruh situs web melalui satu kode baris.

• Kompatibilitas Perangkat: -

  Situs web yang tampaknya memiliki tata letak tertentu di desktop mungkin tidak sama di ponsel atau tablet. Tata letak situs web berubah sesuai dengan ukuran layar. Oleh karena itu, perancang situs web harus memastikan bahwa tata letak tetap konsisten untuk semua perangkat. Hal ini dimungkinkan dengan bantuan CSS.

Apa saja Jenis-Jenis CSS yang Berbeda?

• CSS sebaris:-

  Ini digunakan untuk menata satu elemen dalam HTML daripada seluruh bagian. Para desainer menggunakan CSS sebaris untuk menata elemen tunggal secara berkelanjutan.

• CSS internal:-

  Ini juga disebut CSS tertanam dan tersedia dalam gaya. Ini digunakan pada satu halaman dengan memasukkannya di bagian atas dokumen.

• CSS eksternal:-

  Tidak seperti inline dan internal, CSS eksternal menerapkan aturan gaya yang sama di halaman web yang berbeda. Ini adalah jenis CSS yang paling banyak digunakan karena memudahkan para desainer untuk membuat perubahan dalam satu file daripada menerapkan perubahan pada beberapa file.

Anda dapat mengaitkan berbagai gaya ke dokumen HTML dengan bantuan berbagai jenis CSS. CSS yang mendapat prioritas lebih tinggi adalah gaya sebaris. Ini mengesampingkan aturan penataan di CSS tertanam dan CSS eksternal. Berikutnya adalah CSS internal atau tertanam yang mengesampingkan aturan di lembar eksternal. Akhirnya, muncul CSS eksternal yang tidak dapat menimpa dua lembar gaya lainnya.

Sintaks dalam CSS

Sintaks dalam CSS mengacu pada berbagai aturan gaya atau elemen yang ditafsirkan browser saat halaman web sedang dirancang. Berikut ini adalah tiga elemen inti CSS:

• pemilih:-

  Anda dapat memahami pemilih di CSS sebagai tag dalam HTML yang memilih elemen tunggal tempat aturan penataan gaya diterapkan. Berikut adalah berbagai jenis penyeleksi di CSS:

• Pemilih universal:-

  Itu tidak memilih elemen berdasarkan jenis. Sebaliknya, ia memilih semua elemen dengan nama yang sama.

• Selektor turunan: -

  Selektor ini digunakan untuk menerapkan aturan gaya ke elemen hanya jika ada di dalam elemen tertentu lainnya.

• Pemilih kelas:-

  Seperti namanya, penyeleksi ini menerapkan aturan penataan ke semua elemen kelas tertentu. Misalnya, semua elemen dalam halaman web yang ditandai sebagai H2 harus memiliki ukuran font 12.

• pemilih ID:-

  Selektor ini menerapkan aturan gaya berdasarkan id serupa.

• Properti:-

  Properti CSS mengacu pada berbagai atribut atau fitur tag HTML seperti warna, ukuran, batas, dan perataan.

• Nilai:-

  Ini adalah nilai yang ditetapkan untuk properti CSS. Misalnya, warna atau ukuran tertentu harus memiliki nilai #A2A2.

Kode Warna CSS

Berbagai warna yang digunakan dalam bahasa CSS diberi nilai atau kode tertentu. Ini memungkinkan perancang situs web untuk mengatur warna tertentu untuk elemen seperti latar belakang, teks, atau batas. Berikut ini adalah berbagai format untuk menetapkan nilai warna dalam CSS:

• Kode Hex:-

  Ini adalah enam digit kode yang digunakan untuk mewakili nilai warna. Dua digit awal kode (RR) mewakili nilai warna merah dan diikuti dua nilai untuk Hijau (GG) dan dua nilai terakhir untuk biru (BB). Anda dapat menggunakan nilai heksadesimal dari berbagai perangkat lunak grafis seperti Adobe dan Advanced Paint Brush. Penting untuk dicatat bahwa kode heksadesimal dalam CSS dimulai dengan tanda hash.

• Nilai RGB:-

  Di properti ini, ada nilai khusus untuk masing-masing dari tiga warna, yaitu merah, hijau, dan biru.

Bagaimana Cara Mengatur Warna Latar Belakang dengan CSS?

Dengan menggunakan berbagai properti CSS, Anda dapat mengatur gaya warna latar belakang, gambar, posisi, atau pengguliran gambar pada halaman web. Misalnya, Anda perlu menggunakan properti background-color untuk mengatur warnanya. Berikut adalah bagaimana Anda dapat mengeksekusinya.

<p style=”warna latar belakang: biru;”>. Ini akan memberi teks atau tag tertentu warna latar belakang biru. Demikian pula, Anda perlu menggunakan properti- "background-image" untuk mengatur gambar latar belakang. Untuk mengulang gambar di latar belakang, Anda dapat menggunakan properti "background-repeat".

Berikut ini adalah berbagai properti CSS yang digunakan untuk menata font:

• Font-family mengubah tampilan font.
• Ukuran font digunakan untuk menambah atau mengurangi ukuran teks harga.
• Varian font membuat teks dalam huruf kecil.
• Properti font-style membuat font menjadi tebal atau miring. Berat font membantu menambah atau mengurangi ketebalan teks.

CSS Properties untuk Style Teks dan Gambar

CSS juga memiliki berbagai properti untuk menata teks suatu elemen.

• Properti 'warna' mengatur warna, sedangkan properti arah digunakan untuk menata 'arah' teks.
• Properti text-indent dan text-align digunakan untuk mengatur indentasi teks dan meratakan teks, masing-masing.
• Properti letter-space membantu menambah atau mengurangi spasi di antara kata-kata.
• Anda dapat menggunakan properti text-decoration untuk menggarisbawahi atau mencoret teks.
• Properti text-transform membantu mengonversi teks dari huruf kecil ke huruf besar dan sebaliknya.
• Anda juga dapat menggunakan properti text-shadow untuk mengatur bayangan di sekitar teks.

Gambar halaman web dapat ditata dengan menggunakan properti CSS berikut.

• Properti tinggi dan lebar masing-masing mengatur tinggi dan lebar gambar.
• Anda dapat menggunakan properti perbatasan untuk mengatur lebar batas gambar.
• Properti -moz-opacity membantu memperbaiki transparansi atau keburaman gambar.

Anda juga dapat menyiapkan daftar bernomor, atau poin-poin dengan CSS. Berikut ini adalah daftar properti yang harus Anda ketahui:

• Properti tipe-daftar membantu mengatur bentuk poin, angka, atau penanda lainnya.
• Anda juga dapat menggunakan properti list-style-image alih-alih yang di atas untuk menambahkan gambar, bukan poin atau angka.
• Properti daftar-gaya-posisi mengontrol perataan atau indentasi berbagai titik.

Baca Artikel Populer kami yang terkait dengan Pengembangan Perangkat Lunak

Kesimpulan

Situs web telah menjadi sangat penting bagi bisnis, terutama karena meningkatnya tren dalam pembelian online. Oleh karena itu, bisnis perlu membuat situs web yang secara visual menarik bagi pelanggan. CSS membantu perusahaan mendapatkan lebih banyak pelanggan dengan menarik mereka ke animasi situs web, UI, dan grafik lainnya.

Jika Anda ingin mengejar karir dalam mendesain situs web, Anda dapat mengejar Master of Science in Computer Science Course oleh upGrad.