Belajar CSS #2 – Cara Penulisan CSS Ke Html

Tampilan juga memiliki peran penting dalam suatu aplikasi atau website. Untuk mengatur tampilan agar lebih menarik, kita perlu menggunakan CSS. Cara memasukkan Penulisan kode CSS dalam HTML dibagi menjadi tiga cara yaitu internal, inline, dan eksternal. Pembagian ini berdasarkan letak kode CSS tersebut ditulis.

Berikut ini merupakan cara memasukkan kode CSS ke dalam HTML

DAFTAR ISI

1. Internal CSS

Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag <style> di dalam tag <head>. Tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di dalam <body>, namun lebih banyak ditulis di dalam <head>. Cara ini biasa digunakan untuk mengatur style pada halaman website.

Cara memasukkan internal CSS ke dalam HTML

Buka teks editor dan salin kode program berikut:

<!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: red;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Praktek Otodidak</h2>
  <p>Ini adalah contoh paragraf yang memuat isi artikel mengenai <i>internal CSS</i>. Cara ini digunakan untuk mengatur <i>style</i> pada halaman website.</p>
</body>
</html>

Simpan file tersebut dengan ekstensi .html

Terakhir buka web browser dan File nya, maka hasilnya akan terlihat seperti gambar dibawah ini.

2. Eksternal CSS

Eksternal CSS adalah cara menambahkan CSS dengan menggunakan tag <link> yang didefinisikan pada pada bagian <head> dalam dokumen HTML. Eksternal CSS ditulis terpisah dengan kode HTML. Eksternal CSS berekstensi .css. Cara ini memungkinkan kita untuk membuat hanya satu style CSS yang kemudian dapat diterapkan ke semua halaman website. Contoh :

Cara membuat Eksternal.CSS

Buka teks editor dan salin kode program dibawah ini :

p {
    font-family: times;
    line-height: 1.85em;
}

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

h2 {
    font-family: serif;
    color: blue;
}

Save As file tersebut dan beri nama style.css

Cara memasukkan File Eksternal CSS ke dalam HTML

Untuk menggunakan File CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

Pertama menggunakan tag <link>

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

Atau menggunakan @import

<style type="text/css">
@import "style.css";
</style>

Berikut ini contoh Penulisan lengkap Ekternal CSS pada HTML

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>Praktek Otodidak</h2>
<p>Ini adalah contoh paragraf yang memuat isi artikel mengenai <i>Ekternal CSS</i>. Cara ini untuk membuat hanya satu <i>style CSS</i> yang kemudian dapat diterapkan ke semua halaman website. </p>
</body>
</html>

Terakhir buka web browser dan file HTMLnya, maka hasilnya akan terlihat seperti gambar dibawah ini.

3. Inline CSS

Inline CSS adalah cara menambahkan kode CSS yang ditulis langsung pada atribut elemen HTML. Cara ini biasanya digunakan untuk memberi gaya atau style unik pada suatu elemen, karena setiap elemen HTML memiliki atribut style

Cara memasukkan inline CSS ke dalam HTML

Berikut ini contoh Penulisan Inline CSS pada HTML

Salin kode program berikut menggunakan teks editor

<html>
<head>
  <title>Contoh Inline CSS</title>
</head>
<body>
  <h2 style="color:blue;font-family:times">Praktek Otodidak</h2>
  <p style="color:red">Ini adalah contoh paragraf yang memuat isi artikel mengenai <i>inline css</i>. Cara ini biasanya digunakan untuk memberi gaya atau style unik pada suatu <i>elemen</i>, karena setiap elemen HTML memiliki atribut style.</p>
</body>
</html>

Save dengan Ektensi .html.
Setelah itu buka filenya di web browser, maka akan terlihat seperti gambar ini :

Penulisan Komentar di CSS

Komentar digunakan untuk memberikan informasi tambahan pada kode CSS. Cara penulisan komentar di CSS dilakukan dengan tanda /* dan diakhiri dengan */.

Contoh:

/* ini adalah komentar */
/*
  ini adalah komentar
lebih dari satu baris
*/

Selain untuk memberikan informasi tambahan, kita juga bisa menggunakan komentar untuk menaonaktifkan beberapa kode tertentu.

Contoh:

p {
  /* color: yellow; */
  font-family: "Times new roman";
}

Properti color: yellow tidak akan bisa digunakan karena ia ada di dalam komentar.

Begitulah cara memasukkan kode penulisan css ke dalam html. Baca juga artikel selanjutnya yaitu Belajar CSS #3 sintaks dasar CSS

Yuk bantu share !!!