MENGENAL CSS DASAR

Oktober 26, 2023 CSS

Apa yang dimaksud dengan CSS?

CSS (Casacading Style Sheets) berisi kumpulan perintah yang digunakan untuk mendesain tampilan halaman situs web. CSS membantu mengubah dan menambahkan baik teks, gambar hingga background sebuah halaman HTML.

Cara menggunakan CSS

Ada beberapa cara atau teknik dalam menggunakan CSS untuk halaman website kita. Di antaranya yaitu:

External CSS

Cara menggunakan External CSS adalah dengan menambahkan tag <link> di bagian head HTML untuk menyisipkan file CSS yang telah kita buat.

Menyisipkan tag <link> di bagian head:

Source code HTML

Pada gambar di atas (halaman HTML) ditambahkan tag link untuk menyisipkan file dengan format CSS. Di halaman HTML bagian body dideklarasikan h2 atau heading 2 bertuliskan "LATIHAN TABEL DI HTML".

Nah, selanjutnya kita dapat membuat style heading 2 tersebut di file lain dengan format CSS.

Berikut source code file CSS

Source code CSS

Pada halaman CSS tag h2 atau heading 2 di-style dengan text align-center

Berikut jika kita buka di browser hasil dari h2 yang kita style menggunakan Eksternal CSS

Hasil Eksternal CSS

Untuk video tutorial source code di atas bisa ditonton video di bawah ini:

Internal CSS
Sedangkan untuk menggunakan teknik Internal CSS sendiri dengan cara menambahkan tag <style> pada bagian head.

Style CSS di bagian head HTML (Internal CSS)

Pada contoh di samping, saya membuat class tengah di bagian head.

Yang mana class tersebut akan dipanggil di bagian yang ingin kita style dengan paragraf center.

Selanjutnya pada bagian body HTML saya akan panggil kelas style tengah untuk h2 atau heading 2 dengan cara di bawah ini
Memanggil style tengah CSS (Internal CSS)

Jika kita show preview hasil dari source code tersebut maka h2 akan tertampil seperti di bawah ini
Hasil Internal CSS

Untuk video tutorial source code di atas dapat dilihat pada video berikut:

Inline CSS

Untuk Inline CSS sendiri disisipkan dalam tag <body> HTML. Tidak seperti Eksternal yang di luar ataupun Internal yang di-style di bagian head.

Perhatikan contoh di bawah ini

Style atau CSS disisipkan di antara tag pembuka dan penutup yang ingin ditambahakan style.

Source Code Inline CSS di HTML

Pada source code di atas apabila dibuka di browser maka hasilnya seperti di bawah ini

Hasil dari Inline CSS

Hasilnya tulisan berpindah ke tengah.

Untuk source code inline CSS dapat simak tutorial di bawah ini:

Sekian materi yang bisa saya sampaikan mengenai HTML dan CSS. Selamat belajar, kawan.

Rencanakan-lah masa depan mu dari hari ini agar di masa depan tidak menyesali hari ini.

Tidak ada komentar

Langganan: Posting Komentar ( Atom )