CSS 2-2

<p>hello</p>

Jika ingin teks hello di atas menjadi merah, sintaks CSS yang tepat untuk itu adalah...

• p{

  text-color: red;

  }

• .p{

  color: red;

  }

• p{

  color: merah;

  }

• p{

  color: red;

  }

Answer explanation

property CSS untuk mengubah warna teks HTML adalah color. Nilainya ditulis dalam bahasa inggris, misal merah -> red, biru -> blue. Atau ditulis kode hex, misal putih -> #FFFFFF, hitam -> #000000

Untuk bisa menambahkan background foto di belakang tulisan seperti pada Gambar, kita bisa menggunakan property CSS...

• background-color

• background-img

• background-image

• background-photo

Answer explanation

Property CSS yang digunakan untuk menambahkan background foto atau gambar di belakang tulisan atau konten lainnya adalah background image

p{

color: red;

}

Mana yang merupakan selector?

• p

• color

• red

• color: red

Answer explanation

p{

color: red;

}

p -> disebut selector

color -> disebut property

red -> disebut nilai/value

<p>ini judul</p>

Hasil teks dari elemen tag <p> biasanya lebih kecil. Kita bisa mengubah ukuran teks nya menjadi lebih besar dengan property....

• text-size

• font-size

• font-weight

• text-weight

Answer explanation

Property CSS untuk mengatur ukuran teks di HTML adalah font-size.

Sedangkan font-weight digunakan untuk mengatur ketebalan huruf (reguler, light, bold, dll)

Kita bisa membuat box dengan sudut yang melengkung seperti pada Gambar dengan property CSS ....

• border

• padding

• margin

• border-radius

Answer explanation

Property CSS untuk melengkungkan sudut box adalah border-radius.

Border -> membuat garis tepi box

margin -> jarak di sekitar box

padding -> jarak di dalam box

<p id="progress" style="width: 0"> 0% </p>

Jika ingin mengubah width pada elemen tag <p id="progress"> menjadi 100%, kita bisa mengubahnya dari javascript dengan sintaks....

• document.getElementById('progress').width = 100%;

• document.getElementById('progress').width = 100px;

• document.getElementById('progress').style.width = '100%';
• document.querySelector('#progress').style.width = '100px';

Answer explanation

format mengubah style CSS dari javascript yang benar:

document.getElementById("id-nya").style.[property css] = "[nilai nya]";

contoh:

mengubah lebar elemen (property CSS -> width)

document.getElementById("progress").style.width = "100%";

<div class="header"> Welcome to my page </p>

Jika ingin menambahkan background foto di samping pada elemen tag <p> di atas, maka sintaks CSS yang tepat adalah ....

notes: nama file foto -> foggy.jpg

• #header{

  background-image: url("foggy.jpg");

  }

• .header{

  background-image: url("foggy.jpg");

  }

• #header{

  background-image: "foggy.jpg";

  }

• .header{

  background-image: "foggy.jpg";

  }