Pengenalan Dasar CSS

Dasar CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen HTML di halaman web.

Langkah 1: Menambahkan CSS ke HTML

Ada tiga cara umum untuk menambahkan CSS ke dokumen HTML: inline, internal, dan eksternal:

<p style="color: red;">Teks ini berwarna merah</p>

Contoh di atas menggunakan **inline CSS**, langsung di dalam elemen HTML.

Langkah 2: Menggunakan Internal CSS

Internal CSS diletakkan di dalam tag <style> pada bagian <head>:

<style>
  p {
    font-size: 18px;
    color: blue;
  }
</style>

Langkah 3: Menggunakan File CSS Eksternal

Gunakan file terpisah dengan ekstensi .css dan hubungkan menggunakan tag <link>:

<link rel="stylesheet" href="style.css">

Langkah 4: Selektor Dasar

Selektor digunakan untuk memilih elemen yang ingin diberi gaya:

  • p: Memilih semua paragraf
  • .kelas: Memilih elemen dengan class tertentu
  • #id: Memilih elemen dengan ID tertentu
.judul {
  font-weight: bold;
  font-size: 24px;
}

Langkah 5: Styling Warna dan Latar

CSS memungkinkan kamu mengatur warna teks, latar belakang, border, dan lainnya:

body {
  background-color: #f5f5f5;
  color: #333;
}

Langkah 6: Mengatur Layout

Kamu bisa menggunakan properti seperti margin, padding, dan display untuk mengatur tata letak elemen:

.box {
  padding: 20px;
  margin: 10px;
  display: inline-block;
}

Langkah 7: Menambahkan Gaya ke Gambar dan Tombol

CSS sangat berguna untuk mempercantik gambar dan tombol:

Contoh Gaya Gambar: 
img {
  width: 100%;
  border-radius: 10px;
}
Contoh Gaya Tombol: 
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Tips Tambahan

  • Gunakan class untuk gaya yang bisa digunakan berulang.
  • Gunakan developer tools di browser untuk eksperimen langsung.
  • Struktur CSS sebaiknya rapi agar mudah dibaca dan dikelola.

Kesimpulan

  • CSS digunakan untuk mempercantik dan mengatur tampilan HTML.
  • Tiga cara penggunaan CSS: inline, internal, dan eksternal.
  • Kamu bisa mengontrol warna, layout, ukuran, border, dan lainnya.

Sintaks Dasar CSS

Sintaks dan Penerapannya

CSS bekerja dengan memilih elemen HTML tertentu lalu memberikan "aturan gaya" (style rules) untuk mengatur tampilannya. Dengan kata lain, HTML adalah struktur, dan CSS adalah pakaian atau desainnya.

Langkah 1: Menambahkan CSS ke HTML

Terdapat tiga cara umum untuk menggunakan CSS di dalam HTML:

  1. Inline CSS – Menulis style langsung di dalam atribut HTML.
  2. Internal CSS – Menulis style di dalam tag <style> di bagian <head>.
  3. Eksternal CSS – Menulis style di file .css terpisah lalu menghubungkannya dengan HTML.
Contoh Inline CSS: 
<p style="color: red;">Ini paragraf merah</p>

CSS ini hanya berlaku untuk elemen itu saja. Cocok untuk styling sederhana, tapi tidak disarankan untuk proyek besar.

Contoh Internal CSS: 
<style>
  h1 {
    color: green;
    font-family: Arial;
  }
</style>

Internal CSS cocok untuk proyek kecil atau halaman tunggal yang tidak memerlukan banyak file.

Contoh Eksternal CSS: 
<link rel="stylesheet" href="style.css">

Ini adalah cara terbaik dan paling profesional. Style bisa digunakan ulang di banyak halaman hanya dengan satu file .css.

Langkah 2: Struktur Dasar Sintaks CSS

Sintaks CSS terdiri dari dua bagian utama:

  • Selector: Menentukan elemen mana yang akan diberikan gaya.
  • Declaration Block: Berisi satu atau lebih aturan styling.
p {
  color: blue;
  font-size: 16px;
}

