Cara Menggunakan CSS dalam Website

CSS dalam Pembuatan Web

CSS adalah singkatan dari Cascading Style Sheets. Bahasa sederhananya, CSS ini seperti perias busana untuk halaman web. Jika HTML adalah kerangka dasar dari sebuah halaman web, maka CSS adalah yang memberi warna, gaya, dan tata letak yang menarik pada kerangka itu.

Apa Fungsi CSS?

• Menentukan tampilan: CSS mengatur bagaimana elemen-elemen dalam sebuah halaman web ditampilkan, seperti warna teks, ukuran font, jarak antar elemen, latar belakang, dan banyak lagi.
• Membuat tampilan konsisten: Dengan CSS, kita bisa membuat tampilan yang seragam di seluruh halaman web, sehingga memberikan kesan profesional dan mudah dinavigasi.
• Memisahkan struktur dan tampilan: CSS memungkinkan kita untuk memisahkan struktur konten (HTML) dengan tampilannya. Hal ini membuat kode lebih terorganisir dan mudah dipelihara.
• Responsif: CSS juga sangat penting untuk membuat desain web yang responsif, yaitu desain yang dapat menyesuaikan diri dengan berbagai ukuran layar (desktop, tablet, ponsel).

Contoh Penggunaan CSS:

Misalnya, kamu ingin membuat sebuah paragraf teks berwarna biru dengan font yang lebih besar. Dengan CSS, kamu bisa menambahkan kode seperti ini:

p {
  color: blue;
  font-size: 20px;
}

Kode di atas akan membuat semua paragraf (tag <p>) pada halaman web menjadi berwarna biru dengan ukuran font 20 piksel.

Mengapa CSS Penting?

• Tampilan yang lebih menarik: CSS memungkinkan kita untuk membuat desain web yang lebih kreatif dan menarik.
• Pengalaman pengguna yang lebih baik: Dengan tampilan yang konsisten dan responsif, pengguna akan lebih nyaman saat menjelajahi website.
• Efisiensi: CSS membuat proses pengembangan web menjadi lebih efisien karena kita tidak perlu menulis ulang kode HTML untuk setiap perubahan tampilan.

CSS adalah alat yang sangat penting dalam pembuatan web. Dengan memahami CSS, kamu dapat membuat website yang tidak hanya fungsional, tetapi juga menarik dan mudah digunakan.

Ada banyak sumber belajar CSS yang bisa kamu temukan secara gratis di internet. Beberapa di antaranya adalah:

• W3Schools: Situs yang sangat populer untuk belajar HTML, CSS, dan JavaScript.
• MDN Web Docs: Dokumentasi resmi dari Mozilla Developer Network yang sangat lengkap dan terpercaya.
• FreeCodeCamp: Platform pembelajaran coding gratis yang menawarkan kursus CSS yang interaktif.

p {
  color: blue; /* Mengubah warna teks menjadi biru */
  background-color: lightgray; /* Mengubah warna latar belakang menjadi abu-abu muda */
}

h1 {
  font-size: 36px; /* Mengatur ukuran font menjadi 36 piksel */
  font-family: Arial, sans-serif; /* Mengatur jenis font menjadi Arial atau sans-serif */
}

div {
  padding: 20px; /* Menambahkan jarak antara konten dengan batas elemen */
  margin: 10px; /* Menambahkan jarak antara elemen dengan elemen lainnya */
}

img:hover {
  opacity: 0.7; /* Mengurangi opacity saat mouse di atas gambar */
}

@media (max-width: 768px) {
  /* Gaya CSS untuk layar dengan lebar maksimal 768 piksel */
  nav ul {
    flex-direction: column; /* Mengubah arah tampilan menu menjadi vertikal */
  }
}

div {
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Membuat grid dengan 3 kolom yang sama lebar */
  gap: 20px; /* Menambahkan jarak antar elemen dalam grid */
}

button {
  background-color: #4CAF50; /* Warna latar belakang */
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;   

}

button:hover {
  background-color:   

 #3e8e41; /* Warna latar belakang saat dihover */
}