Iklan

Cara Menambahkan CSS Pada HTML | Tutorial HTML & CSS

Cara Menambahkan CSS Pada HTML

Pada kesempatan kali ini Adjie007 akan membahas tentang cara menambahkan CSS pada HTML. Ini merupakan cara dasar dalam pembuatan website, fungsi CSS sendiri adalah untuk memperindah atau mempercantik tampilan suatu website itu sendiri.

Cara Menambahkan CSS Pada HTML

Nah berikut ini ada 3 cara menambahkan CSS di dalam HTML yaitu:

  1. Embed CSS
  2. Inline CSS
  3. External CSS

Sebelum memulai, ada beberapa hal yang harus disiapkan seperti editor web, kalian bisa menggunakan Adobe Dreamweaver atau Notepad ++.

1. Menggunakan Element atau Embed CSS

Embed CSS adalah menambahkan kode CSS pada HTML dengan cara menuliskan kode tersebut di dalam tag <style>. Tag <style> biasanya ditulis di dalam tag <head>, bisa juga di pasang pada <body>.

Contoh :

<html>
<!DOCTYPE html>
<html>
<head>
  <title>Embed CSS</title>
  <style type="text/css">
   h2{ 
     color: orange;
    }
  </style>
</head>

<body>
  <style type="text/css">
  p{
    font-family: sans;
    color: #333;
   }
  </style>
  <h2>Judul</h2>
  <p>Isi Artikel</p>
</body>
</html>

2. Menggunakan Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis.

Contohnya:

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

<body>
  <h2 style = "color: orange">Judul</h2>
  <p style = "font-family: sans; color: #333"> Isi Artikel</p>
</body>
</html>

3. Menggunakan External CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML, kemudian kode di simpan dengan ekstensi .css.

Kita akan membuat file css kemudian simpan dengan nama style.css, untuk contohnya seperti berikut :

<html>
p {
  font-family: sans; 
  color: #333;
  }
h2 {
   color: orange;
   }

Selanjutnya kita perlu pada HTMLnya kita perlu memanggilnya file CSS yang sudah kita buat.

Contoh :

<html>
<!DOCTYPE html>
<html>
<head>
  <title>External CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Contoh pemanggilan file css ke dalam HTML -->
</head>

<body>
  <h2>Judul</h2>
  <p> Isi Artikel</p>
</body>
</html>

Demikian tutorial sederhana yang dapat kami sampaikan pada kalian, terima kasih.

Iklan

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.