Cara Menggunakan CSS dan Mengitegrasikannya dengan HTML

Developer web menggunakan CSS untuk mempercantik tampilan/design web yang mereka kembangkan. CSS biasanyaa di integrasikan atau digunakan pada file HTML. Cara Menggunakan CSS dapat dilakukan dengan 2 cara, yaitu :

  1. Membuat file CSS terpisah dengan file HTML
  2. Membuat CSS langsung di dalam file HTML.

Sebenarnya tidak ada perbedaan yang signifikan diantara dua penggunaan diatas, cuma perbedaannya akan terlihat ketika sudah mendevelop web yang menggunakan banyak class HTML. Untuk itu pada artikel ini saya akan membahas cara penggunaan CSS di HTML berdasarkan dua point diatas.

Membuat file CSS terpisah dengan file HTML

Cara ini adalah cara yang paling umum digunakan oleh para developer web, karna akan gampang jika file CSS tersebut digunakan lagi di file HTML lainnya. Jadi dengan kata lain, 1 file CSS bisa digunakan oleh banyak file HTML.

Baca juga : Membuat tabel keren di HTML dengan library DataTables

Contoh :

Ada satu buah file CSS yang dibuat dengan nama style.css, seperti dbawah ini :

p{
    background-color: aqua;
}

Untuk dapat menggunakan file CSS diatas, di dalam file HTML, terlebih dahulu kalian harus pangil class style.css, cara pemanggilannya menggunakan tagline <link> :

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

Dibawah ini saya buat dua buah file HTML yang menggunakan CSS diatas :

MainPage.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    <p>Ini adalah page pertama putuguna.com HTML</p>
</body>
</html>

Hasilnya akan menjadi seperti ini :

output page 1

SecondPage.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    <p>Ini adalah page kedua putuguna.com HTML</p>
</body>
</html>

Maka page yang kedua inipun akan menghasilkan output yang sama dengan MainPage.html :

output page 2

Kenapa hasilnya bisa sama diantara kedua page html tersebut?

Ya karena kedua file HTML tersebut menggunakan file CSS yang sama. Dan juga kedua file HTML tersebut menggunakan tagline CSS yang sama yaitu <p> (tagline untuk paragraf).

Baca juga : Tutorial CRUD data menggunakan PHP dan MySQL

Bagaimana jika ingin membuat hasil yang berbeda diantara kedua file HTML tapi masih menggunakan file CSS yang sama?

Gampang. Kalian tinggal buatkan id baru untuk  tagline <p>. Id tersebut akan kita gunakan di file SecondPage.html. Lihat code berikut ini :

p{
    background-color: aqua;
}

#page2 p{
    background-color: blue;
}

Cara menggunakan file CSS tersebut di file SecondPage.html harus menggunakan tagline div, seperti berikut :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>

    <div id="page2">
        <p>Ini adalah page kedua putuguna.com HTML</p>
    </div>

</body>
</html>

Kenapa harus ada tagline <p> didalam <div>, kan sudah ada id #page2 di dalam tagline <div>?

Untuk menjawabnya pertama kita lihat kembali id #page2 di file CSS nya, disana ditulis #page2 p{…}, ya kan? Artinya semua tagline <p> (tagline paragraf) yang ada didalam <div id=”page2″ hasilnya akan sama (sesuai dengan yang di set di CSS #page2 p{…}).

Baca juga : Membuat kotak kosong dengan bintang di Java

Case 1 :

Jika kamu menulis sebuah tulisan didalam tagline <div=”page2″ tanpa adanya tagline <p>, maka tidak akan ada perubahan apa-apa pada text.

Case 2 :

Jika id pada file CSS hanya ditulis #page2{…} (tanpa p), barulah akan ada perubahan pada text yang kamu buat, meskipun tanpa tagline <p>.

Membuat CSS Langsung di file HTML

Cara ini bisa dibilang tidak ribet, cukup hanya dengan satu file HTML, kalian sudah bisa mengintegrasikan CSS di dalamnya. Syarat penggunaan CSS didalam file HTML adalah CSS harus ditulis didalam tagline <style>.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS dalam HTML</title>
    
    <!-- Start file css-->
    <style>
        p{
            background-color: aqua;
        }
    </style>
    <!-- end file css-->
    
</head>
<body>
    <p>Ini adalah CSS didalam file HTML putuguna.com</p>
</body>
</html>

Perbedaan point ini dan pertama adalah terletak pada penempatan CSS nya saja. Jika pada point pertama file CSS nya terpisah, maka point kedua ini file CSS nya digabung satu class dengan file HTML. Proses-proses integrasi CSS lainnya sama seperti pada point pertama.

Mana yang lebih bagus digunakan?

Saran saya sih yang point pertama yaitu dengan membuat file terpisah. Keuntungannya, kode kalian terlihat rapi dan terstruktur. Dan juga jika nanti kalian membuat project besar yang menggunakan banyak page dan class, maka akan lebih mudah untuk mengatur-atur tampilannya (tidak ribet).

Tapi jika kalian males membuat file terpisah, yasudah tidak apa-apa menulis CSS didalam file HTML nya hehe.

Sekian, semoga bermanfaat untuk pembelajaran.

(Visited 82 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini