Home Uncategories CSS : MENGGUNAKAN STYLE CSS PADA HTML

CSS : MENGGUNAKAN STYLE CSS PADA HTML

Tutorial CSS untuk Tampilan Web HTML





Selamat pagi siang sore malam dimanapun kalian berada. Disini aku akan menjelaskan bagaimana cara mengaplikasikan CSS untuk membuat tampilan website kalian menjadi kece. Sebelum melakukan hal tersebut, kalian harus tahu terlebih dahulu apa itu CSS dan apa saja cara untuk menggunakan CSS pada web HTML.

Apa Itu CSS?

CSS adalah salah satu styling language (bahasa desain), bagian dari markup language yang dapat “mewarnai” atau mendesain suatu halaman website. CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML.

Untuk mendesain tampilan ada tiga metode CSS yang bisa kalian pakai.

1. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Inline CSS ini tergolong kurang efisien jika dibandingkan jenis CSS untuk website lainnya. Karena dalam satu atribut memiliki style tersendiri, jadi inline cocok untuk website yang tidak membutuhkan banyak baris coding.

Contoh    : 

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Inline CSS</title>
  </head>

  <body>
    <h2 style="color: yellow; font-family: sans-serif">Judul Artikel</h2>
    <p style="color: green">
      ini adalah paragraf. Seperti namanya, inline CSS adalah kode CSS yang
      ditulis langsung dalam file HTML.
    </p>
  </body>
</html>


Hasilnya akan seperti berikut    :



Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal.

Akan tetapi, Inline CSS jarang digunakan pada proyek-proyek besar, karena cukup menyulitkan mengelola kode jika sudah teralau banyak menggunakan inline.

2. Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga dikenal dengan sebutan Embeded CSS.

Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>. Namun kebanyakan orang menulisnya di dalam <head>.

Contoh    :


<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Internal CSS</title>
    <!-- penulisan internal css dalam tag head -->
    <style type="text/css">
      p {
        font-family: serif;
        line-height: 1.75em;
        font-size: 18px;
      }
      I {
        font-family: sans;
        color: orange;
      }
    </style>
  </head>

  <body>
    <!-- penulisan internal css dalam tag body -->
    <style type="text/css">
      h2 {
        font-family: sans;
        color: #333;
      }
    </style>
    <h2>Ini judul artikel</h2>
    <p>
      Ini adalah paragraf yang memuat isi artikel. <br />Paragraf ini hanya
      untuk percobaan saja. <br />Percobaan untuk mendemokan
      <i>internal css</i>.
    </p>
  </body>
</html>


Hasilnya    :


Penulisan css di dalam tag <head> akan lebih dahulu dibaca dibandingkan di <body>. Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir.

3. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi .css.
Contoh    :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Di kode HTML itu, kita menggunakan kode

<link rel="stylesheet" type="text/css" href="style-ku.css">

gunanya untuk link HTML kepada CSS, sehingga kita bisa mengedit tampilan HTML.

Kemudian pada file styleku.css sebagai contoh, di isi seperti ini    :

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}
Kemudian akan menampilkan hasil    :

Kita sudah belajar cara menulis CSS di HTML. Ada tiga cara yang digunakan, yakni Internal CSS, Eksternal CSS, dan Inline CSS.

Gunakanlah sesuai pada tempatnya dan pastikan hanya menggunakan satu saja biar konsisten.

Terimakasih sudah membaca blog ku, silakan kalian praktekkan di vscode kalian. Semoga berjalan lancar, see u on the next study session~! 🤩

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

LATEST POSTS