Latihan - Mengatur gaya HTML Anda dengan CSS

10 menit

Lembar Gaya Tumpuk (CSS) memungkinkan Anda menentukan tampilan halaman Anda. Ide dasarnya adalah menentukan gaya untuk elemen yang Anda gunakan dalam halaman HTML Anda. Saat elemen HTML menentukan konten Anda, gaya CSS menentukan tampilan konten ini.

Misalnya, Anda dapat menerapkan sudut bulat atau memberikan latar belakang gradien ke elemen, atau Anda dapat menggunakan CSS untuk menentukan tampilan dan respons hyperlink saat berinteraksi dengannya. Anda juga bisa melakukan tata letak halaman dan efek animasi yang canggih.

Anda dapat menerapkan gaya ke elemen tertentu, semua elemen dari jenis tertentu, atau menggunakan kelas untuk menata banyak elemen yang berbeda.

Dalam latihan ini, Anda menerapkan gaya CSS ke elemen halaman HTML dan menambahkan beberapa kode CSS untuk menentukan tema terang dan gelap Anda. Kemudian, Anda memeriksa hasilnya di alat pengembang browser Anda.

CSS eksternal

Di unit sebelumnya tentang HTML, Anda menautkan ke file CSS eksternal dari HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Salah satu manfaat CSS eksternal adalah bahwa beberapa halaman HTML dapat ditautkan ke file CSS yang sama. Jika Anda membuat perubahan pada CSS, gaya Anda diperbarui untuk setiap halaman. Saat Anda menggunakan file HTML untuk konten halaman Anda, file CSS untuk gaya, dan file JavaScript untuk interaksi, ini disebut pemisahan tanggung jawab.

Seperti yang dijelaskan sebelumnya, Anda juga dapat menulis CSS langsung di HTML, yang disebut CSS internal. Bahkan untuk situs web dasar, ada begitu banyak aturan CSS halaman HTML yang dapat menjadi berantakan dengan cepat. Dengan lebih dari satu halaman, CSS yang sama akan sering diulang dan menantang untuk dikelola.

Aturan CSS

Aturan CSS adalah cara Anda menerapkan gaya ke elemen HTML. Aturan CSS memiliki pemilih, yang digunakan untuk mengekspresikan elemen (atau elemen) tempat gaya harus diterapkan.

Di Visual Studio Code, buka main.css file dan masukkan yang berikut ini:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Cuplikan kode ini berisi dua aturan. Setiap aturan memiliki:

Selektor. body dan ul merupakan pemilih dari dua aturan, dan digunakan untuk memilih elemen mana yang diterapkan gaya.
Kurung kurawal pembuka ({).
Daftar deklarasi gaya yang menentukan seperti apa elemen yang dipilih.
Tanda kurung kurawal penutup (}).

Misalnya, pemilih ul memilih <ul> elemen HTML di halaman untuk menerapkan gaya ke dalamnya. Deklarasinya adalah font-family: helvetica, dan menentukan gayanya. Nama properti adalah font-family, dan nilainya adalah helvetica.

Seperti yang Anda lihat selanjutnya, Anda dapat menentukan nama kustom Anda sendiri untuk elemen.

Pemilih

Pemilih ID dan kelas memungkinkan Anda menerapkan gaya ke nama atribut kustom di HTML Anda. Anda menggunakan ID untuk menata satu elemen, sedangkan Anda menggunakan kelas untuk menata beberapa elemen.

Salin kode berikut dan tambahkan ke file CSS Anda. Tempelkan setelah kurung kurawal penutup untuk pemilih ul yang Anda tambahkan sebelumnya.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Kode sebelumnya berisi tiga aturan CSS, dengan dua aturan terakhir menggunakan atribut khusus untuk memilih elemen: .list dan #msg.
- .list adalah pemilih kelas. Setiap elemen HTML yang berisi atribut yang class diatur untuk list mendapatkan gaya yang ditentukan dalam pemilih ini.
- #msg adalah pemilih ID. Elemen HTML yang memiliki atributnya id diatur untuk msg mendapatkan gaya yang ditentukan dalam pemilih ini.
Nama yang Anda gunakan untuk pemilih Anda bisa bersifat arbitrer, selama nama tersebut cocok dengan apa yang telah Anda tetapkan dalam HTML.
Simpan pekerjaan Anda dengan memilih Control+S di Windows atau Command+S di macOS.

Melihat di browser

Untuk mempratinjau menggunakan Visual Studio Code, klik index.html kanan file di Explorer, lalu pilih Buka Di Browser Default.

Penting

Meskipun Anda baru saja mengedit file main.css, untuk melihat pratinjau perubahan, Anda harus memilih file index.html.

Halaman web akan terbuka di browser default Anda.

Apakah gaya font apa yang ingin Anda lihat? Sangat menarik mengetahui bagaimana gaya yang diterapkan pada <body> diwariskan pada elemen <h1>. Kami tidak menentukan apa pun untuk <h1>, tetapi tetap mendapatkan font yang ditentukan pada <body>. Mekanisme pewarisan ini dari elemen induk ke turunannya adalah salah satu aspek utama dari CSS. Namun, <li> elemen memiliki font yang berbeda. Gaya untuk <li> elemen mengambil alih gaya yang ditetapkan karena <body><li> elemen adalah turunan dari <ul> elemen , yang Anda tentukan gayanya.

