Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS

Penulisan Kode CSS

Posting Komentar

Penulisan Kode CSS

Format Penulisan atau Syntax CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mengatur tampilan dokumen HTML. Dalam penulisan kode CSS, terdapat beberapa elemen penting yang perlu dipahami, yaitu format penulisan, serta metode penempatan kode CSS dalam dokumen HTML.

  1. Selector: Selector adalah bagian dari kode CSS yang digunakan untuk memilih elemen HTML yang akan diberi gaya. Contoh selector meliputi elemen HTML seperti p, h1, atau kelas dan ID seperti .class atau #id.
  2. Property: Property adalah atribut yang ingin diterapkan pada elemen yang dipilih. Contoh property termasuk color, font-size, background-color, dan margin.
  3. Value: Value adalah nilai yang diberikan untuk property yang ditentukan. Misalnya, untuk property color, nilai dapat berupa red, #ff0000, atau rgb(255, 0, 0).

Contoh Syntax CSS:


selector {
    property: value;
}

Contoh penggunaan:


h1 {
    color: blue;
    font-size: 24px;
}

Metode Penempatan Kode CSS

CSS dapat diterapkan pada dokumen HTML dengan tiga cara utama: inline, internal, dan eksternal.

1. Inline CSS

Inline CSS adalah metode penulisan CSS di dalam atribut style pada elemen HTML tertentu. Ini berguna untuk menerapkan gaya secara langsung pada elemen tanpa mempengaruhi elemen lain.

Contoh Inline CSS:


<p style="color: red; font-size: 20px;">Ini adalah paragraf dengan inline CSS.</p>

2. Internal CSS

Internal CSS adalah metode penulisan CSS di dalam elemen <style> yang diletakkan di dalam <head> dokumen HTML. Ini memungkinkan penulisan banyak gaya untuk elemen di seluruh halaman tanpa harus mengulanginya di setiap elemen.

Contoh Internal CSS:


<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal CSS</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Judul dengan Internal CSS</h1>
    <p>Paragraf di dalam halaman ini.</p>
</body>
</html>

3. Eksternal CSS

Eksternal CSS adalah metode penulisan CSS dalam file terpisah dengan ekstensi .css. File ini kemudian dihubungkan ke dokumen HTML menggunakan elemen <link>. Metode ini sangat efisien untuk mengelola gaya di banyak halaman web.

Contoh Eksternal CSS:

  1. File CSS (styles.css): 
    
body {
    font-family: Arial, sans-serif;
    background-color: white;
}
h1 {
    color: blue;
}
  2. File HTML: 
    
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Judul dengan Eksternal CSS</h1>
    <p>Paragraf di dalam halaman ini.</p>
</body>
</html>

Kesimpulan

Penulisan kode CSS adalah keterampilan penting dalam pengembangan web, yang memungkinkan Anda untuk mendesain dan mengatur tampilan halaman dengan cara yang terstruktur. Dengan memahami format penulisan dan berbagai metode penempatan CSS, Anda dapat membuat halaman web yang lebih menarik dan fungsional.

Posting Komentar untuk "Penulisan Kode CSS"