Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Menghubungkan HTML dan CSS

Selamat Datang Kembali teman-teman, pada kesempatan ini kita akan sharing mengenai HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets), yaitu Cara menghubungkan HTML dan CSS. Sebenarnya pada postingan sebelumnya sudah saya jelaskan bagaimana cara menghubungkan nya. Teman teman bisa melihat pada link dibawah ini :

Mengenal Struktur Dasar CSS

Menghubungkan HTML dan CSS
Nah sekilas dari Materi yang kemarin bahwa CSS itu adalah , kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup HTML.

Oke sebaiknya kita lanjutkan kemateri kita kali ini, yaitu Mengenal Struktur Dasar CSS
Apa saja Struktur Dasar CSS itu? 
Struktur Kode Dasar CSS yaitu terdiri dari
  1. Selektor
  2. Blok Deklarasi atau {}
  3. Property : Nilai
jadi seperti ini kurang lebih teman teman..

tutorial css
Struktur Dasar CSS    
 
Sebelum kita menggunakan CSS. Kita Harus Menghubungkan CSS ke File HTML kita. dan ada beberapa cara untuk menghubungkan nya.
  1. Inline (langsung pada tag HTML)
  2. Internal (pada file HTML yang sama)
  3. Eksternal (file.css itu sendiri)


INLINE

Nah untuk yang pertama ini kita akan menggunakan CSS di dalam tag HTML itu sendiri. jika teman teman belum mengetahui tentang HTML atau Tag nya silahkan buka halaman dengan link dibawah ini :

 Untuk penggunakan CSS secara INLINE adalah seperti ini

<html>
<head>
 <meta charset="UTF-8">
 <title>Latihan</title>
</head>
<body>
 <h1 style="color: red" >Selamat Datang</h1>
</body>
</html>
Nah yang saya kasih tanda miring itu adalah contoh dari INLINE.


INTERNAL

Untuk yang INTERNAL ini kita akan menggunakan CSS pada Halaman atau file.html itu sendiri, contoh seperti ini.
<html>
<head>
 <meta charset="UTF-8">
 <title>Latihan</title>
        <style>
  h1 {
   color: yellow;
  }
 </style>
</head>
<body>
 <h1>Selamat Datang</h1>
</body>
</html>


EKSTERNAL

Baik kita memasuki cara yang ketiga yaitu bagian EKSTERNAL, sudah tahu pastinya teman teman bahwa cara yang ketiga ini, kita akan menggunakan sebuah file.css atau yang biasa kita kenal yaitu style.css, dan berikut adalah contoh nya.
<html>
<head>
 <meta charset="UTF-8">
 <title>Latihan</title>
        <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>Selamat Datang</h1>
</body>
</html>
nah pada bagian <link rel="stylesheet" href="style.css"> dan disini lah kita akan memanggil sebuah file style.css yang berisi sebuah kode CSS yang sudah kita buat. contoh nya seperti ini.
h1 {
 color: green;
}

maka disitu kita menggunakan sebuah selector untuk memanggil dan mengubah format dari h1 itu sendiri.

Okey Semua kita sudah tahu tuh tentang Cara Menghubungkan CSS. dan disini kita akan mencoba untuk menggunakan CSS yang sebenarnya.


See the Pen
CSS
by Wahyu Pambudi (@wahyup)
on CodePen.

Baik teman-teman cukup seperti itu yang bisa saya sampaikan, Terimakasih sudah membaca postingan ini. Semoga bermanfaat. Salam Semangat. Awonapa!

 

Tag Penelusuran

Menghubungkan HTML dan CSS
Belajar HTML dan CSS
Tutorial HTML dan CSS

Posting Komentar untuk "Cara Mudah Menghubungkan HTML dan CSS"