1. Home
    2. »
  2. Web Design
    3. » Dasar-dasar CSS: Menggayakan Halaman Web Anda

Dasar-dasar CSS: Menggayakan Halaman Web Anda

Web Design
didi Comments

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengendalikan tampilan dan tata letak suatu halaman web. Dengan CSS, Anda dapat mengubah warna teks, ukuran font, tata letak elemen, dan banyak lagi. Tutorial ini akan memberikan pengantar dasar tentang cara menggunakan CSS.

Cara Menambahkan CSS

Ada tiga cara utama untuk menambahkan CSS ke halaman web Anda:

1. Inline Styles

Menambahkan CSS langsung ke elemen HTML menggunakan atribut  style . Cara ini kurang efisien untuk proyek yang lebih besar.

<p style="color: blue; font-size: 16px;">Ini adalah paragraf biru.</p>  

2. Internal Stylesheet

Menambahkan CSS di dalam tag  <style>  di bagian  <head>  dokumen HTML. Cara ini cocok untuk halaman web tunggal.

<!DOCTYPE html>
<html>
<head>
  <title>Tutorial CSS</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Ini adalah paragraf hijau.</p>
</body>
</html>

 

3. External Stylesheet

Membuat file CSS terpisah (biasanya dengan ekstensi  .css ) dan menghubungkannya ke dokumen HTML menggunakan tag  <link> . Cara ini paling efisien untuk proyek yang besar dan memungkinkan penggunaan kembali stylesheet di banyak halaman.

Buat file  style.css :

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

  Hubungkan ke file HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Tutorial CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Ini adalah paragraf merah.</p>
</body>
</html>

 

Selektor CSS

Selektor CSS menentukan elemen HTML mana yang akan dipengaruhi oleh stylesheet. Beberapa selektor umum meliputi:

  • Elemen Selektor: Mempengaruhi semua elemen dengan nama tag tertentu. Contoh:  p ,  h1 ,  div .
  • ID Selektor: Mempengaruhi elemen dengan ID tertentu. ID harus unik di seluruh halaman. Contoh:  #myParagraph . Digunakan dengan atribut  id  pada elemen HTML:  <p id="myParagraph">...</p> .
  • Class Selektor: Mempengaruhi elemen dengan class tertentu. Satu elemen dapat memiliki banyak class. Contoh:  .myClass . Digunakan dengan atribut  class  pada elemen HTML:  <p class="myClass">...</p> .
  • Universal Selektor: Mempengaruhi semua elemen di halaman. Contoh:  * .

Properti CSS

Properti CSS menentukan gaya yang akan diterapkan pada elemen. Contoh properti:

  •  color : Mengatur warna teks.
  •  font-size : Mengatur ukuran font.
  •  background-color : Mengatur warna latar belakang.
  •  text-align : Mengatur perataan teks (left, center, right).
  •  width : Mengatur lebar elemen.
  •  height : Mengatur tinggi elemen.
  •  padding : Mengatur jarak antara konten dan border.
  •  margin : Mengatur jarak antara elemen dan elemen lainnya.

Contoh Lebih Lanjut

Mari kita gabungkan beberapa selektor dan properti:

body {
  background-color: #f0f0f0; /* Latar belakang abu-abu muda */
  font-family: sans-serif; /* Jenis font standar */
}

h1 {
  color: navy; /* Warna biru tua */
  text-align: center; /* Perataan tengah */
}

.container {
  width: 80%;
  margin: 0 auto; /* Perataan tengah secara horizontal */
  padding: 20px;
  background-color: white; /* Latar belakang putih */
  border-radius: 5px; /* Sudut membulat */
}

 

Dengan CSS ini, Anda dapat mengendalikan tampilan keseluruhan halaman web Anda dengan lebih mudah. Ingat untuk menghubungkan file CSS ini (misalnya,  style.css ) ke file HTML Anda menggunakan  <link>  seperti yang dijelaskan di atas.

Ini hanya pengantar dasar CSS. Ada banyak lagi selektor, properti, dan konsep lanjutan yang dapat Anda pelajari untuk membuat desain web yang lebih kompleks dan menarik. Jangan ragu untuk mencari informasi lebih lanjut di internet untuk mempelajari fitur-fitur CSS yang lebih canggih.

Quiz

Tags

Comments