Sintaks CSS

Petik.net - CSS (Cascading Style Sheets) adalah sebuah bahasa pemrograman yang digunakan untuk mendesain tampilan pada website atau halaman web. Berikut ini adalah sintaks CSS:

Struktur Dasar CSS

Struktur dasar CSS terdiri dari selector, property, dan value, yang ditulis dalam bentuk aturan (rule).

selector {
  property: value;
  property: value;
}

Selector CSS

Selector CSS digunakan untuk memilih elemen atau kelompok elemen pada halaman web yang akan diberi gaya tampilan. Berikut ini adalah beberapa contoh selector CSS:

• Selector elemen: memilih elemen pada halaman web. Contohnya: p untuk memilih semua elemen < p > pada halaman web.
• Selector ID: memilih elemen dengan atribut ID pada halaman web. Contohnya: #header untuk memilih elemen dengan ID “header”.
• Selector class: memilih elemen dengan atribut class pada halaman web. Contohnya: .menu untuk memilih elemen dengan class “menu”.

Property dan Value CSS

Property dan value CSS digunakan untuk mendefinisikan gaya tampilan dari elemen yang telah dipilih dengan selector. Property adalah bagian kiri dari aturan (rule), dan value adalah bagian kanan dari aturan. Berikut ini adalah beberapa contoh property dan value CSS:

• Font-size: property untuk mengatur ukuran font. Contohnya: font-size: 16px.
• Color: property untuk mengatur warna teks. Contohnya: color: #000000.
• Background-color: property untuk mengatur warna latar belakang. Contohnya: background-color: #ffffff.
• Margin: property untuk mengatur margin elemen. Contohnya: margin: 10px.
• Padding: property untuk mengatur padding elemen. Contohnya: padding: 10px.

Menulis CSS Internal, Inline, dan Eksternal

CSS dapat ditulis secara internal, inline, dan eksternal pada halaman web.

• CSS Internal: CSS ditulis di dalam tag < style > pada bagian head dari halaman web. Contohnya:

• CSS Inline: CSS ditulis di dalam atribut style pada tag HTML. Contohnya:

Ini adalah sebuah paragraf.

• CSS Eksternal: CSS ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan dengan tag pada bagian head dari halaman web. Contohnya:

Dalam praktiknya, penggunaan CSS eksternal lebih disarankan untuk memudahkan pengelolaan kode dan memisahkan tampilan dari konten pada halaman web.