Cara menggunakan contoh css

Question

Jika Anda baru belajar CSS, Anda mungkin kebingungan dimana CSS harus ditulis.

Table of Contents Show

Cara Membuat CSS di HTML
1. CSS Inline
2. CSS Internal
3. CSS Eksternal
Metode Mana yang Harus Digunakan?
Bagaimana penggunaan CSS?
Apa yang dimaksud dengan CSS dan berikan contohnya?
Bagaimana format penulisan CSS dalam program HTML?
Bagaimana cara menambahkan CSS pada dokumen HTML?

Apakah ditulis di file yang sama dengan HTML? Atau, ditulis di file CSS terpisah?

Oleh karena itu mari kita pelajari bebera metode untuk membuat CSS di HTML, agar kita bisa memilih metode yang tepat.

Cara Membuat CSS di HTML
1. CSS Inline
2. CSS Internal
3. CSS Ekternal
Metode Mana yang Harus Digunakan?

Cara Membuat CSS di HTML

Ada 3 cara yang bisa kita gunakan untuk menambahkan CSS ke HTML:

Inline: menggunakan atribut style di dalam tag HTML.
Internal: mengguankan tag <style> di <head> HTML.
Eksternal: menggunakan tag <link> untuk menautkan file CSS eksternal (di luar HTML).

Mari kita pelajari satu per satu.

1. CSS Inline

CSS yang ditulis dalam atribut style tag HTML disebut CSS inline (sebaris). Metode ini hanya mempengaruhi satu elemen HTML dimana atribut style dideklarasikan.

Kita bisa memasukkan lebih dari satu deklarasi CSS (properti dan nilai) dipisahkan dengan titik koma (;).

Metode ini memiliki beberapa keterbatasan, salah satunya kita tidak bisa menulis pseudo-class seperti :visited, :hover, :active dan sebagainya.

Saat membuat aplikasi kita jarang menggunakan metode ini, selain memiliki beberapa keterbatasan, kode CSS bercampur dengan HTML sehingga sulit dikelola.

Contoh berikut mengubah warna teks dan latar belakang <h2> menggunakan metode CSS inline:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
  </head>
  <body>
    <h2 style="color: blue; background-color: bisque">Belajar CSS</h2>
  </body>
</html>

2. CSS Internal

CSS yang ditulis di dalam tag <head> yang dibungkus dengan tag <style> disebut CSS internal. Metode ini dapat digunakan untuk mengatur gaya satu hamalan HTML.

CSS internal biasanya digunakan saat kita belajar CSS karena kita bisa menulis CSS dengan bebas tanpa batasan seperti metode sebelumnya.

Selain itu, kita juga tidak perlu ribet membuat file CSS terpisah.

Tapi, saat membuat aplikasi, metode ini juga jarang digunakan karena CSS yang kita tulis bercampur dengan HTML.

Contoh berikut menambahkan warna teks dan latar belakang ke semua elemen <h2> dan menambahkan warna teks yang berbeda ke semua elemen <p>:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <style>
      h2 {
        color: blue;
        background-color: bisque;
      }
      p {
        color: gray;
      }
    </style>
  </head>
  <body>
    <h2>Belajar CSS</h2>
    <p>Saya sedang belajar CSS</p>
  </body>
</html>

Atribut type="text/css" di dalam tag <style> tidak perlu ditulis secara eksplisit karena itu adalah nilai default-nya, dibelakang layar browser menggunakan atribut tersebut secara otomatis.

3. CSS Eksternal

CSS yang ditulis di luar file HTML disebut CSS eksternal.

Metode inilah yang umum digunakan saat membuat aplikasi, kode CSS yang kita tulis terpisah dari HTML sehingga dapat dikelola dengan mudah.

Kita bisa memanggil CSS eksternal menggunakan tag <link> di dalam tag <head>.

Di dalam tag <link> kita perlu menulis atribut href yang mengarah ke file HTML yang ingin dipanggil.

Kemudian atribut rel diisi dengan nilai stylesheet agar browser mengetahui bahwa file yang kita muat adalah file CSS.

Contoh, mari kita buat file CSS dengan nama style.css (pastikan file ini memiliki ekstensi .css) yang berisi kode CSS berikut:

h2 {
  color: blue;
  background-color: bisque;
}
p {
  color: gray;
}

Kemudian buat file HTML index.html di folder yang sama berisi kode HTML berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <h2>Belajar CSS</h2>
    <p>Saya sedang belajar CSS</p>
  </body>
</html>

Coba buka file HTML tersebut di browser, nanti file CSS yang kita sematkan otomatis diterapkan ke halaman tersebut.

Selain bisa digunakan untuk memanggil CSS yang tersimpan di komputer.

Metode ini juga bisa kita gunakan untuk memanggil CSS pihak ketiga yang ada di internet, misalnya Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <link
      href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h2>Belajar CSS</h2>
    <p>Saya sedang belajar CSS</p>
  </body>
</html>

Untuk saat ini abaikan atribut integrity dan crossorigin.

Metode Mana yang Harus Digunakan?

Hindari penggunaan CSS inline (di dalam atribut style) karena memiliki beberapa batasan dan sulit di baca ketika CSS yang kita tulis banyak, kecuali ada alasan tertentu.

Begitu pula menulis CSS internal, sebaiknya dihindari karena kode CSS bercampur dengan HTML sehingga akan sulit dikelola apalagi kalau CSS-nya banyak.

CSS internal cocok digunakan ketika belajar karena kita bisa menulis CSS dengan leluasa dan tak perlu repot membuat file CSS terpisah.

Gunakan CSS eksternal ketika kita membuat aplikasi sungguhan karena CSS terpisah dengan HTML sehingga aplikasi kita dapat dikelola dengan mudah.

Bagaimana penggunaan CSS?

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website.

Apa yang dimaksud dengan CSS dan berikan contohnya?

CSS adalah teknologi yang berfungsi untuk memperindah tampilan website. CSS adalah singkatan dari Cascading Style Sheets yang sudah digunakan selama bertahun-tahun. Pada sebuah website , selalu terdapat dokumen, gambar, dan teks.

Bagaimana format penulisan CSS dalam program HTML?

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal..

Inline – menuliskan perintah CSS langsung pada elemen HTML..

Internal – menuliskan perintah CSS di bagian <head> HTML..

Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal).

Bagaimana cara menambahkan CSS pada dokumen HTML?

Ada tiga cara untuk menambahkan CSS ke dalam dokumen HTML: Inline – menggunakan atribut style dalam elemen HTML. Internal – menggunakan elemen <style> di dalam elemen <head> Eksternal – menggunakan elemen <link> di dalam elemen <head>

kode css Bagaimana penggunaan CSS? CSS adalah CSS Cheat Sheet