3 Cara Penulisan Kode CSS Kedalam HTML

Cara Penulisan CSS

Ada tiga cara penulisan kode CSS, yaitu inline Style, internal Style Sheets dan external Style Sheets. Ketiga penulisan ini bisa anda gunakan sesuai dengan keinginan anda.

tapi dari ketiga cara penempatan kode css ini manakah yang paling mudah?

dalam tutorial belajar css dasar ini saya akan membahas ketiga cara penulisan kode css ini, dan akan memberika contoh serta membedakan ketiga metode ini agar anda dapat menulis kode css dengan cara yang paling mudah.

1. Inline Style

Penulisan kode CSS dengan metode inline Yaitu menuliskan langsung script CSS di file HTML-nya. metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.

contoh Inline Style

<!DOCTYPE html>
<html>
<head>
 <title>Inline Style CSS</title>
</head>
 <body>
 <h1 style="color:red;"> Judul Artikel </h1>
 <h2 style="color:blue;">Lorem ipsum dolor sit amet</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nulla erat dolor, ullamcorper in ultricies eget,
 fermentum rhoncus leo. Curabitur eu mi vitae metus
 posuere laoreet.</p>
 </body>
</html>

dalam contoh ini saya menerapkan kode css kedalam h1 dan h2 menggunakan atribut style untuk mengubah warna text h1 dan h2.

Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan kode CSS langsung pada tag yang ingin diberi style.

seperti yang saya jelaskan pada Pengertian CSS, Cara ini sangat tidak direkomendasikan, karena kita menyatukan antara script css dalam tag html. dan cara ini sangat tidak efektif ketika anda akan melakukan perubahan pada style CSS.

2. Internal Style Sheets

Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head. internal style sheets juga sering disebut sebagai metode Embedded Style Sheets.

contoh inline style sheets

<!DOCTYPE html>
<html>
<head>
 <title>Internal Style CSS</title>
<style type="text/css">
 h1 {
 color:blue;
 }
 </style>
</head>
 <body>
 <h1> Judul Artikel </h1>
 <h2>Lorem ipsum dolor sit amet</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nulla erat dolor, ullamcorper in ultricies eget,
 fermentum rhoncus leo. Curabitur eu mi vitae metus
 posuere laoreet.</p>
 </body>
</html>

pada contoh ini saya membuat tag style di dalam tag head, saya mengubah warna tag h1 menjadi warna biru.

cara dengan internal style sheets ini bisa anda gunakan, karena ini sudah lebih baik dari pada inline style, meskipun code css masih dalam file html namun ini sudah tersusun hanya pada tag head saja,

tapi kelemahan dari metode internal style ini adalah anda harus membuat style pada setiap halaman html, walaupun style halaman satu dan dua sama anda tetap harus membuatnya pada setiap halaman.

3. External Style Sheets

dari ketiga metode penulisan code css mungkin metode External Style Sheets yang paling disarankan, karena external style sheets ini kita membuat sebuah file yang hanya berisi kode css, kemudian file ini kita dipanggil kedalam html dibagian tag head.

File CSS memiliki ekstensi .css misanya file.css cara membuatnya buka text editor, masukan kode dibawah ini kedalamnya, simpan dengan nama file.css simpannya didalam folder

<style type="text/css">
        h1 {
        color:blue;
        }
    </style>

untuk memangil file css ini, html mempunyai dua cara yaitu @import dan tag link

contoh import

<!DOCTYPE html>
<html>
<head>
 <title>External Style CSS</title>
<style type="text/css">
 @import url(file.css);
 </style>
</head>
 <body>
 <h1> Judul Artikel </h1>
 <h2>Lorem ipsum dolor sit amet</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nulla erat dolor, ullamcorper in ultricies eget,
 fermentum rhoncus leo. Curabitur eu mi vitae metus
 posuere laoreet.</p>
 </body>
</html>

download script diatas dan simpan didalam forder tempat anda menyimpan file.css tadi.

dan berikut contoh tag link

<!DOCTYPE html>
<html>
<head>
 <title>External Style CSS</title>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
 <body>
 <h1> Judul Artikel </h1>
 <h2>Lorem ipsum dolor sit amet</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nulla erat dolor, ullamcorper in ultricies eget,
 fermentum rhoncus leo. Curabitur eu mi vitae metus
 posuere laoreet.</p>
 </body>
</html>

dari kedua cara diatas kita bisa saja memakai relatif link untuk memanggil file cssnya, misalnya (css/file.css) atau href=”css/file.css” dimana css ini adalah folder tempat menyimpan file css.

setelah kita mengetahui cara penulisan kode css kedalam html ini menurut saya yang paling bagus adalah menggunakan external style alasannya karena kode css dan html terpisah, dan bisa satu style untuk banyak halaman…

dan juga sangat mudah untuk melakukan perubahan karena kita hanya perlu mengedit code css didalam file css tanpa harus membuka file html.

demi memudahkan dalam pembuatan tutorial CSS dalam blog ini saya akan memakai cara internal style sheets karena dengan demikian kode css dapat langsung dilihat oleh pembaca.

untuk anda sendiri saya sarankan lebih baik memakai external style sheets.

dari ketiga metode diatas cara mana yang paling mudah?

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas