Cara menambahkan CSS ke Halaman Web

olehEndi •
0
Cara menambahkan CSS ke Halaman Web - Kang Endi

Ada 4 cara untuk menambahkan CSS ke halaman web: deklarasikan sebaris, sematkan ke header dokumen Anda, tautkan ke berkas CSS eksternal, dan impor berkas CSS.

Gaya Sebaris

Dengan gaya sebaris, informasi lembar gaya diterapkan langsung ke elemen HTML. Alih-alih mendefinisikan gaya sekali, lalu menerapkannya pada semua elemen (misalnya tag <p>), Anda menambahkan gaya langsung ke elemen spesifik yang ingin Anda terapkan gayanya.

Contoh:

<p style="color:olive;font-size:24px;">Gaya HTML dengan CSS</p>

Meskipun gaya sebaris dapat menjadi cara yang cepat dan praktis untuk menambahkan gaya ke dokumen HTML, metode ini sebaiknya digunakan dengan bijak.

Menambahkan gaya sebaris di seluruh situs web dapat mempersulit pemeliharaannya. Perubahan kecil dapat menjadi pekerjaan besar jika gaya tersebut telah diterapkan ke banyak halaman di seluruh situs.

Gaya Tertanam

Anda menambahkan semua informasi CSS ke satu bagian dokumen (biasanya bagian atas). Ini memungkinkan Anda untuk memberi gaya pada elemen apa pun di halaman dari satu tempat. Anda melakukannya dengan menyematkan informasi CSS di dalam tag <style> di bagian kepala dokumen Anda.

Misalnya, tempatkan kode berikut di antara tag <head> dokumen HTML Anda:

<style>
  body {
    background-color: darkslategrey;
    color: azure;
    font-size: 1.1em;
  }
  h1 {
    color: coral;
  }
  #intro {
    font-size: 1.3em;
  }
  .colorful {
    color: orange;
  }
</style>

Berikut ini contoh penempatan kode tersebut dalam dokumen HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Saya</title>
    <style>
      body {
        background-color: darkslategrey;
        color: azure;
        font-size: 1.1em;
      }
      h1 {
        color: coral;
      }
      #intro {
        font-size: 1.3em;
      }
      .colorful {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1>Gaya Tertanam</h1>
    <p id="intro">Memungkinkan Anda menentukan gaya untuk keseluruhan dokumen.</p>
    <p class="colorful">Ini memiliki gaya yang diterapkan melalui kelas.</p>
  </body>
</html>

Gaya Eksternal

Lembar gaya eksternal adalah metode paling umum untuk menerapkan gaya ke situs web. Sebagian besar situs web modern menggunakan lembar gaya eksternal untuk menerapkan gaya di seluruh situs ke seluruh situs web.

Gaya eksternal mengacu pada pembuatan berkas terpisah yang berisi semua informasi gaya. Berkas ini kemudian ditautkan dari sebanyak mungkin halaman HTML yang Anda inginkan. Ini seringkali mencakup keseluruhan situs web.

Untuk menambahkan lembar gaya eksternal ke halaman web, gunakan tag <link>, dengan memasukkan URL lembar gaya dalam atribut href, serta rel="stylesheet".

Untuk contoh berikut, saya mengambil gaya dari contoh di atas (yang disematkan), memindahkannya ke lembar gaya eksternal, lalu menautkannya ke berkas tersebut.

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Saya</title>
    <link rel="stylesheet" href="/css/tutorial/contoh.css">
  </head>
  <body>
    <h1>Gaya Tertanam</h1>
    <p id="intro">Memungkinkan Anda menentukan gaya untuk keseluruhan dokumen.</p>
    <p class="colorful">Ini memiliki gaya yang diterapkan melalui kelas.</p>
  </body>
</html>

Jadi, Anda dapat melihat bahwa berkas HTML tersebut tidak lagi berisi kode CSS yang sebenarnya. Kode CSS tersebut terletak di berkas eksternal.

Gaya Impor

Anda juga dapat menggunakan aturan CSS @import untuk mengimpor lembar gaya eksternal.

Untuk melakukannya, gunakan tag <style>.

Anda dapat menggunakan salah satu sintaks berikut:

<style>
  @import "lembar_gaya_impor.css";
  @import url("lembar_gaya_impor.css");
</style>

Di sini, kami menggunakan lembar gaya yang sama seperti pada contoh sebelumnya, tetapi kali ini kami menggunakan aturan @import untuk mengimpor lembar gaya.

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Saya</title>
    <style>
      @import "/css/tutorial/contoh.css";
    </style>
  </head>
  <body>
    <h1>Gaya Tertanam</h1>
    <p id="intro">Memungkinkan Anda menentukan gaya untuk keseluruhan dokumen.</p>
    <p class="colorful">Ini memiliki gaya yang diterapkan melalui kelas.</p>
  </body>
</html>

Perhatikan bahwa metode ini dapat memengaruhi kinerja, dan seringkali lebih efisien menggunakan metode pertama (yaitu dengan tag <link>).

Namun, aturan @import juga dapat digunakan dari dalam lembar gaya eksternal itu sendiri (untuk mengimpor lembar gaya lain ke dalam lembar gaya tersebut) tanpa menimbulkan masalah kinerja yang sama.

{alertInfo}

Anda tidak terbatas hanya pada satu metode penerapan gaya pada dokumen. Anda dapat menggabungkan ketiga metode tersebut jika diperlukan.

Sebagian besar situs web modern menggunakan gaya eksternal untuk sebagian besar (jika tidak semua) gaya mereka.

Namun, ada banyak alasan valid mengapa mereka mungkin juga perlu menggunakan salah satu atau kedua metode lainnya.

Tags:
Lebih baru Lebih lama