Untuk menggunakan efek pada css eksternal pada sebuah tag atribut yang digunakan adalah

. Nah, pada artikel kali ini, kita akan mempelajari lebih dalam mengenai pembuatan dan konsep CSS. CSS merupakan bahasa yang sangat penting pada pembuatan aplikasi berbasis website.

Table of Contents Show

Pengertian CSS
💻 Mulai Belajar Pemrograman
Cara Membuat CSS
Anatomi CSS
Konsep dalam CSS
Pada bagian apa tag CSS eksternal digunakan?
Tag apa untuk menambahkan CSS di internal?
Sebutkan apa saja 3 penulisan CSS?
Apa bedanya CSS internal dan eksternal?

Sebelumnya, kita telah mempelajari tentang HTML, mulai dari cara menggunakannya, manfaatnya, dan praktik pembuatan sebuah halaman website. Kali ini, kita akan melanjutkan pembelajaran dari artikel sebelumnya. Jika kamu belum membaca atau sudah lupa dengan artikel sebelumnya, silakan baca kembali ya.

Pengertian CSS

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Sebelumnya, apakah kalian tahu, apa itu CSS? Itu adalah singkatan dari Cascading Style Sheets, artinya sebuah bahasa sederhana yang digunakan untuk menambahkan gaya/styling (misalnya, font, warna, spasi) ke sebuah halaman website. Jika diibaratkan, HTML merupakan sebuah kerangka, CSS ini bertindak sebagai kulit/penutup dari kerangka tersebut.

Perlu diingat ya, CSS bukan sebuah bahasa pemrograman sehingga tidak bisa menjalankan logika-logika yang secara umum ada di bahasa pemrograman.

Cara Membuat CSS

Sebelum kita melihat hasil dari kode CSS, kita harus memiliki kode HTML terlebih dahulu. CSS ini tidak akan bekerja tanpa adanya file HTML. Ada tiga cara dalam menggunakan CSS pada file HTML.

Inline
Metode ini digunakan dengan cara memasukkan file css ke dalam tag HTML secara langsung.
Internal
Metode ini menggunakan CSS dengan tag <style> pada file html. Dengan ini, kita bisa memisahkan antara tag html dengan kode css tetapi masih dalam satu file yang sama.
External
Metode ini digunakan dengan cara memisahkan file html dan juga file css. Untuk memasukkan file css ke dalam html bisa menggunakan kode html seperti berikut.

Dengan metode ini, kita bisa memasukkan beberapa file css ke dalam satu file html saja.

Anatomi CSS

Dalam membuat kode CSS, ada beberapa format yang harus diikuti.

Selector: Bagian penanda elemen yang akan diubah style-nya.
Declaration: Kumpulan dari pasangan properti dan nilainya.
Property: Karakteristik elemen yang akan diubah.
Value: Nilai dari karakteristik tersebut.

Konsep dalam CSS

The Cascade (Rule Order)
Pada konsep ini, artinya aturan styling mengalir dari atas ke bawah. Jadi, jika terdapat selector dan properti yang sama, maka properti terakhir yang akan di-apply menjadi sebuah styling. Contohnya seperti ini.

The Cascade
CSS
1
2
3
4
5
6
7
h1 {
color: green;
}

h1 {
color: red;
}

Bisa dilihat bahwa kode di atas memiliki dua selector dan atribute yang sama. Perhatikan bahwa value yang diterapkan pada halaman website adalah value yang terakhir.
Specificity
Pada konsep ini, selector yang paling spesifik akan lebih dulu menerapkan styling, dibandingkan dengan selector yang dideklarasikan terlebih dahulu.

Specificity
1
2
3
4
5
6
7
8
9
10
11
body h1 {

color: green;

}

h1 {

color: red;

}

Berdasarkan kode di atas, selector body h1 akan diimplementasikan karena lebih spesifik dibandingkan dengan selector h1 saja.
Inheritance
CSS dapat mewarisi properti style tertentu pada elemen yang dikandungnya. Misalnya, style yang ditembakkan untuk elemen body akan diterapkan ke semua elemen HTML secara turun-temurun, seperti properti font-family, color, dan font-size.

Inheritance
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <title>Website Pertama</title>
  <style>
    body {
     font-family: Arial;
    }
  </style>
</head>

<body>
  <h1>Halo Indonesia 👋</h1>
</body>
</html>

Artinya, CSS akan diterapkan pada anak dari sebuah elemen, meskipun elemen tersebut tidak memiliki value yang diatur oleh CSS.
Group Selector
Dengan group selector, kita bisa menggabungkan aturan yang sama untuk beberapa selector yang berbeda. Kita dapat meminimalkan penulisan kode berulang dengan menggunakan tanda koma (,) sebagai pemisah antar selector.

Group Selector
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

21
22
23
24
25
26
<!DOCTYPE html>

<html>

<head>

  <title>Website Pertama</title>
<style>
h1, p {
color: blue;

   }

  </style>

</head>

<body>

  <h1>Halo Indonesia 👋</h1>

  <p>Belajar CSS</p>

</body>

</html>

Bisa dilihat di bawah bahwa elemen h1 dan p memiliki font berwarna biru.

Nah, jadi itulah beberapa konsep yang ada pada CSS. Dengan pemahaman konsep dasar ini, seharusnya kita sebagai developer menjadi semakin lebih mudah dalam menggunakan CSS untuk membuat sebuah website. Untuk belajar lebih lanjut mengenai CSS kamu dapat mempelajari salah satu kelas yang ada di dicoding, yaitu kelas

Pada bagian apa tag CSS eksternal digunakan?

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.

Tag apa untuk menambahkan CSS di internal?

Internal CSS adalah kode CSS yang ditulis di dalam tag <style> .

Sebutkan apa saja 3 penulisan CSS?

Adapun 3 macam CSS ini adalah sebagai berikut:.

External CSS. CSS eksternal ini berisi dokumen CSS terpisah yang hanya mencakup style properti dengan atribut-atribut seperti class, ID, heading, dan lain sebagainya. ... .

2. Inline CSS. ... .

3. Internal CSS..

Apa bedanya CSS internal dan eksternal?

Lebih jelasnya, Eksternal CSS adalah kode CSS yang dideklarasikan dalam file .css terpisah dari file HTML yang menggunakannya. Eksternal CSS juga dapat digunakan bersama-sama dengan file HTML lain alias global & reusable. Sedangkan Internal CSS dideklarasikan didalam tag <style></style> suatu file HTML.