Menjelajahi konsep CSS

  • 4 menit

Struktur CSS

Jika Anda ingin halaman HTML Menampilkan semua teks di antara h1 tag dengan warna oranye, Anda dapat menggunakan kode CSS yang mengikutinya.

h1 {
    color: orange;
}

Kode CSS di atas dimulai dengan (h1) yang memilih HTML yang ingin Anda gaya. h1 dalam sampel disebut pemilih.

Perhatikan kode di dalam kurung kurawal, color: orange;t menyatakan bagaimana tag yang dipilih h1 harus ditata. Kode CSS dalam kurung kurawal { }, seperti color: orange; disebut deklarasi.

Deklarasi sampel Anda berisi properti, color, yang dipisahkan dari nilai, orange, dengan titik dua (:), dan akhir pengaturan ditandai oleh titik koma (;).

Catatan

Tidak perlu menghafal setiap properti dan nilai yang tersedia di CSS. Ada banyak situs web yang dapat Anda referensikan. Selain itu, alat seperti vscode.dev atau Visual Studio Code menawarkan opsi pelengkapan otomatis yang dapat membantu memandu Anda saat membuat CSS.

Menyematkan file CSS

Cara cepat untuk menambahkan informasi gaya adalah dengan menempatkannya di dalam head tag halaman HTML Anda dengan menggunakan style atribut . Metode ini tidak dianggap sebagai praktik terbaik, tetapi tidak apa-apa untuk digunakan untuk pembelajaran dan pengujian.

Contoh berikut menambahkan <style> tag dengan informasi gaya untuk apa pun yang ditampilkan berwarna abu-abu h1 . Karena itu adalah satu-satunya gaya, sisa HTML ditampilkan dengan gaya default browser.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Saat dilihat di browser, teks "Selamat Datang" di <h1> tag menampilkan abu-abu.

Cuplikan layar halaman H T M L yang dirender menampilkan judul 1 berwarna abu-abu.

Menerapkan gaya ke HTML menggunakan CSS

Saat Anda menambahkan gaya ke Hypertext Markup Language (HTML), sebaiknya lakukan gaya Anda dalam file CSS terpisah. Ketika beberapa file HTML menggunakan CSS yang sama, mereka memiliki tampilan yang konsisten. Plus, memperbarui satu file CSS lebih mudah daripada harus memperbarui setiap file HTML individual.

Untuk mereferensikan file CSS, Anda menggunakan link elemen .

link memiliki dua atribut, rel dan href. rel digunakan untuk mengidentifikasi jenis sumber daya yang Anda referensikan, lembar gaya untuk lembar gaya. href digunakan untuk mengidentifikasi jalur ke file CSS. Jika file CSS Anda berada di folder yang sama dengan file HTML Anda dan memiliki nama style.css, Anda dapat menggunakan yang berikut ini untuk mereferensikannya dari halaman Anda:

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

Sekarang Anda memiliki setidaknya dua file, file .html dan file .css . Contoh sebelumnya akan memiliki file HTML yang ditautkan ke CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>