Dalam contoh di atas, selector p menunjuk semua paragraf. Di dalamnya ada dua aturan (declaration): warna teks biru dan ukuran font 16 piksel.

Langkah 3: Jenis-Jenis Selector

Selector bisa sangat fleksibel. Beberapa jenis selector penting:

  • Selector tag: p, h1, div
  • Class selector: Menggunakan titik (.) seperti .menu
  • ID selector: Menggunakan tanda pagar (#) seperti #footer
  • Group selector: Menggabungkan selector seperti h1, h2, h3
  • Descendant selector: Contoh nav ul li berarti li di dalam ul di dalam nav

Langkah 4: Properti Warna, Latar, dan Teks

Properti populer yang sering digunakan:

  • color: Mengubah warna teks
  • background-color: Warna latar belakang
  • font-size, font-family: Mengatur ukuran dan jenis font
  • text-align: Posisi teks (kiri, kanan, tengah)
h1 {
  color: #2c3e50;
  background-color: #ecf0f1;
  text-align: center;
}

Langkah 5: Properti Box Model

Semua elemen HTML dianggap sebagai "kotak" dan CSS menyediakan properti untuk mengatur kotak ini:

  • width, height: Ukuran
  • margin: Ruang luar elemen
  • padding: Ruang dalam elemen
  • border: Garis tepi elemen
.kotak {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  border: 2px solid #3498db;
}

Langkah 6: Display dan Posisi

Untuk mengatur cara elemen ditampilkan dan ditempatkan:

  • display: block, inline, flex, grid
  • position: static, relative, absolute, fixed
  • z-index: Untuk layering elemen

Langkah 7: Transisi dan Animasi Dasar

CSS mendukung efek animasi yang sederhana hingga kompleks, misalnya untuk hover:

a:hover {
  color: red;
  transition: color 0.3s ease-in-out;
}

Tips Praktis

  • Gunakan nama class yang deskriptif seperti .kartu-produk atau .judul-artikel.
  • Selalu pisahkan CSS ke file eksternal untuk project menengah hingga besar.
  • Manfaatkan developer tools di browser (klik kanan > Inspect) untuk eksperimen cepat.

Kesimpulan

  • CSS adalah kunci dalam menciptakan tampilan web yang menarik.
  • Memahami selector dan properti CSS akan membantumu menguasai layout dan desain.
  • Penerapan CSS bisa dilakukan inline, internal, atau eksternal, tergantung kebutuhan.
  • Latihan membuat desain dari nol akan membantu memperkuat logika dan kreativitas desainmu.

Cara Menulis CSS di HTML

1. Inline CSS

Inline CSS dituliskan langsung di dalam elemen HTML menggunakan atribut style. Cara ini cepat dan mudah, tetapi tidak efisien untuk styling dalam jumlah banyak.

Contoh Inline CSS: 
<p style="color: red;">Teks ini berwarna merah</p>

Kelebihan dari inline CSS adalah sederhana dan langsung terlihat hasilnya. Namun, jika kamu ingin mengubah gaya yang sama pada banyak elemen, kamu harus menyalin kode yang sama berulang kali, yang membuatnya tidak efisien.

2. Internal CSS

Internal CSS ditulis di dalam tag <style> pada bagian <head> dari dokumen HTML. Ini berguna jika kamu ingin memberikan style pada satu halaman HTML saja.

Contoh Internal CSS: 
<head>
  <style>
    h1 {
      color: blue;
      font-family: 'Arial', sans-serif;
    }
  </style>
</head>

Internal CSS cocok digunakan untuk halaman kecil yang tidak memerlukan file eksternal tambahan. Namun, jika kamu memiliki banyak halaman, internal CSS bisa membuat pengelolaan menjadi lebih sulit karena tidak bisa digunakan ulang.

3. Eksternal CSS

Eksternal CSS ditulis di file terpisah dengan ekstensi .css. File ini kemudian dihubungkan ke HTML menggunakan tag <link>. Ini adalah cara yang paling direkomendasikan untuk proyek menengah hingga besar.

Contoh Link ke Eksternal CSS: 
<link rel="stylesheet" href="style.css">

File CSS eksternal memisahkan konten dan desain, sehingga kode menjadi lebih bersih dan mudah dikelola. Kamu juga bisa menggunakan satu file CSS untuk mengatur gaya banyak halaman sekaligus.

Struktur Umum Penulisan CSS

CSS terdiri dari selector dan declaration block. Selector menunjukkan elemen mana yang akan diatur, sedangkan declaration block berisi properti dan nilainya.

Contoh Penulisan CSS: 
p {
  color: green;
  font-size: 18px;
}

Pada contoh di atas, semua elemen <p> akan memiliki warna teks hijau dan ukuran font 18 piksel.

Jenis Selector dalam CSS

  • Selector tag – seperti h1, p, div
  • Selector class – menggunakan titik (.) contoh: .menu
  • Selector ID – menggunakan tanda pagar (#) contoh: #footer
  • Group selector – contoh: h1, h2, h3
  • Descendant selector – contoh: nav ul li

Tips Penggunaan CSS di HTML

  • Gunakan eksternal CSS untuk project besar agar lebih terstruktur.
  • Gunakan nama class yang bermakna agar mudah dipahami tim.
  • Selalu cek hasilnya di browser menggunakan developer tools (F12).
  • Pelajari properti umum seperti margin, padding, font-size, dan color.

Kesimpulan

  • CSS bisa ditulis langsung di HTML dengan 3 cara: inline, internal, dan eksternal.
  • Masing-masing metode punya kelebihan dan cocok digunakan dalam situasi tertentu.
  • Memisahkan CSS ke file eksternal adalah praktik terbaik untuk menjaga kerapihan kode.
  • Dengan menguasai cara menulis CSS yang benar, kamu bisa membuat tampilan website yang menarik dan profesional.

Menggunakan Warna di CSS

Warna di CSS

Warna adalah bagian penting dalam desain web. Warna membantu memperjelas struktur halaman, membedakan elemen, dan menciptakan kesan visual yang menarik. Dalam CSS, kamu bisa mengatur warna teks, latar belakang, garis tepi, dan bahkan efek lainnya menggunakan berbagai format warna.

1. Properti CSS Terkait Warna

Berikut properti yang umum digunakan untuk mengatur warna dalam CSS:

  • color – Mengatur warna teks.
  • background-color – Mengatur warna latar belakang elemen.
  • border-color – Mengatur warna garis tepi (border).
  • outline-color – Mengatur warna outline elemen.

2. Format Penulisan Warna dalam CSS

CSS mendukung berbagai cara untuk menulis warna, di antaranya:

  • Nama warna – Misalnya: red, blue, green, black, white, dll.
  • Hexadecimal (hex) – Misalnya: #FF0000 untuk merah, #00FF00 untuk hijau.
  • RGB – Misalnya: rgb(255, 0, 0).
  • RGBA – Sama seperti RGB, tapi dengan tambahan transparansi. Contoh: rgba(255, 0, 0, 0.5).
  • HSL – Warna berdasarkan Hue, Saturation, dan Lightness. Contoh: hsl(0, 100%, 50%).
  • HSLA – Sama seperti HSL, dengan tambahan alpha/transparansi. Contoh: hsla(0, 100%, 50%, 0.3).
Contoh Penggunaan Warna dengan Format Hex: 
h1 {
  color: #3498db;
}
Contoh Penggunaan Warna dengan RGB: 
p {
  background-color: rgb(255, 255, 0);
}
Contoh Penggunaan Warna dengan RGBA (Transparan): 
.kotak {
  background-color: rgba(255, 0, 0, 0.3);
}

3. Tips Memilih Warna yang Tepat

  • Gunakan warna kontras tinggi antara teks dan background agar mudah dibaca.
  • Hindari penggunaan terlalu banyak warna berbeda dalam satu halaman.
  • Pilih skema warna yang konsisten dan mendukung identitas brand/web kamu.
  • Gunakan coolors.co atau colorhunt.co untuk mencari kombinasi warna harmonis.

4. Animasi Warna dengan CSS

CSS juga mendukung perubahan warna secara dinamis menggunakan transition:

a {
  color: black;
  transition: color 0.5s ease;
}

a:hover {
  color: red;
}

Saat kursor diarahkan ke elemen <a>, warna teks akan berubah secara halus menjadi merah.

5. Menggunakan Warna di Border dan Box

Warna juga dapat diterapkan pada elemen kotak menggunakan properti seperti:

  • border: Mengatur warna dan gaya garis tepi.
  • box-shadow: Membuat bayangan dengan warna tertentu.
.kartu {
  border: 2px solid #2ecc71;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

6. Warna Transparan vs Opacity

Selain menggunakan rgba atau hsla untuk transparansi, kamu juga bisa mengatur elemen menjadi transparan dengan opacity: 

.transparan {
  background-color: blue;
  opacity: 0.5;
}

Kesimpulan

  • CSS menyediakan berbagai cara untuk mengatur warna menggunakan nama, kode hex, RGB, HSL, dan lainnya.
  • Warna dapat diterapkan ke teks, latar belakang, border, dan bahkan efek visual.
  • Menggunakan warna dengan bijak dapat meningkatkan kenyamanan pengguna dan tampilan profesional website.
  • Transisi dan efek transparansi bisa membuat website terlihat lebih interaktif dan modern.

Menggunakan Background di CSS

Background di CSS

Dalam dunia web desain, latar belakang (background) adalah elemen visual yang sangat penting. Background digunakan untuk menambahkan warna, gambar, atau bahkan gradien agar tampilan elemen HTML menjadi lebih menarik dan mudah dibedakan. CSS menyediakan berbagai properti powerful untuk mengatur latar belakang sesuai kebutuhan desain modern.

1. Properti Background Dasar di CSS

Berikut ini properti dasar yang biasa digunakan untuk mengatur background dalam CSS:

  • background-color: Mengatur warna latar belakang.
  • background-image: Menentukan gambar latar.
  • background-repeat: Mengatur apakah gambar latar diulang.
  • background-position: Menentukan posisi gambar latar.
  • background-size: Mengatur ukuran gambar latar.
  • background-attachment: Menentukan apakah gambar latar ikut menggulir atau tetap di tempat.
  • background: Properti singkat (shorthand) untuk menggabungkan semua properti background.

2. Contoh Penggunaan background-color

Properti ini mengatur warna latar belakang suatu elemen.

div {
  background-color: lightblue;
}

3. Menggunakan background-image

Untuk memberi gambar sebagai latar belakang elemen.

body {
  background-image: url('gambar-latar.jpg');
}

Gambar akan diulang secara default. Untuk mengubahnya, gunakan properti lain seperti background-repeat.

4. Mengatur background-repeat

Default-nya gambar akan mengulang baik secara horizontal maupun vertikal. Kamu bisa menghentikan itu dengan menuliskan:

body {
  background-image: url('gambar.jpg');
  background-repeat: no-repeat;
}

5. Menentukan background-position

Properti ini menentukan posisi gambar latar, contohnya di tengah:

body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

6. Mengatur Ukuran dengan background-size

Kamu bisa menyesuaikan ukuran gambar latar menggunakan properti ini. Contoh:

  • cover: Gambar akan menutupi seluruh elemen (meskipun bisa terpotong).
  • contain: Gambar akan sepenuhnya terlihat tapi mungkin tidak menutupi seluruh area.
.header {
  background-image: url('header.jpg');
  background-size: cover;
  background-position: center;
}

7. Efek Parallax dengan background-attachment

Parallax adalah efek di mana latar tidak bergeser saat pengguna menggulir halaman.

.parallax {
  background-image: url('parallax.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

8. Menggunakan Shorthand background

Alih-alih menulis semua properti satu per satu, kamu bisa menggunakan properti background sebagai shorthand:

.banner {
  background: url('banner.jpg') no-repeat center center / cover;
}

9. Background Gradient

CSS juga memungkinkan kamu membuat latar warna gradasi (tanpa gambar). Contohnya: 

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Gradient bisa horizontal, vertikal, atau radial. Kamu juga bisa mengatur lebih banyak warna untuk transisi yang kompleks.

10. Tips Penggunaan Background

  • Gunakan ukuran gambar yang optimal agar tidak memperlambat loading website.
  • Selalu kombinasikan gambar background dengan teks yang kontras agar tetap terbaca.
  • Pakai background warna/gradient untuk efek ringan dan cepat.
  • Gunakan kombinasi background-blend-mode untuk efek campuran warna dan gambar.

Kesimpulan

  • CSS menyediakan banyak properti untuk mengatur latar belakang seperti warna, gambar, posisi, ukuran, dan pengulangan.
  • Properti background bisa digunakan secara singkat untuk merangkum semua pengaturan.
  • Gunakan background-size: cover dan background-attachment: fixed untuk efek desain modern.
  • Gradient dan kombinasi warna dapat menciptakan latar yang stylish tanpa gambar.

Text Formatting Di CSS

Formatting CSS

Dalam desain web, teks merupakan elemen utama dalam menyampaikan informasi. CSS menyediakan berbagai properti untuk mengatur tampilan teks agar lebih menarik, mudah dibaca, dan sesuai dengan desain. Dengan memahami cara memformat teks menggunakan CSS, kamu bisa membuat halaman web yang profesional dan enak dibaca.

1. Properti Dasar Text di CSS

Berikut ini beberapa properti penting yang digunakan untuk memformat teks dalam CSS:

  • color: Mengatur warna teks.
  • font-size: Mengatur ukuran font.
  • font-family: Menentukan jenis font.
  • font-weight: Menentukan ketebalan font.
  • text-align: Mengatur perataan teks (kiri, kanan, tengah, justify).
  • text-decoration: Menambahkan dekorasi seperti garis bawah, coret, atau overline.
  • line-height: Mengatur tinggi baris untuk kenyamanan baca.

2. Mengatur Warna Teks dengan color

Properti color digunakan untuk mengubah warna teks dalam elemen HTML.

p {
  color: darkblue;
}

3. Mengatur Ukuran Teks dengan font-size

Kamu bisa menentukan ukuran font dalam satuan px, em, rem, atau persen.

h1 {
  font-size: 36px;
}

4. Memilih Jenis Font dengan font-family

Properti ini menentukan tipe font. Disarankan menyebutkan beberapa alternatif.

body {
  font-family: "Segoe UI", Arial, sans-serif;
}

5. Menentukan Ketebalan dengan font-weight

Kamu bisa menggunakan nilai seperti normal, bold, atau angka 100–900.

strong {
  font-weight: bold;
}

6. Mengatur Perataan Teks dengan text-align

Gunakan properti ini untuk menyelaraskan teks secara kiri, kanan, tengah, atau justify.

p {
  text-align: justify;
}

7. Memberi Garis Dekorasi dengan text-decoration

Kamu bisa menambahkan garis bawah, garis coret, dan lainnya pada teks.

a {
  text-decoration: underline;
}

8. Mengatur Jarak Baris dengan line-height

Line-height membantu meningkatkan kenyamanan membaca paragraf panjang.

p {
  line-height: 1.6;
}

9. Shorthand Font

Kamu bisa menggabungkan semua properti font dalam satu baris menggunakan shorthand:

p {
  font: italic bold 16px/1.5 "Arial", sans-serif;
}

10. Tips Text Styling

  • Gunakan rem atau em untuk ukuran font yang responsif.
  • Pastikan kontras warna teks dan background cukup tinggi untuk keterbacaan.
  • Hindari terlalu banyak jenis font dalam satu halaman web.
  • Gunakan text-transform untuk mengubah huruf menjadi kapital, kecil, atau kapital semua.

Kesimpulan

  • CSS memungkinkan kamu mengatur teks secara fleksibel dan estetis.
  • Gunakan kombinasi font-family, font-size, dan color untuk tampilan teks yang menarik.
  • Properti seperti line-height dan text-align membantu meningkatkan kenyamanan baca.
  • Shorthand font bisa digunakan untuk efisiensi kode.

Beri Dukungan untuk Update Materi Selanjutnya

Jika Anda merasa materi ini bermanfaat, bantu kami untuk terus mengembangkan konten pembelajaran yang berkualitas. Dukungan seikhlasnya dari Anda sangat berarti bagi kelangsungan proyek ini.

Donasi Sekarang