Tutorial CSS : Cara Memanggil CSS

By Admin
CSS
27 Jul 2022

Jika kamu sudah paham mengenai apa itu css, selajutnya kita akan belajar bagaimana cara memenggil css sehingga bisa digunakan di dalam file html.

Secara umum ada 3 cara memanggil css di dalam html. Yaitu:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Kita akan bahas satu persatu cara mememanggil CSS dengan datail.

Inline CSS

Inline CSS adalah cara memanggil CSS yang paling mudah dan cepat dilakukan. Caranya adalah menulis CSS ke dalam element HTML langsung. Dengan nambahkan tag style="" secara langsung di tag html.

Contoh: Penulisan CSS dengan mode Inline

<div style="background:red;color:white;padding:10px">Div dengan background merah</div>
<div style="background:black;color:white;padding:10px">Div dengan background hitam</div>

Internal CSS

Cara memanggil CSS yang kedua adalah dengan mode internal. Berbeda dengan inline css yang menulis style langsung di dalam element, internal CSS membuat CSS di dalam tag <style></style> dan ditaruh di dalam tag <head></head>.

Contohnya:

<html>
  <head>
    <title>Internal CSS</title>
    <style>
      div {
        background: red;
        color: white;
        padding: 15px;
        margin: 15px;
      }
      .border {
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <div class="border"> Contoh Internal CSS</div>
    <div class="border"> Contoh Internal CSS</div>
    <div class="border"> Contoh Internal CSS</div>
  </body>
</html>

Hasilnya:

Internal CSS lebih efektif dan efisien dibandingkan dengan inline CSS. Dengan internal CSS kamu bisa membuat styling dan bisa dipakai berulangkali di dalam element HTML.

External CSS

Cara memanggil CSS yang terakhir dengan external CSS. External artinya kita memisahkan CSS dari file HTML. Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag <link rel="stylesheet" href="path_ke_css_file" />.

Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.

Contohnya:

Pertama: Misalnya kita punya file .css dengan nama style.css. File ini akan berisi semua style style CSS.

Kedua: Di dalam file HTML kita akan include dengan menggunakan tag <linl />

Isi dari style.css

body {
  background: grey;
}
div {
  background: red;
  color: white;
  padding: 15px;
  margin: 15px;
}
.border {
  border: 1px solid green;
}

Include style.css di dalam index.html

<html>
  <head>
    <title>External CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="border"> Contoh External CSS</div>
    <div class="border"> Contoh External CSS</div>
    <div class="border"> Contoh External CSS</div>
  </body>
</html>

Jika dilihat-lihat, external CSS ini adalah memindahkan internal CSS ke dalam sebuah file.

Oke guys, itulah cara memanggil CSS. Ada 3 yaitu inline, internal, dan external. Semoga bisa dimengerti ya. Selanjutnya kita akan mebahas satu-persatu tag CSS di artikel selanjutnya.

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Admin
5 min read

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Admin
5 min read

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Admin
5 min read

© 2024