Rama.

Tutorial Belajar HTML Part 6 — Styling Teks dan Konten dengan CSS: Penerapan Gaya pada Halaman Web

Cascading Style Sheets (CSS) adalah bahasa pemrograman yang digunakan untuk membe rikan gaya, tata letak, dan desain visual pada halaman web. Dalam kombinasi dengan HTML, CSS memungkinkan pengaturan tampilan yang menarik dan menyesuaikan estetika halaman web.

Menghubungkan CSS dengan HTML

Untuk menggunakan CSS pada halaman web, Anda dapat menautkannya ke dalam dokumen HTML Anda
menggunakan tag <link> di bagian <head>:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Konten HTML Anda -->
</body>
</html>

Mengaplikasikan Gaya pada Teks dan Konten

1. Gaya teks

/* Menentukan gaya untuk tag h1 */
h1 {
    color: blue;
    font-size: 24px;
    font-family: 'Arial', sans-serif;
    text-align: center;
}
/* Menentukan gaya untuk paragraf */
p {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
}

2. Pengaturan Tata Letak 

/* Mengatur tata letak header */
header {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
}
/* Mengatur tata letak navigasi */
nav {
    display: flex;
    justify-content: space-around;
    background-color: #444;
    color: white;
}

Menggunakan Selektor CSS

  • Selector Elemen: Mengganti gaya untuk tag HTML tertentu (seperti <h1>,
    <p>, <div>).
  • Selector Kelas: Menerapkan gaya pada elemen dengan kelas tertentu,
    ditandai dengan .kelas di CSS dan class=”kelas” di HTML.
  • Selector ID: Menerapkan gaya pada elemen dengan ID tertentu, ditandai
    dengan #id di CSS dan id=”id” di HTML.

Mendefinisikan Tampilan dengan CSS

  • Warna dan Font: Mengubah warna, ukuran, dan jenis font teks.
  • Tata Letak: Mengatur jarak, tata letak, dan penataan konten.
  • Responsif: Membuat halaman web responsif agar sesuai dengan
    perangkat yang digunakan.

kesimpulan

CSS memberikan kemampuan untuk mengubah tampilan halaman web, memperbaiki tata letak, dan memberikan gaya pada elemen HTML. Dengan memahami konsep dasar CSS dan cara menerap

kannya, Anda dapat membuat halaman web yang menarik dan responsif. Eksperimen

dengan berbagai properti CSS untuk menciptakan desain yang sesuai dengan kebutuhan dan
tujuan konten halaman web Anda.