Contoh dan Penjelasan lengkap CSS pada HTML

Inline Style Sheet

Inline CSS ini kurang direkomendasikan karena setiap tag HTML malah harus diberikan style masing-masing. Akan jadi lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Tapi di beberapa situasi inline CSS bisa berguna. Contohnya pada saat kita harus mengubah style untuk 1 elemen saja.
Contoh halaman HTML dengan inline CSS adalah seperti berikut:

<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Judul Besar</h1>
<p style="color:white;">Text Kecil</p>
</body>
</html>

Internal Style Sheet

Internal berarti memasukkan kode CSS ke dalam HTML melalui tag <style> dan di tempatkan di bagian tag <head> HTML. Contoh penggunaan Internal Style Sheet pada HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Ini Contoh Text</p>
</body>
</html>

External Style Sheet

External Style Sheet merupakan metode yang paling banyak digunakan karena keefisiensiannya dan kemudahannya dalam penggunaan. Cara menggunakannya yaitu dengan membuat file baru yang hanya berisi kode format style css yang terpisah dari file HTML aslinya. Kedua file tersebut di sandingkan sehingga dapat terkoneksi dan berjalan sesuai yang diinginkan. Contoh penggunaan metode ini:

Di dalam file style.css:

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

Cara menyandingkan file style.css ke html.index (diletakkan di dalam tag <head>):

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

Class

Jadi secara umum Class dan Id ini adalah sebuah template yang dapat dipanggil untuk langsung diambil formatnya ke dalam halaman HTML. Contoh penggunaan Class dan Id pada file external. Id dideklarasikan dengan cara mengetik # sebelum nama Id tersebut. Sedangkan jika class harus menggunakan . (titik) terlebih dahulu. Id tidak bisa digunakan lebih dari satu kali pada satu tag halaman HTML, sedangkan Class dapat digunakan lebih dari satu kali. Maka dengan itu Class lebih umum digunakan ketimbang Id.

Style CSS:

h1{
    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;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Class dan Id pada HTML | www.malasngoding.com</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Mengenal Class dan Id pada HTML<br/>www.malasngoding.com</h1>
    <!-- contoh penggunaan class -->
    <div class="kotak">kotak 1</div>
    <div class="kotak">kotak 2</div>
    <div class="kotak">kotak 3</div>
 
    <!-- contoh penggunaan id -->
    <div id="kotak">Kotak 4</div>
</body>
</html>

Willy Zaki

Pages