Untuk memberikan warna berbeda pada halaman HTML kita bisa melakukan styling menggunakan CSS atau Cascade Style Sheets. Dalam menggunakan CSS harus tau dulu apa itu selector dan jenis dari selector

Selector

Macam macam seletor dalam penggunakan Javascript yaitu

  1. by id -> #property-id { ... }
  2. by class name -> .property-class { ... }
  3. by element -> input { ... }, body { ... } dan lain-lain.
  4. by attribut -> [target] { ... }
  5. by all element -> * { ... }

Menggunakan CSS

Untuk menggunakan CSS kita bisa menggunakan 2 cara yaitu dengan inline style dan include style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<style>
    #default {
        color: black;
        background-color: red;
    }
</style>
</head>
<body>
    <!-- inline style -->
    <p style="color: red; background-color: black;">Ini text warna merah dan backgroud hitam</p>

    <hr>

    <p id="default">Ini text warna hitam dan backgrond merah</p>
</body>
</html>

CSS Framework

Selain kita bisa membuat sendiri style-nya kita juga bisa menggunakan framework yang ada seperti:

  1. Bootstrap
  2. Materialize
  3. Fondation
  4. Semantic UI
  5. Dan masih banyak lagi