Tutorial CSS : Cara Penulisan
• 8 min read • 1061 views
Tutorial CSS : Cara Penulisan
Dalam perjalanan kita memahami CSS, kita telah melangkah dari pengenalan dasar hingga keterampilan menulis CSS langsung di HTML. Sekarang, kita akan menjelajahi tiga metode yang berbeda untuk menerapkan CSS dalam halaman HTML kita: Internal CSS, Inline CSS, dan External CSS. Dari penggunaan tag <style> di dalam dokumen HTML hingga menulis gaya langsung di atribut elemen HTML, serta menyimpan aturan gaya dalam file terpisah untuk meningkatkan keterbacaan dan manajemen kode. Ayo kita eksplorasi contoh-contoh dan langkah-langkahnya bersama-sama!
Table of Contents
Internal CSS
Internal CSS, atau Embeded CSS, merupakan pendekatan yang populer dalam penulisan kode CSS di dalam dokumen HTML. Dengan Internal CSS, aturan gaya dapat disematkan langsung ke dalam tag <style>, memungkinkan pengembang untuk menyatukan semua pengaturan gaya dalam satu tempat, yang membuat manajemen kode menjadi lebih mudah. Meskipun Internal CSS dapat ditulis di dalam tag <head> atau <body>, umumnya disarankan untuk menempatkannya di dalam tag <head> agar kode CSS terpisah dari konten utama halaman web.
Dalam contoh yang diberikan, kita melihat bagaimana aturan gaya diterapkan pada elemen-elemen HTML seperti paragraf (<p>) dan teks italic (<i>). Misalnya, aturan gaya untuk paragraf mengatur jenis font, tinggi baris, dan ukuran font, sedangkan aturan gaya untuk teks italic mengatur jenis font dan warna teks. Dengan menggunakan Internal CSS, kita dapat dengan mudah mengubah gaya elemen-elemen ini hanya dengan mengedit kode CSS di dalam dokumen HTML yang sama.
Berikut adalah contoh kode HTML beserta CSS internal yang diterapkan:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<!-- Penulisan Internal CSS dalam tag head -->
<style type="text/css">
p {
font-family: serif;
line-height: 1.75em;
font-size: 18px;
}
i {
font-family: sans;
color: orange;
}
h2 {
font-family: sans;
color: #333;
}
</style>
</head>
<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemonstrasikan <i>internal CSS</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
```
Dalam kode di atas, aturan gaya CSS internal diterapkan pada paragraf, teks italic, dan judul. Ini memungkinkan kita untuk mengatur tampilan halaman web dengan lebih fleksibel dan mudah disesuaikan dengan kebutuhan. Namun, perlu diingat untuk mengorganisir kode CSS dengan baik agar tetap terstruktur dan mudah dipelihara.
Baca Juga
Eksternal CSS
Eksternal CSS merupakan pendekatan di mana kode CSS ditulis dalam file terpisah yang memiliki ekstensi .css. Dalam file tersebut, aturan gaya untuk halaman web dapat didefinisikan secara terpisah dari kode HTML, memungkinkan untuk pemeliharaan yang lebih mudah dan pengaturan ulang gaya secara konsisten di seluruh situs web.
Berikut ini adalah contoh kode CSS eksternal yang disimpan dalam file bernama style-ku.css:
```css
p {
font-family: serif;
line-height: 1.75em;
}
i {
font-family: sans;
color: orange;
}
h2 {
font-family: sans;
color: #333;
}
```
Untuk menggunakan CSS eksternal ini dalam dokumen HTML, terdapat dua cara yang umum digunakan:
- Menggunakan tag `
<link>`:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style-ku.css">
</head>
<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
```
- Menggunakan at-rules `
@import`:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<style type="text/css">
@import "style-ku.css";
</style>
</head>
<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
```
Kedua cara tersebut memungkinkan HTML untuk mengakses file CSS eksternal dan menerapkan aturan gaya yang telah ditentukan. Dengan menggunakan CSS eksternal, pengembang dapat memisahkan struktur dan gaya, meningkatkan keterbacaan dan kemudahan pemeliharaan kode.
Inline CSS
Inline CSS merupakan metode penulisan dalam CSS yang memungkinkan kode gaya ditulis langsung pada atribut style di elemen HTML, tanpa memerlukan file eksternal atau penempatan di dalam tag <style>. Dengan menggunakan inline CSS, aturan gaya spesifik dapat diterapkan secara langsung pada elemen HTML tanpa perlu mengubah kode CSS secara terpisah.
Contoh sederhana penggunaan inline CSS adalah sebagai berikut:
```html
<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>
```
Dalam contoh di atas, gaya teks warna merah dan jenis font sans-serif diterapkan langsung pada elemen <h2> menggunakan atribut style.
Berikut ini adalah contoh lengkap penggunaan inline CSS dalam sebuah dokumen HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline CSS</title>
</head>
<body>
<h2 style="color:red;font-family:sans">Ini judul artikel</h2>
<p style="color:maroon">Ini merupakan paragraf yang memuat isi artikel. Paragraf ini hanya untuk uji coba saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
```
Dalam contoh lengkap di atas, gaya teks warna merah dan jenis font sans-serif diterapkan pada elemen <h2>, sedangkan warna teks marun diterapkan pada elemen <p>, semuanya dengan menggunakan inline CSS. Meskipun inline CSS dapat memudahkan pengaturan gaya secara spesifik pada elemen tertentu, penggunaan yang berlebihan dapat mengurangi keterbacaan dan pemeliharaan kode, terutama dalam proyek yang lebih besar. Oleh karena itu, disarankan untuk menggunakan inline CSS secara bijaksana dan hanya untuk kasus-kasus tertentu yang membutuhkan pengaturan gaya yang spesifik.
Inline CSS memang sering digunakan untuk memberikan gaya pada satu elemen saja, dan karena prioritasnya yang tinggi, aturan gaya inline akan menggantikan aturan gaya internal dan eksternal yang sama. Namun, sebagaimana yang telah disebutkan, penggunaan Inline CSS dalam proyek-proyek besar dapat menyulitkan pengelolaan kode jika digunakan secara berlebihan.
Oleh karena itu, sangat penting untuk menggunakan Inline CSS seperlunya dan seadanya. Hindari penggunaan yang berlebihan, dan prioritaskan penggunaan CSS internal atau eksternal untuk mengatur gaya secara global dan konsisten di seluruh situs web. Dengan begitu, kode CSS akan lebih terstruktur dan mudah dipelihara, membuat proyek menjadi lebih rapi dan efisien dalam jangka panjang.
- Sejarah dan Tips Belajar CSS
- Tutorial CSS Part 2 : Bentuk Dasar Sintaks
- Tutorial CSS : Jenis-jenis Selektor
- Tutorial CSS : Cara Penulisan
- Tutorial CSS : Cara Mewarnai Teks
- Tutorial CSS - Pembuatan Background
- Tutorial CSS : Text Formatting
- Tutorial CSS: Cara Membuat Garis di CSS
- Tutorial CSS : Cara Mengatur Font
- Tutorial CSS : Box Model
- Tutorial CSS: Menentukan Ukuran Elemen dengan Satuan yang Tepat
- 6 Manfaat Belajar CSS untuk Programmer
- 7 Proyek Mini CSS untuk Meningkatkan Skill Kamu
- 6 Properti CSS yang Paling Sering Digunakan dan Cara Mengoptimalkannya
- 5 Efek Animasi CSS yang Akan Membuat Situs Web Kamu Lebih Menarik
- 6 Tips Dasar Coding CSS yang Jarang Diketahui Banyak Orang
Last updated on January 24, 2025
