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.

Pada CSS eksternal, kode CSS ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan dengan tag < link > pada bagian head dari halaman web. Berikut ini adalah contoh kode CSS eksternal:

Contoh kode CSS dalam file style.css:

p {
  color: #000000;
  font-size: 16px;
}

Contoh kode HTML yang menghubungkan file CSS:

  


  
Ini adalah sebuah paragraf.

Dalam contoh di atas, kode CSS ditulis dalam file terpisah dengan nama style.css. File CSS tersebut dihubungkan dengan tag < link > pada bagian head dari halaman web. Selanjutnya, pada bagian body, tag < p > digunakan untuk menampilkan sebuah paragraf dengan gaya tampilan yang telah ditentukan pada file CSS.

Penggunaan CSS eksternal memungkinkan penggunaan kembali kode CSS pada berbagai halaman web, memungkinkan pengelolaan kode CSS yang lebih mudah, dan mempercepat waktu loading halaman web.

Selain itu, memisahkan tampilan dari konten pada halaman web dengan menggunakan CSS eksternal juga memudahkan perubahan tampilan pada halaman web tanpa mengganggu konten.

Follow us on