ArkWeb logo ArkWeb
Login Client Login Student Ark Web
Articles css website

CSS Cascading Style Sheets – Pengaturan Tampilan Website

Mar 06, 2025 2 min read 14 views
CSS Cascading Style Sheets – Pengaturan Tampilan Website

1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen dalam halaman web yang dibuat dengan HTML. CSS memungkinkan kita untuk:

✅ Mengubah warna, ukuran, dan jenis font
✅ Mengatur posisi dan tata letak elemen
✅ Membuat animasi dan efek visual
✅ Membuat tampilan website lebih responsif dan menarik

Tanpa CSS, halaman web hanya akan terlihat sebagai teks dan gambar polos tanpa desain menarik.

2. Sejarah Singkat CSS

CSS pertama kali dikembangkan oleh Håkon Wium Lie pada tahun 1996 untuk membantu pemisahan antara struktur HTML dan tampilan visual. Perkembangannya meliputi:

  • CSS1 (1996) – Versi pertama dengan dasar pemformatan.
  • CSS2 (1998) – Menambahkan fitur layout seperti positioning dan media types.
  • CSS2.1 (2004) – Penyempurnaan dari CSS2 dengan kompatibilitas lebih baik.
  • CSS3 (2011 – Sekarang) – Modularisasi fitur, dengan tambahan animasi, efek transisi, dan grid layout.

3. Cara Menggunakan CSS dalam HTML

Ada tiga cara untuk menerapkan CSS ke dalam halaman HTML:

a) Inline CSS (Dalam Tag HTML Langsung)

Menambahkan CSS langsung dalam atribut elemen HTML.

html
<p style="color: blue; font-size: 20px;">Teks ini berwarna biru.</p>

✅ Kelebihan: Mudah digunakan pada elemen tertentu.
❌ Kekurangan: Sulit dikelola jika banyak elemen yang harus diubah.

b) Internal CSS (Dalam Tag <style> di <head>)

Menuliskan CSS di dalam bagian <head> dokumen HTML.

html
<!DOCTYPE html> <html lang="id"> <head> <style> p { color: red; font-size: 18px; } </style> </head> <body> <p>Teks ini berwarna merah.</p> </body> </html>

✅ Kelebihan: Berguna untuk halaman tunggal.
❌ Kekurangan: Tidak efisien jika digunakan dalam banyak halaman.

c) External CSS (File Terpisah dengan .css)

CSS ditulis dalam file eksternal dan dipanggil di HTML menggunakan <link>.

File style.css

css
p { color: green; font-size: 20px; }

File index.html

html
<!DOCTYPE html> <html lang="id"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>Teks ini berwarna hijau.</p> </body> </html>

✅ Kelebihan: Memudahkan pemeliharaan dan dapat digunakan oleh banyak halaman.
❌ Kekurangan: Tidak langsung terlihat tanpa file CSS eksternal.

4. Struktur Sintaks CSS

CSS terdiri dari selector, property, dan value.

css
selector { property: value; }

Contoh:

css
h1 { color: blue; font-size: 24px; }

🔹 Selector → h1 (elemen yang ditargetkan)
🔹 Property → color, font-size (aturan yang ingin diterapkan)
🔹 Value → blue, 24px (nilai properti yang diatur)

5. Jenis Selector dalam CSS

a) Selector Elemen

Memilih semua elemen HTML tertentu.

css
h1 { color: purple; }

b) Selector ID (#id)

Memilih elemen berdasarkan atribut id.

css
#judul { color: red; }
html
<h1 id="judul">Ini adalah Judul</h1>

c) Selector Class (.class)

Memilih elemen berdasarkan atribut class.

css
.warna-biru { color: blue; }
html
<p class="warna-biru">Ini teks dengan warna biru.</p>

d) Selector Universal (*)

Menerapkan gaya ke semua elemen.

css
* { margin: 0; padding: 0; }

e) Selector Grup

Menggunakan koma untuk menerapkan gaya ke beberapa elemen sekaligus.

css
h1, h2, p { font-family: Arial, sans-serif; }

6. Properti CSS yang Sering Digunakan

a) Warna (Color)

  • Nama warna: color: red;
  • Hexadecimal: color: #ff0000;
  • RGB: color: rgb(255, 0, 0);

b) Font dan Teks

css
p { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; text-align: center; text-decoration: underline; }

c) Latar Belakang (Background)

css
body { background-color: lightgray; background-image: url('background.jpg'); background-size: cover; }

d) Margin dan Padding

css
div { margin: 20px; padding: 10px; }

🔹 Margin = Jarak luar elemen
🔹 Padding = Jarak dalam elemen

e) Border (Garis Pinggir)

css
div { border: 2px solid black; }

Jenis border: solid, dashed, dotted, double, dll.

7. CSS Layout dan Responsif

a) Display dan Position

  • display: block; → Elemen blok
  • display: inline; → Elemen sebaris
  • position: absolute; → Posisi tetap terhadap parent
  • position: fixed; → Tetap di layar meski di-scroll

b) Flexbox (Membantu Layout)

css
.container { display: flex; justify-content: center; align-items: center; }

✅ Membantu membuat layout yang lebih fleksibel dan responsif.

c) Grid Layout (CSS Grid)

css
.container { display: grid; grid-template-columns: 1fr 1fr; }

✅ Membantu menyusun elemen dalam bentuk grid seperti tabel.

d) Media Query (Desain Responsif untuk Mobile)

css
@media screen and (max-width: 600px) { body { background-color: lightblue; } }

✅ Memungkinkan desain website menyesuaikan ukuran layar perangkat.

8. Animasi dan Efek dalam CSS

CSS juga bisa digunakan untuk membuat animasi dan efek transisi.

css
button { background-color: blue; transition: background-color 0.3s; } button:hover { background-color: green; }

✅ Efek perubahan warna saat tombol dihover.

9. Framework CSS Populer

Untuk mempercepat pengembangan, banyak developer menggunakan framework seperti:

  • Bootstrap – Membantu membuat desain responsif dengan mudah.
  • Tailwind CSS – Utility-first CSS untuk fleksibilitas tinggi.
  • Bulma – Framework CSS yang ringan dan modern.

10. Kesimpulan

CSS adalah bagian penting dalam pengembangan web yang berfungsi untuk mengatur tampilan dan desain website. Dengan CSS, website bisa terlihat lebih menarik, profesional, dan responsif di berbagai perangkat.

#css #website #program

Share this article

About the Author

Admin

Admin

admin

A passionate writer and content creator.