Bagaimana cara menggunakan panggilan css di html?

Question

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

Table of Contents Show

Cara Membuat CSS di HTML
1. CSS sebaris
2. CSS dalam
3. CSS eksternal
Metode Mana yang Harus Digunakan?
Bagaimana cara menulis CSS?
Bagaimana cara kerja CSS jelaskan secara singkat?
Untuk apa CSS digunakan dalam halaman HTML?
Di tag HTML mana kita memasukkan kode program CSS?

Cara Membuat CSS di HTML

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

On line. menggunakan atribut style_ di tag HTML
Intern. gunakan tag <style> di <head> HTML
Luar. gunakan tag <link>_ untuk menautkan file CSS eksternal (di luar HTML)

Mari kita pelajari satu per satu

1. CSS sebaris

CSS yang ditulis dalam atribut style_ dari tag HTML disebut inline CSS. Metode ini hanya memengaruhi satu elemen HTML tempat atribut style dideklarasikan

Kita dapat memasukkan lebih dari satu deklarasi CSS (properti dan nilai) dipisahkan dengan koma (

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

1)

Metode ini memiliki beberapa keterbatasan, salah satunya adalah kita tidak dapat menulis pseudo-class seperti

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

2,

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

3,

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

4 dan seterusnya

Saat membuat aplikasi kita jarang menggunakan cara ini, selain memiliki beberapa keterbatasan, kode CSS tercampur dengan HTML sehingga sulit diatur

Contoh berikut mengubah warna teks dan latar belakang

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

5 menggunakan metode CSS sebaris

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

2. CSS dalam

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

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

Selain itu, kita juga tidak perlu membuat file CSS tersendiri

Namun saat membuat aplikasi, cara ini jarang digunakan karena CSS yang kita tulis tercampur dengan HTML

Contoh berikut menambahkan warna teks dan latar belakang ke semua elemen

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

5 dan menambahkan warna teks yang berbeda ke semua elemen

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

9

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

Atribut

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

0 pada tag <style> tidak perlu ditulis secara eksplisit karena itu adalah nilai default, di belakang layar browser menggunakan atribut secara otomatis

3. CSS eksternal

CSS yang ditulis di luar file HTML disebut CSS eksternal

Cara ini biasa digunakan saat membuat aplikasi, kode CSS yang kita tulis terpisah dari HTML sehingga dapat diatur dengan mudah

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

Pada tag <link>, kita perlu menulis atribut

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

5 yang menunjuk ke file HTML yang ingin kita panggil

Kemudian atribut

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

_6 diisi dengan nilai

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

7 agar browser mengetahui bahwa file yang kita load adalah file CSS

Misalnya, mari buat file CSS dengan nama

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

8 (pastikan file ini memiliki ekstensi

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

9) yang berisi kode CSS berikut

gaya. css

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

_

Kemudian buat file HTML

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

0 di folder yang sama yang berisi kode HTML berikut

indeks. html

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

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

Selain itu, dapat digunakan untuk memanggil CSS yang tersimpan di komputer

Kita juga bisa menggunakan cara ini untuk memanggil CSS pihak ketiga yang tersedia di internet, misalnya Bootstrap

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

Untuk saat ini abaikan atribut

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

_1 dan

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

2

Metode Mana yang Harus Digunakan?

Hindari penggunaan CSS sebaris (dalam atribut style) karena memiliki beberapa batasan dan sulit dibaca ketika kita menulis banyak CSS, kecuali ada alasan khusus

Begitu juga dengan penulisan CSS internal sebaiknya dihindari karena kode CSS tercampur dengan HTML sehingga akan sulit untuk diatur apalagi jika CSS-nya banyak.

CSS internal cocok digunakan saat belajar karena kita bisa menulis CSS dengan bebas dan tidak perlu repot membuat file CSS terpisah

Gunakan CSS eksternal saat kita membuat aplikasi nyata karena CSS dipisahkan dari HTML sehingga aplikasi kita dapat dikelola dengan mudah

Bagaimana cara menulis CSS?

Untuk menulis kode CSS pada HTML dapat dilakukan dengan 3 cara yaitu inline, internal dan eksternal. .

Inline – menulis perintah CSS langsung ke elemen HTML

Internal – menuliskan perintah CSS di bagian HTML..

Eksternal – tulis perintah CSS ke file lain (eksternal)

Bagaimana cara kerja CSS jelaskan secara singkat?

CSS berfungsi saat browser menampilkan dokumen, karena saat itu browser harus menggabungkan isi dokumen dengan gaya informasi atau gaya presentasi dalam halaman situs.

Untuk apa CSS digunakan dalam halaman HTML?

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang ditulis dalam bahasa markup, seperti HTML . CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

Di tag HTML mana kita memasukkan kode program CSS?

Sedangkan CSS internal artinya kita menyisipkan CSS pada bagian tag CSS external adalah kita membuat file khusus dengan extensi. css , lalu masukkan ke dalam dokumen HTML menggunakan a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag a i=17>tag tag

kode html