CSS digunakan untuk memberikan gaya atau tampilan pada halaman HTML. Analoginya seperti membuat sebuah rumah, HTML adalah struktur dan isinya, sedangkan CSS digunakan untuk mempercantik dan mengatur tampilannya seperti memberikan warna pada dinding, menentukan tinggi dan lebar ruangan, menghias teras dan sebagainya.
Ada 3 cara menghubungkan HTML dan CSS
Semua penjelasan dan keterangan sudah dimasukkan di dalam kode contoh. Jadi silahkan ketikkan kode html dan css di bawah ini.
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-css\html-css.html
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dan CSS – Warstek.com</title>
<!– css external, ditulis sebagai file terpisah –>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<style type=”text/css”>
/*contoh CSS di embed di dokumen HTML*/
/*class menggunakan titik, format key : value;*/
.content_block {
/*set warna background*/
background-color: #eeeeee;
/*set jarak dengan atasnya*/
margin-top: 20px;
/*set lebar jarak isi area*/
padding: 5px;
}
.miring {
/*set teks menjadi miring*/
font-style: italic;
}
.merah {
/*set teks menjadi berwarna merah*/
color: red;
}
/*ID menggunakan tanda pagar*/
#kecil {
/*set teks menjadi berukuran kecil*/
font-size: 10px;
}
/*TAG langsung diketik tagnya*/
li {
/*set teks menjadi berwarna biru*/
color: blue;
}
</style>
</head>
<body>
<div class=”header”>
<h1>3 Cara Menghubungkan </h1>
</div>
<div class=”content_block”>
<h4>1. diletakkan sebagai atribut pada tag HTML / inline</h4>
<!– contoh css inline didalam tag html –>
<p style=”font-size: 20px;font-weight: bold;”>
Ini adalah sebuah paragraf dengan ukuran 20px, tebal.
</p>
</div>
<div class=”content_block”>
<h4>2. diletakkan dalam dokumen html/internal (Tag, ID, Class)</h4>
<p class=”miring”>
Ini adalah paragraf dengan font miring dan ini <span class=”merah”>teks warna merah</span>.
</p>
<p class=”miring”>
Ini adalah paragraf dengan font miring dan ini <span class=”merah”>teks warna merah</span>.
</p>
<p id=”kecil”>
Ini teks dengan ukuran kecil
</p>
<!– tag li di atur css nya di atas –>
<ul>
<li>list biru pertama</li>
<li>list biru kedua</li>
<li>list biru ketiga</li>
</ul>
</div>
<div class=”content_block”>
<h4>3. diletakkan di file terpisan sebagai file.css</h4>
<p class=”huruf_besar”>
Ini paragraf jadi huruf besar.
</p>
<!– contoh tag html berisi banyak class –>
<div class=”huruf_besar tengah miring tebal”>
diatur dari style.css
</div>
</div>
</body>
</html>
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-css\html-css.html
.huruf_besar {
/*set teks menjadi huruf besar semua*/
text-transform: uppercase;
}
.tengah {
/*set teks menjadi ditengah halaman*/
text-align: center;
/*set teks menjadi berwarna hijau*/
color: green;
}
Setelah itu buka browser dan ketiikan http://localhost/belajar/belajar-css/html-css.html
Hasilnya:
Konsep dasar CSS
Konsep dasarnya adalah untuk memberikan gaya atau style pada elemen HTML. Dalam hubungannya dengan HTML, digunakan untuk mengontrol tampilan halaman web, seperti warna, ukuran font, margin, padding, posisi, dan sebagainya. Memungkinkan untuk memisahkan konten (HTML) dan presentasi (CSS) sehingga dapat menghasilkan halaman web yang lebih terstruktur dan mudah dikelola.
Referensi.
Malasngoding, https://www.malasngoding.com/belajar-css-pengertian-dan-pengenalan-css/ Diakses pada 22 Maret, 2023.
Niagahoster, https://www.niagahoster.co.id/blog/pengertian-css/ Diakses pada 22 Maret, 2023.
Petanikode, https://www.petanikode.com/css-dalam-html/ Diakses pada 22 Maret, 2023.