Cara Menggabungkan HTML Dan CSS

Cara Menggabungkan HTML Dan CSS - Hallo sahabat Resep Masakan Nusantara, Pada sharing resep kali ini yang berjudul Cara Menggabungkan HTML Dan CSS, saya telah menyediakan resep masakan kesukaan anda secara lengkap.

Artikel : Cara Menggabungkan HTML Dan CSS
Judul Resep : Cara Menggabungkan HTML Dan CSS

Cara Menggabungkan HTML Dan CSS

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 :

1

2

3

4

5

6

7

<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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

body{

 background:green;

}

h1{

 color:red;

}

h2{

 color:blue;

}

h3{

 color:yellow;

 font-size:30pt;

}

b{

 background:red;

}

file dengan ekstensi .html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<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>

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

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.

Cara Menggabungkan HTML Dan CSS

EkaTek BLOG

Cara Menggabungkan HTML Dan CSS

Cara Menggabungkan HTML Dan CSS

Cara Menggabungkan HTML Dan CSS

0 Response to "Cara Menggabungkan HTML Dan CSS"

Post a Comment

Cara Menggabungkan HTML Dan CSS

lihat juga

Cara Menggabungkan HTML Dan CSS

lihat juga

Cara Menggabungkan HTML Dan CSS

0 Response to "Cara Menggabungkan HTML Dan CSS"

Post a Comment