Penulisan CSS secara internal atau embedded adalah salah metoda dalam menata gaya pada halaman HTML. Penulisan CSS secara internal dilakukan dengan menempatkan kode CSS di dalam bagian tag pada halaman HTML. Selektor HTML, ID maupun Class dapat digunakan sebagai acuan pada kode CSS untuk memberikan gaya halaman HTML tersebut.

Table of Contents Show

Kelebihan dan Kelemahan Penggunaan CSS secara Internal Style Sheet
Pengertian CSS
💻 Mulai Belajar Pemrograman
Cara Membuat CSS
Anatomi CSS
Konsep dalam CSS
Kapan kita menggunakan Internal CSS?
Tag apa untuk menambahkan CSS di internal?
Bagaimana cara menggunakan CSS di HTML?
Berapa metode penggunaan CSS?

Style pada metoda ini akan dieksekusi pertama kali saat halaman tersebut dipanggil. Hal ini karena kode CSS diletakkan pada bagian tag . Kemudian rujukan style pada kode CSS akan langsung diaplikasikan pada tiap tiap elemen tag HTML pada halaman tersebut.

Cara penulisan style secara inline (embedded) style sheet :

CSS

1.  
2.     
5.

Contoh penulisan style secara inline (embedded) pada halaman HTML :

Kode Script :

1.
2.
3.
4.
10.
11.
12.

Belajar Style Sheet Pada CSS

13.

Something usefull here..

14.

One bad chapter doesn't mean your life is over. Turn the page and move on..

15.
16.

Copy Script Print Script

Jika dijalankan akan menghasilkan tampilan :

Kelebihan dan Kelemahan Penggunaan CSS secara Internal Style Sheet

Manfaat yang diperoleh pada penggunaan kode CSS secara internal adalah style atau gaya dapat diaplikasikan untuk beberapa atau banyak elemen HTML. Anda cukup menuliskan satu style tertentu, dan dengan rujukan selektor baik itu tag html, Class ataupun lainnya, style tersebut dapat digunakan oleh tiap-tiap elemen HTML yang memiliki selektor atau class yang sama.

Penggunaan kode CSS secara internal masih cukup efektif saat anda ingin melakukan perubahan gaya pada halaman HTML dimana terdapat elemen yang menggunakan Id atau class yang harus diberikan perubahan tampilan.

Namun, metode CSS secara internal memiliki kelemahan berupa rujukan kode CSS hanya efektif berlaku untuk halaman (file HTML) yang aktif saja. Kode CSS tidak dapat digunakan oleh file HTML yang lainnya. Kemudian kelemahan lainnya adalah waktu akses website akan menjadi lambat. Hal ini disebabkan kode CSS secara inline akan selalu direload setiap kali pengguna mengakses halaman tersebut.

. 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.

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

Kapan kita menggunakan Internal CSS?

2. Internal CSS Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman. Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.