Belajar CSS

Cara Penulisan Kode CSS

CSS, Tutorial - 15 Sep 2020

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal.

  • Inline – menuliskan perintah CSS langsung pada elemen HTML
  • Internal – menuliskan perintah CSS di bagian <head> HTML
  • Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal)

Adapun cara yang direkomendasikan untuk menambahkan kode CSS dalam HTML ialah dengan menuliskan perintah kode CSS pada file yang terpisah (ekternal).

Daftar Isi Tutup
1 Inline CSS
2 Internal CSS
3 Eksternal CSS
4 Kesimpulan
4.1 Related

Inline CSS

Inline CSS adalah kode CSS yang ditulis pada elemen HTML menggunakan atribut style. Contoh berikut ini kita akan memberikan warna background pada body, h2 (heading) dan p (paragraf).

<html>
<head>
   <title>Contoh Inline CSS</title>
</head>
<body style="background-color:yellow;">
   <h2 style="background-color:red;">Ini adalah Judul</h2>
   <p style="background-color:green;">Ini sebuah paragraf.</p>
</body>
</html>

Hasilnya :

Contoh lainnya, kita akan mengganti jenis font tulisan, warna dan ukuran tulisan serta letak tulisan.

<html>
<head>
   <title>Inline CSS</title>
</head>
<body>
   <h1 style="font-family:verdana;text-align:center;">Ini adalah Judul</h1>
   <p style="font-family:arial;color:red;font-size:20px;">Ini Paragraf.</p>
</body>
</html>

Hasilnya :

Keterangan :

  • font-family mendefinisikan jenis font.
  • color mendefinisikan warna teks.
  • font-size mendefinisikan ukuran teks.
  • text-align mendefinisikan letak tulisan

Internal CSS

Internal CSS adalah kode CSS yang ditulis pada bagian <head> menggunakan tag <style>. Internal CSS sering disebut juga dengan Embeded CSS. Contohnya :

<head>
<head>
   <title>Internal CSS</title>
   <style type="text/css">
      body {background-color:yellow;}
      p {color:blue;}
   </style>
</head>
<body>
   <h1>Ini adalah judul</h1>
   <p>Ini contoh paragraf</p>
</body>
</html>

Hasilnya :

Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah (file berbeda) dengan kode HTML. Dengan ekternal CSS, file CSS ditulis terpisah dan disimpan dalam ektensi .css. Nantinya file CSS tersebut di import dibagian <head> dalam HTML.

Sebagai contoh, buatlah sebuah file style.css kemudian tuliskan kode CSS berikut :

body {
   background-color:yellow;
}

h1 {
   color:red;
}

p {
   color:blue;
}

Selanjutnya, file CSS diatas harus Anda import ke dalam HTML. Terdapat 2 cara untuk meng-import file kode CSS ke dalam HTML. Pertama menggunakan tag <link>

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

Kedua menggunakan @import

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

Silakan pilih salah satu dari kedua cara diatas. Berikut penulisan pada HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>Ini Contoh Judul</h2>
    <p>Ini adalah paragraf</p>
</body>
</html>

Kesimpulan

Demikian tutorial cara menuliskan kode CSS dalam HTML. Silakan gunakan ketiga cara diatas sesuai kebutuhan Anda. Selanjutnya Anda dapat belajar cara menuliskan kode warna dengan CSS.

Selamat mencoba dan semoga bermanfaat.




  • Tutorial Dasar CSS
    CSS Style
    CSS Advanced
    Referensi CSS Lainnya

  • Populer

  • Terbaru