Saat Anda menggunakan Buka Di Browser Default di Visual Studio Code, akan membuka tab baru di browser setiap kali. Untuk menghindari membuka tab baru, Anda dapat memuat ulang tab yang sudah berisi situs web Anda sebagai gantinya.

Untuk memuat ulang tab, tekan F5, yang merupakan pintasan keyboard refresh, atau tekan Ctrl+R di Windows atau Linux, dan Command+R di Mac.

Menambahkan tema terang

Selanjutnya, tambahkan dukungan untuk tema warna untuk situs web Anda. Mulailah dengan menentukan tema berwarna terang menggunakan kode warna hex.

Di file CSS Anda (main.css), tambahkan kode berikut di akhir file.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
Dalam contoh ini, #000000 menentukan warna hitam untuk warna font, dan #00FF00 menentukan warna hijau untuk warna latar belakang.
Dalam file HTML Anda (index.html), perbarui <body> elemen dengan nama light-themekelas . Sekarang, pemilih kelas untuk tema cahaya menerapkan gaya dengan benar.
```
<body class="light-theme">
```

Melihat di browser

Untuk mempratinjau menggunakan Visual Studio Code, klik index.htmlkanan , lalu pilih Buka Di Browser Default atau muat ulang tab sebelumnya dengan menekan F5.

Perhatikan bahwa tema terang menggunakan latar belakang hijau akan muncul.

Menampilkan CSS yang diterapkan

Pada tampilan browser, buka Alat Pengembang.

Klik kanan halaman dan pilih Periksa, atau pilih pintasan F12 atau Ctrl+Shift+I.
Pilih tab Elemen dan pilih tab Gaya di dalam tab Elemen (harus sudah dipilih secara default).
Arahkan mouse ke berbagai elemen HTML, dan saat Anda memilih beberapa elemen, perhatikan bagaimana alat pengembang menampilkan gaya mana yang diterapkan pada elemen tersebut di tab Gaya .
Pilih elemen <body>. Pastikan light-theme diterapkan.
Pilih elemen daftar <ul> yang tidak diurutkan. Perhatikan font-family: helvetica; gaya kustom, yang mengambil alih gaya untuk elemen <body>.

Untuk mempelajari selengkapnya tentang menampilkan gaya CSS di Alat Pengembang, lihat artikel Mulai menampilkan dan mengubah CSS .

Menambahkan tema gelap

Untuk tema gelap, Anda akan menyiapkan infrastruktur dalam persiapan untuk unit berikutnya, di mana Anda akan mengaktifkan pengalihan tema di halaman web.

Untuk menambahkan dukungan untuk tema gelap ke CSS Anda, gunakan langkah-langkah berikut.

Dalam file CSS Anda (main.css), tambahkan beberapa konstanta ke akar halaman di awal file.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
Pemilih :root mewakili elemen <html> di halaman HTML. Untuk tugas semacam ini, praktik terbaiknya adalah menentukan set variabel CSS global dalam aturan CSS dengan pemilih :root. Dalam contoh ini, Anda telah menentukan tiga variabel warna. Sekarang, Anda dapat menggunakan variabel ini dalam aturan CSS lainnya.
Di akhir file CSS, ganti aturan light-theme dengan kode berikut untuk memperbaruinya dan menambahkan pemilih dark-theme.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
Dalam kode sebelumnya, Anda menentukan dua variabel baru, bg dan fontColor, yang menentukan latar belakang dan warna font. Variabel ini menggunakan kata kunci var untuk mengatur nilai propertinya ke variabel yang sebelumnya ditentukan di pemilih :root Anda.
Selanjutnya, di file CSS Anda, ganti pemilih body saat ini dengan kode berikut.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
Dalam contoh ini, Anda menggunakan pemilih body untuk mengatur background properti dan color dan, karena elemen yang terlihat di halaman web semuanya berada di dalam <body> elemen, mereka mewarisi warna yang diatur pada <body>.
Di file CSS Anda, hapus aturan dengan pemilih #msg dan ul sehingga mereka juga mewarisi font yang sama dari <body>.

Ingatlah untuk menyimpan file Anda dengan memilih Control+S atau Command+S.

File CSS Anda (main.css) sekarang akan terlihat seperti contoh ini:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

Untuk melihat tema gelap, buka file index.html dan edit tema default secara manual di <body> atribut kelas ke tema gelap (dark-theme). Simpan file dan muat ulang halaman di browser.
Edit atribut kelas <body> untuk mengalihkan default kembali ke tema terang.

Di unit berikutnya, Anda menggunakan JavaScript untuk memberikan interaktivitas dan mendukung peralihan tema.

Menggunakan GitHub Copilot untuk menambahkan tema

Anda dapat menggunakan GitHub Copilot di IDE Anda untuk menghasilkan CSS untuk menambahkan tema baru. Anda dapat menyesuaikan perintah untuk menentukan properti untuk menentukan gaya untuk elemen HTML sesuai kebutuhan Anda.

Teks berikut menunjukkan contoh perintah untuk Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot didukung oleh AI, sehingga kejutan dan kesalahan dimungkinkan. Untuk informasi selengkapnya, lihat Tanya Jawab Umum Copilot.

Pelajari selengkapnya tentang GitHub Copilot di Visual Studio Code.

Saran dan Komentar

Apakah halaman ini membantu?