HTML dan CSS adalah hal yang tidak bisa dipisahkan, karena keduanya saling melengkapi. HTML sebagai struktur atau pondasi, sedangkan CSS sebagai media untuk mengatur tampilan HTML. Jadi jika kalian ingin membuat tampilan website yang bagus, kalian harus memahami tentang HTML dan CSS. Dalam HTML dan CSS ini terdapat aturan penulisan yang berbeda. Dan untuk menghubungkan HTML dengan CSS pun ada beberapa cara. Sesuai dengan pembahasan kita kali ini, akan membahas tentang cara menghubungkan CSS dengan HTML.
Dalam menuliskan perintah CSS agar dapat terhubungkan dengan HTML itu ada 3 cara. Masing-masing cara tersebut sebenernya sama saja pada akhirnya, namun ketiga cara ini mempunyai kondisi tertentu. Kita langsung mulai cara prakteknya agar pemahamannya lebih jelas. Mulai dari cara yang pertama yaitu :
1. Inline
Cara inline ini adalah menuliskan perintah CSS dalam tag HTML langsung. Cara terbilang sederhana, karena langsung kita tulis bersamaan dengan HTML, namun kekuranganya adalah apabila perintah CSS banyak, akan terlihat penuh, karena gabungan HTML dan CSS dalam satu file. Terlihat tidak rapih dan akan susah bilang terjadi kesalahan untuk mendeteksinya. Cara penulisanya kira-kira seperti berikut.
<html> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <h1 style="color:red"> Judul </h1> </body> </html>
2.Internal
Cara yang kedua adalah internal. Menulis perintah CSSnya masih dalam satu file dengan HTML, namun tidak seperti inline. Internal ini akan membuat perintah CSSnya terletak pada tag head diatas. Sehingga sudah mulai terpisah dari HTML walaupun masih dalam satu file yang sama. Kekuranganya hampir sama seperti inline, akan membuat terlihat tidak rapih dan susah mencari jika terjadi kesalahan. Cara penulisanya seperti berikut ini.
<html>
<head>
<meta charset=”UTF-8″>
<title>CSS</title>
<style>
h1{color:red}
</style>
</head>
<body>
<h1> Judul </h1>
</body>
</html>
3.Eksternal
Cara yang ketiga adalah eksternal. Cara ini yang paling sering digunakan karena perintah CSS dan HTML berbeda file. Sehingga terlihat rapih dan jelas jika terjadi kesalahan mudah mencari ke file yang mana. Cara penulisanya seperti ini.
<html> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> Judul </h1> </body> </html>
style.css
h1{
color:red;
}
Dan hasil dari ketiga cara tersebut sama yaitu seperti ini.
Begitu kira-kira cara menghubungkan CSS dengan HTML. Semoga bermanfaat.
