Dimanakah posisi perintahnya untuk menyertakan sebuah external style sheet?

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

Table of Contents Show

Internal CSS
Eksternal CSS
Pada bagian HTML manakah external style sheet diletakkan?
Apa yang dimaksud dengan external style sheet?
Pada bagian apa tag CSS eksternal digunakan?
Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?

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

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

<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>

0 (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 :

See the Pen Contoh Inline CSS by ePlusGo (@eplusgo) on CodePen.

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 :

See the Pen Contoh Inline CSS 2 by ePlusGo (@eplusgo) on CodePen.

Keterangan :

<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>

1 mendefinisikan jenis font.

<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>

2 mendefinisikan warna teks.

<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>

3 mendefinisikan ukuran teks.

<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>

4 mendefinisikan letak tulisan

Internal CSS

Internal CSS adalah kode CSS yang ditulis pada bagian

<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>

5 menggunakan tag

<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>

6. 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 :

See the Pen Contoh Internal CSS by ePlusGo (@eplusgo) on CodePen.

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

<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>

7. Nantinya file CSS tersebut di import dibagian

<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>

5 dalam HTML.

Sebagai contoh, buatlah sebuah file

<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>

9 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

<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>

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

Kedua menggunakan

<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>

<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.

Pada bagian HTML manakah external style sheet diletakkan?

File external CSS umumnya diletakkan setelah bagian <head> di halaman. Metodi ini dinilai lebih mudah dan sederhana daripada menambahkan kode CSS di setiap elemen HTML yang diatur tampilannya.

Apa yang dimaksud dengan external style sheet?

Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.

Pada bagian apa tag CSS eksternal digunakan?

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.