belajar html part3

Pada bagian ketiga ini, kita akan belajar tentang cara untuk menambahkan gaya pada halaman web menggunakan CSS (Cascading Style Sheets).

  1. Penambahan CSS
    CSS dapat ditambahkan ke halaman web dengan menggunakan tiga cara:
    • Menambahkan CSS langsung ke elemen HTML dengan menggunakan atribut "style"
    • Menambahkan CSS ke dalam file yang sama dengan HTML dengan menggunakan elemen <style>
    • Menambahkan CSS ke dalam file terpisah dengan ekstensi .css dan menyertakannya pada halaman HTML dengan menggunakan elemen <link>
      • contoh: 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!DOCTYPE html>
      <html>
        <head>
          <title>Judul Halaman</title>
          <link rel="stylesheet" href="path/to/styles.css">
        </head>
        <body>
          <p style="color: blue;">Ini adalah paragraf dengan gaya yang ditambahkan langsung.</p>
          <p class="highlight">Ini adalah paragraf dengan gaya yang ditambahkan melalui file CSS.</p>
        </body>
      </html>
      HTML
  2. Selector dan Properties
    CSS menggunakan selector untuk menentukan elemen HTML yang akan diberi gaya. Kemudian menggunakan properties untuk menentukan gaya yang diterapkan pada elemen tersebut.
    contoh:
    1
    2
    3
    4
    5
    6
    7
    8
    p {
      color: blue;
      font-size: 16px;
    }

    .highlight {
      background-color: yellow;
    }
    CSS
    3.Cascade dan Inheritance
    CSS memiliki mekanisme yang disebut Cascade yang berarti gaya yang diterapkan pada suatu elemen dapat diubah atau ditimpa oleh gaya yang diterapkan pada elemen anaknya. Sedangkan Inheritance berarti gaya yang diterapkan pada elemen induk dapat diterapkan juga pada elemen anaknya.
    1
    2
    3
    4
    <div class="container">
      <p>Ini adalah paragraf dalam container.</p>
      <p class="highlight">Ini adalah paragraf dengan gaya yang ditambahkan melalui file CSS.</p>
    </div>
    HTML
    1
    2
    3
    4
    5
    6
    7
    8
    .container p {
      color: blue;
    }

    .highlight {
      background-color: yellow;
    }

    CSS
    Dalam contoh di atas, semua paragraf yang berada dalam container akan berwarna biru karena gaya yang diterapkan pada elemen .container p, sementara paragraf yang memiliki class .highlight akan berwarna biru dan berlatar belakang kuning karena gaya yang diterapkan pada class .highlight akan menimpa gaya yang diterapkan pada elemen .container p.
    Itulah dasar-dasar dari CSS. Anda dapat mengeksplorasi lebih jauh tentang CSS dengan menambahkan gaya yang lebih kompleks seperti layout, animasi, dll.

Ingatlah bahwa CSS merupakan cara untuk menambahkan gaya pada halaman web yang sudah dibuat dengan HTML. Sehingga sangat penting untuk menguasai HTML sebelum belajar CSS.

Namun dengan menguasai dasar-dasar dari CSS, Anda sudah dapat menambahkan gaya yang menarik dan profesional pada halaman web Anda.

Selamat belajar dan semoga sukses dalam pembuatan halaman web Anda!

References

front end web dev
#html #css
belajar html part3
https://blogworlds.github.io/2023/01/15/belajar-html-part3/
Author
hamzahxou
Posted on
15 Januari 2023
Licensed under