Dasar CSS di Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Apa itu CSS?

Singkatan dari 'Cascading Style Sheets'
Mengatur tampilan dan tata letak elemen halaman web

Kita dapat mengatur:
- Properti teks (ukuran font, warna, gaya)
- Ukuran & bentuk elemen HTML
- Penempatan objek

CSS di web

Sebagian besar situs memiliki file CSS;

Dibaca saat halaman dimuat
Kursus ini: gunakan properti style sebagai gantinya

Tangkapan layar beranda Google dengan Chrome Developer Tools terbuka, terlihat tag yang menaut ke stylesheet. Kode menampilkan "<link type="text/css" rel=Stylesheet href=" dan tautan ke lokasi file CSS setelah href

CSS pada elemen HTML

CSS juga dapat dipakai pada elemen HTML

Gunakan properti style pada tag
Menerima pasangan kunci-nilai CSS
- Pernyataan: "property:value; property:value;"

Tangkapan layar HTML dari pelajaran di bab 1 yang membuat beberapa div berukuran berbeda dengan warna latar. Menunjukkan penggunaan properti style pada HTML.

Beberapa styling CSS

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

Gambar dengan judul hitam "Welcome to the website!" dan di bawahnya teks merah lebih besar "Enjoy your stay!"

Mengedit CSS live

Kita bisa mengedit CSS langsung di situs web

Klik kanan elemen > pilih 'Inspect' > ubah nilai CSS
Catatan: hanya lokal (hilang saat refresh)

GIF beranda Google: logo diklik kanan, pilih 'inspect'. Developer Tools terbuka. Lebar gambar diatur ke 100 piksel sehingga ukuran logo mengecil seketika.

CSS di Dash

Argumen style pada komponen Dash
- Menerima CSS sebagai dictionary
Kode sebelumnya di komponen Dash:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]

CSS untuk warna

CSS dapat mengatur:

Warna latar objek (background-color)
Warna teks (color)

Keduanya menerima string (mis. 'red') atau kode RGB (mis. 'rgb(0,0,255)' = biru)

Tabel dua kolom: kiri berisi warna, kanan kode RGB terkait. Ada sel ungu, hijau, merah muda tua, dan biru tua dengan kode RGB di sel sebelahnya.

CSS untuk ukuran

CSS dapat mengatur ukuran lewat properti width dan height

app.layout = [
  # Tambahkan & ubah ukuran logo perusahaan
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

Ukuran CSS sebagai persentase

app.layout = [
  # Tambahkan & ubah ukuran logo perusahaan
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% dari ukuran elemen induk

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly