Cara Menambahkan CSS

by

Buat file baru, misalnya dengan nama index.html, lalu gunakan HTML berikut untuk kebutuhan tutorial modul ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar CSS Dasar</title>
</head>
<body>
    <main>
        <section>
            <h1>Hello CSS!!!</h1>
        </section>
    </main>
</body>
</html>

Untuk menambahkan CSS ada dua cara, yaitu Inline style, Style Tag dan External CSS.

Inline style

Contohnya kita akan menambahkan background-color pada element section.

Perhatian Inline style kurang disarankan karena sulit untuk di maintenance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar CSS Dasar</title>
    <link rel="shortcut icon" href="favicon.png">
</head>
<body>
    <main>
        <section style="background-color: red;">
            <h1>Hello CSS!!!</h1>
        </section>
    </main>
</body>
</html>

Style Tag

menggunakan style tag pada head section. Masih dengan contoh diatas, yaitu memberikan background color pada section.

<head>
...
...
...
    <style>
        section{
            background-color: red;
        }
    </style>
</head>

Untuk menunjuk element section pada HTML, digunakan Element CSS selector, pada contoh adalah element section yang diisi dengan atribut background-color.

Rule diatas akan berdampak pada semua element section dalam document tersebut. Contohnya, kita tambahkan element section kedua, berikut hasil akhir file index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar CSS Dasar</title>
    <link rel="shortcut icon" href="favicon.png">
    <style>
        section{
            background-color: red;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h1>Hello CSS!!!</h1>
        </section>
        <section>
            <h1>Ini section kedua</h1>
        </section>        
    </main>
</body>
</html>

Berikut tampilan dari index.html pada chrome browser.

External CSS

Jika css kompleks dan cukup besar, disarankan untuk menggunakan file CSS external. Dari contoh diatas maka buat file baru dengan nama style.css (nama bebas).

Lalu pindah isi style tag pada head ke file css diatas. Buang tag style pada head, lalu tambahkan tag link untuk include css. Berikut hasil akhirnya.

section{
    background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar CSS Dasar</title>
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section>
            <h1>Hello CSS!!!</h1>
        </section>
        <section>
            <h1>Ini section kedua</h1>
        </section>        
    </main>
</body>
</html>
Sharing is caring:

Leave a Comment