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

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

Selektor
Blok Deklarasi atau {}
Property : Nilai

jadi seperti ini kurang lebih teman teman..


Struktur Dasar CSS

Sebelum kita menggunakan CSS. Kita Harus Menghubungkan CSS ke File HTML kita. dan ada beberapa cara untuk menghubungkan nya.

Inline (langsung pada tag HTML)
Internal (pada file HTML yang sama)
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 :

Materi HTML 5 Lengkap

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

Awonapa - Website dan Blogging

Cara Mudah Menghubungkan HTML dan CSS

INLINE

INTERNAL

EKSTERNAL

1 komentar untuk "Cara Mudah Menghubungkan HTML dan CSS"

Menu Halaman Statis