---
# System prepended metadata

title: Belajar-CSS

---

# Belajar CSS

Cascading Style Sheet atau dikenal dengan CSS merupakan bahasa style sheet yang berguna untuk membantu menyajikan dokumen yang ditulis dengan HTML. CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). Menggunakan CSS kita bisa mengatur warna , ukuran , posisi , background, dan lain lain. Sehingga ada nilai estetika yang ditambahkan dalam tampilan suatu website.

 

### Selektor , Properti dan Value 
 

Pada CSS ada beberapa istilah biasa kita temukan diantara : selector , properti, dan value . Kita mempelajari terlabih dahulu pengertian dari ketiga istilah tersebut.

Selektor adalah metode pengelompokan syntax didalam CSS. Selector juga dapat diartikan sebagai aturan yang digunakan untuk memisahkan beberapa syntax dengan target yang berbeda.

Properti adalah suatu jenis style CSS yang berfungsi memberikan style pada selector yang telah ditentukan. Property pada CSS sangat banyak sekali. Banyak contoh properti css seperti : background-color, color, font-family, font-size, margin, padding dan lain lain.

Value adalah nilai dari property . Dan value harus bersesuaian dengan properti, misalnya properti "font-family" tidak bisa diisi "red" karena "red" adalah value untuk property "color".

Ada bentuk baku penulisan selektor , properti dan value : 

![](https://hackmd.io/_uploads/BkZwJWjbTn.png)
Gambar 1 bentuk baku penulisan selektor , properti , dan value pada css

```
h2 { 
      font-family: sans;
      color: rgb(10, 8, 8);
    }
```

* selektor pada contoh diatas adalah h2
* properti pada contoh diatas adalah font-family dan color
* value pada contoh diatas adalah sans dan rgb(10, 8, 8);

### Cara Penulisan Kode CSS dalam HTML 

‌Internal CSS
Penulisan CSS didalam tag ```<head>``` atau ``<body>`` HTML. Penulisannya ditulis dalam tag ``<style>`` .
    

```
<!DOCTYPE html>
<html>
<head>   
  <style type="text/css">
    p{
      font-family: Helvetica;
      line-height: 2.00 em;
      font-size: 20px;
      color: orange;
     }
    </style>
</head>

<body>
  
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: rgb(10, 8, 8);
    }
  </style>

  <h2>Hello CSS</h2>
  <p>Hello aku bisa CSS</p>
</body>
</html>
```

![](https://hackmd.io/_uploads/HkxcF-ib63.png)
