CARA PENGGUNAAN CSS

Haloo semuanyaa!! disini aku mau share metode-metode yang ada di CSS dan juga penggunaan id dan class pada CSS. Yuk, kita langsung masuk ke pengertian dan contohnyaa.


 Metode CSS :

- CSS Inline : menginput kode CSS langsung ke tag HTML

<!DOCTYPE html>
<html>
<body style="background-color:black;">
 
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
 
</body>
</html>

- CSS Internal : digunakan untuk memisahkan kode CSS dari tag HTML tapi masih satu halaman.

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

- CSS External : digunakan untuk mengangkat kode CSS dari tag HTML ke dalam file yang berbeda

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

Dalam contoh diatas, file style.css berisikan semua rule. Contohnya:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

setelah penggunaan CSS inline, internal, dan eksternal. Kita lanjut ke penggunaan id dan class

id bertanda pagar (#) dan class bertanda titik (.)

contoh

1{
color: orange;
font-family: sans-serif;
text-align: center;
}
 
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
}
 
#kotak{
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}

nah, ini contoh penggunaan dr id dan class.













Komentar

Posting Komentar