Sejauh ini kita hanya bekerja dengan HTML saja.

Meskipun HTML merupakan tulang punggung konten web, kebutuhan untuk kustomisasi dan daya tarik visual membawa kita ke Cascading Style Sheets (CSS). CSS adalah standar web yang dirancang untuk memberi gaya pada elemen HTML, yang memungkinkan kita untuk mengontrol presentasi dan tata letak halaman web kita..

Contoh penulisan CSS

Berikut adalah contoh dasar aturan penulisan CSS yang memberi style pada tag paragraf:

p {
  color: red;
}
  • Tulisan (p): Mengidentifikasi elemen HTML yang akan diterapkan aturannya.
  • Blok Deklarasi ({ color: red; }): Berisi satu atau lebih deklarasi. Setiap deklarasi terdiri dari properti (color) dan itu memiliki sebuah nilai/value (red).

Menerapkan CSS

CSS dapat diterapkan dalam beberapa cara:

1. Inline Style

<p style="color: red;">This is a red paragraph.</p>

2. Internal Style (Dengan dokumen HTML)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3. External Style (Dalam File CSS terpisah)

<head>
  <link href="style.css" rel="stylesheet" />
</head>

Beberapa Aturan CSS

Kamu dapat mencantumkan beberapa aturan CSS untuk menerapkan style yang berbeda ke berbagai elemen:

p {
  color: red;
}

a {
  color: blue;
}

A selector dapat menargetkan satu atau lebih item:

p, a {
  color: red;
}

Selectors dan Spasi

Selectors dapat menargetkan satu atau lebih item, dan spasi tidak signifikan dalam CSS:

p,a {
  color: red;}

p,a {              color: red;
         }

Latihan Terbaik

  • Setiap deklarasi di blok deklarasi harus diakhiri dengan titik koma (;).
  • Indentasi dan spasi yang tepat meningkatkan pembacaan tetapi tidak begitu diperlukan oleh browser.

Memahami konsep-konsep mendasar ini akan membekali kamu untuk meningkatkan aspek visual dokumen HTML dengan menggunakan CSS. Saat kamu mempelajarinya lebih dalam, maka kamu akan menemukan fleksibilitas dan kekuatan yang dihadirkan CSS untuk pengembangan web.

Categorized in:

CSS, Fundamentals, HTML,