Jadi ada 3 metode untuk memasukkan kode CSS ke dalam HTML:

1. Inline 

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML.

<!DOCTYPE html>
<html>
    <head>
        <title> Coding inline </title>
    </head>
<body>
    <h2 style="color:rgb(109, 189, 18); font-family: arial;"> contoh coding inline </h2>
</body>
</html>

2. Internal

dalam internal style sudah terpisah dengan atribut dan berada di tag <head> yang ditandai dengan tag <style>

<!DOCTYPE html>
<html>
<head>
<style>
.neti{Border: solid; Padding: 5px;}
.myHeader {
  background-color: lightblue;
  font-weight: 400;

}
#mybEStie {
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<div  class="myHeader">Pahaaaammmmm</div>
</body>
</html>


3. External

pada external style sudah dipisah filenya tidak tergabung dalam file html melainkan memiliki file sendiri yang ditandai dengan namafile.css untuk memanggil file css pada html digunakan 

<link rel="stylesheet" href="namafile.css">

tag link berada ditag <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tn Amile.</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


Class dan id digunakan untuk mengelompokan format yang akan diberikan kepada suatu elemen. class dan id dibedakan dari id dimana id hanya bisa dipakai satu untuk satu elemen dalam satu tag. sedangkan dengan menggunkan class kalian bisa memberi banyak format untuk elemen dalam satu tag

untuk membuat class ditandai dengan .

.namaClass{
  background-color: lightblue;
  font-weight: 400;
}

sedangkan untuk membuat  id ditandai dengan #

#namaId {
  background-color: lightblue;
  font-weight: 400;
}

dan untuk memasukkan class kedalam html digunakan

<div class="namaClass">Pahaaaammmmm</div>

untuk memasukkan id kedalam html ditandai dengan

id="namaId"

<div  id="namaid">Pahaaaammmmm</div>



Posting Komentar

0 Komentar

Langsung ke konten utama