Contoh Penggunaan CSS dalam XHTML

DAFTAR ISI

BAB 1 PENDAHULUAN
1.1 Latar Belakang
1.2 Rumusan Masalah
1.3 Tujuan Penulisan
1.4 Manfaat Penulisan

BAB 2 PEMBAHASAN
2.1 Pengenalan CSS
2.2 Cara Menambahkan CSS ke XHTML
2.3 Contoh Penggunaan CSS dalam XHTML
2.3.1 Mengubah Warna Teks
2.3.2 Mengubah Jenis Font
2.3.3 Mengatur Ukuran Font
2.3.4 Mengatur Jarak Paragraf
2.3.5 Mengatur Margin
2.3.6 Membuat Border
2.3.7 Membuat Background

BAB 3 PENUTUP
3.1 Kesimpulan
3.2 Saran

DAFTAR PUSTAKA

BAB 1 PENDAHULUAN

1.1 Latar Belakang

XHTML (eXtensible Hypertext Markup Language) adalah standar terbaru untuk menggantikan HTML dalam membangun halaman web. Namun, XHTML hanya mendefinisikan struktur dan semantik dari konten, bukan tampilan visualnya. Oleh karena itu diperlukan CSS (Cascading Style Sheets) untuk memformat tampilan elemen XHTML agar lebih menarik.

CSS memungkinkan web developer memisahkan konten dari presentasi. Selain itu CSS memiliki selektor yang kuat untuk menerapkan style secara efisien ke seluruh situs. Dengan menggabungkan XHTML dan CSS, tampilan situs web menjadi lebih interaktif dan responsif terhadap perangkat pengguna (W3Schools, 2022).

Oleh karena itu, pemahaman mengenai penerapan CSS dalam XHTML perlu diketahui oleh web developer. Makalah ini akan membahas beberapa contoh penggunaan CSS untuk memformat elemen XHTML agar menghasilkan tampilan yang menarik.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah diuraikan, rumusan masalah dalam makalah ini adalah:

  1. Bagaimana cara menambahkan CSS eksternal ke dalam dokumen XHTML?
  2. Bagaimana contoh penerapan CSS dalam memformat elemen dan konten XHTML?

1.3 Tujuan Penulisan

Tujuan dari penulisan makalah ini adalah untuk:

  1. Menjelaskan cara menambahkan CSS eksternal ke dalam dokumen XHTML.
  2. Memberikan contoh penerapan CSS dalam memformat elemen dan konten XHTML.

1.4 Manfaat Penulisan

Adapun manfaat yang diharapkan dari penulisan makalah ini adalah:

  1. Pembaca memahami cara menggabungkan CSS dengan XHTML.
  2. Pembaca memahami penerapan CSS untuk memformat tampilan elemen XHTML.
  3. Makalah ini dapat dijadikan referensi bagi mahasiswa Teknik Informatika dalam mempelajari CSS dan XHTML.

BAB 2 PEMBAHASAN

2.1 Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa style sheet yang digunakan untuk mengatur tampilan dan format elemen yang tertulis dalam bahasa markup (MDN Web Docs, 2022). CSS memisahkan konten dari presentasi sehingga konten HTML dapat disajikan dengan gaya apapun tanpa mengubah markup.

CSS bekerja dengan cara menyeleksi elemen HTML lalu menerapkan style, seperti warna font, ukuran, margin, padding, dan lainnya. Terdapat 3 metode untuk menambahkan CSS ke dokumen HTML atau XHTML, yaitu inline CSS, embedded CSS, dan external CSS.

Kelebihan CSS antara lain:

  • Memisahkan konten dan tampilan
  • Kontrol tampilan situs lebih konsisten
  • Mudah dikelola dan dimaintenance
  • Support responsif web design
  • Kaya akan efek styling interaktif

Oleh karena itu CSS sangat penting untuk membangun situs web profesional dengan tampilan yang menarik.

2.2 Cara Menambahkan CSS ke XHTML

Ada 3 cara untuk menambahkan CSS ke dalam dokumen XHTML (W3Schools, 2022):

  1. Inline CSS CSS dituliskan pada atribut style elemen XHTML:
<p style="color: blue;">Teks berwarna biru</p>
  1. Embedded CSS CSS dituliskan pada elemen <style> di bagian <head>:
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
  1. External CSS CSS dituliskan pada file CSS terpisah, lalu difile tersebut diimport ke XHTML menggunakan elemen <link>:
<head>
  <link rel="stylesheet" href="style.css">
</head>

Cara external CSS merupakan best practice karena memisahkan CSS dari kode XHTML sehingga mudah dikelola nantinya. Oleh karena itu, contoh selanjutnya akan menggunakan external CSS.

2.3 Contoh Penggunaan CSS dalam XHTML

Berikut ini contoh penerapan CSS dalam XHTML untuk memformat tampilan elemen:

2.3.1 Mengubah Warna Teks

Warna teks diubah dengan property color pada CSS:

p {
  color: blue; 
}

2.3.2 Mengubah Jenis Font

Jenis font diubah dengan property font-family:

p {
  font-family: Arial;
}

2.3.3 Mengatur Ukuran Font

Ukuran font diatur dengan property font-size:

h1 {
  font-size: 32px;
}

2.3.4 Mengatur Jarak Paragraf

Jarak antar paragraf diatur dengan property margin:

p {
  margin-bottom: 20px; 
}

2.3.5 Mengatur Margin

Margin luar elemen diatur dengan property margin:

div {
  margin: 20px;
}

2.3.6 Membuat Border

Border elemen dibuat dengan property border:

table {
  border: 1px solid black;
}

2.3.7 Membuat Background

Background elemen diatur dengan property background:

body {
  background: #f2f2f2; 
}

Demikian contoh sederhana penerapan CSS dalam XHTML untuk mempercantik tampilan elemen. Terdapat ratusan properti CSS lainnya yang dapat digunakan untuk membuat tampilan situs web menjadi lebih menarik dan interaktif.

BAB 3 PENUTUP

3.1 Kesimpulan

Berdasarkan pembahasan pada bab sebelumnya, dapat ditarik kesimpulan sebagai berikut:

  1. CSS digunakan bersama XHTML untuk memisahkan konten dari presentasi situs web.
  2. CSS dapat ditambahkan ke XHTML dengan 3 cara: inline, embedded, dan external CSS.
  3. Beberapa contoh penerapan CSS dalam XHTML meliputi mengatur warna, font, ukuran font, margin, padding, border, dan background.

3.2 Saran

Berikut saran untuk penerapan CSS pada situs web berbasis XHTML:

  1. Gunakan external CSS untuk memisahkannya dari kode XHTML.
  2. Manfaatkan selektor CSS secara maksimal untuk efisiensi.
  3. Validasikan kode CSS menggunakan validator online.
  4. Ujicoba tampilan CSS di berbagai browser dan perangkat.
  5. Pelajari best practice penulisan CSS yang rapi dan terstruktur.

Dengan menguasai CSS dan XHTML, web developer dapat membangun situs web profesional dengan tampilan yang responsif dan menarik.

DAFTAR PUSTAKA

  • MDN Web Docs. (2022). CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS
  • W3Schools. (2022). CSS Introduction. https://www.w3schools.com/css/
  • W3Schools. (2022). CSS How To. https://www.w3schools.com/css/css_howto.asp

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *