Ada 3 cara atau metode untuk menggabungkan css dengan html, yaitu inline, internal, external. Dan kita akan mempelajarinya satu persatu. Untuk tutorial penggunaan dan pengembangan CSS nya akan di bahas di tutorial selanjut nya. Dalam tutorial ini kita hanya akan membahas dan mempelajari penggabungan css ke dalam html.

Inline css style

Inline css merupakan metode menyisipkan syntax atau kode css ke dalam html dengan di letakkan atau di tambahkan sebaris dengan

syntax html yang akan menggunakan style css.

Misalnya kita membuat sebuah kalimat menggunakan tag <h1>, maka style css atau syntax css nya kita tambahkan di dalam tag h1 pembuka seperti syntax di bawah :

<h1>
BELAJAR DI CARIKODE</h1>
<br/>

<h1 style="color:red;">
BELAJAR DI CARIKODE</h1>
<br/>

<h1 style="color:yellow;">
BELAJAR DI CARIKODE</h1>
<br/>

<h1 style="color:green;font-size:30pt">
BELAJAR DI CARIKODE</h1>
<br/>

<h1>BELAJAR DI CARIKODE</h1> <br/>

<h1 style="color:red;">BELAJAR DI CARIKODE</h1> <br/>

<h1 style="color:yellow;">BELAJAR DI CARIKODE</h1> <br/>

<h1 style="color:green;font-size:30pt">BELAJAR DI CARIKODE</h1> <br/>

Internal CSS Style

Internal CSS style adalah penyisipan syntax css di dalam satu file dengan file html yang ingin menggunakan CSS.tapi bukan berada di dalam tag <h1> atau tag lainnya . Tapi di letakkan di tengah-tengah tag head(di anjurkan agar code lebih tersusun dan terlihat rapi). Dan menambahkan tag style.
Berikut juga sudah saya sertakan gambar nya agar sahabat carikode lebih mudah belajar dan memahami nya.

<html>
<head>
<style type="text/css">
	h1{
		color:red;
	}
	h2{
		color:blue;
	}
	h3{
		color:yellow;
		font-size:30pt;
	}
	b{
		background:red;
	}
</style>
</head>
<body>
	<h1>
BELAJAR DI CARIKODE</h1>
<br/>
	<h2>
BELAJAR DI CARIKODE</h2>
<br/>
	<h3>
BELAJAR DI CARIKODE</h3>
<br/>
	<h4>
BELAJAR DI CARIKODE</h4>
<br/>
	<b>SELAMAT BELAJAR</b>
</body>

</html>

<html>

<head>

h1{

color:red;

}

h2{

color:blue;

}

h3{

color:yellow;

font-size:30pt;

}

background:red;

}

</style>

</head>

<body>

<h1>BELAJAR DI CARIKODE</h1><br/>

<h2>BELAJAR DI CARIKODE</h2><br/>

<h3>BELAJAR DI CARIKODE</h3><br/>

<h4>BELAJAR DI CARIKODE</h4><br/>

<b>SELAMAT BELAJAR</b>

</body>

</html>

External CSS Style

External CSS style adalah penyisipan syntax css ke dalam HTML dengan menyisipkan link sumber file CSS nya kedalam tag style di html. Pertama yang kita butuhkan untuk belajar css external adalah kita harus mempersiapkan 2 buah file, file yang pertama save dengan ekstensi html dan file satu nya lagi save dengan ekstensi css.
file dengan ekstensi .css

body{
	background:green;
}
h1{
	color:red;
}
h2{
	color:blue;
}
h3{
	color:yellow;
	font-size:30pt;
}
b{
	background:red;
}

body{

background:green;

}

h1{

color:red;

}

h2{

color:blue;

}

h3{

color:yellow;

font-size:30pt;

}

background:red;

}

file dengan ekstensi .html

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

</head>
<body>
	<h1>
BELAJAR DI CARIKODE</h1>
<br/>
	<h2>
BELAJAR DI CARIKODE</h2>
<br/>
	<h3>
BELAJAR DI CARIKODE</h3>
<br/>
	<h4>
BELAJAR DI CARIKODE</h4>
<br/>
	<b>SELAMAT BELAJAR</b>
</body>

</html>

<html>

<head>

</head>

<body>

<h1>BELAJAR DI CARIKODE</h1><br/>

<h2>BELAJAR DI CARIKODE</h2><br/>

<h3>BELAJAR DI CARIKODE</h3><br/>

<h4>BELAJAR DI CARIKODE</h4><br/>

<b>SELAMAT BELAJAR</b>

</body>

</html>

pada file html nya terdapat syntax berikut pada tengah tag head :

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

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

yang berfungsi untuk menghubungkan file html ke file css agar setiap kelas dan id pada file html juga terbaca pada file css nya untuk di berikan syntax-syntax css.

NOTE : dalam tutorial ini kita masih menggunakan css dasar, karena untuk tutorial CSS akan di lanjutkan secara khusus

I WANT TO KNOW EVERYTHING

SURAT KABAR INDONESIA

Tutorial belajar dasar HTML : Belajar menggabungkan HTML dengan CSS

syntax html yang akan menggunakan style css.

HALAMAN

POPULAR POST