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>

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

Advertisements

Leave a Reply

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close