Cara Mengatur Warna, Font, dan Layout dengan CSS untuk Pemula

Cara Mengatur Warna, Font, dan Layout dengan CSS untuk Pemula

Setelah mempelajari HTML, langkah berikutnya adalah mempercantik tampilan website menggunakan CSS (Cascading Style Sheets). Dengan CSS, kamu bisa mengatur warna, ukuran teks, jenis font, hingga posisi elemen di halaman web. Tanpa CSS, tampilan website akan terlihat polos seperti dokumen biasa.

Pada artikel ini, kamu akan belajar 3 hal dasar yang paling penting dalam CSS:

  1. Mengatur warna
  2. Mengatur font & teks
  3. Mengatur layout

Semua contoh akan mudah dipahami oleh pemula.

1. Apa Itu CSS?

CSS adalah bahasa yang digunakan untuk mengatur tampilan website.
HTML membuat struktur, sedangkan CSS membuat tampilannya lebih menarik.

CSS bisa ditulis dengan 3 cara:

a. Inline CSS

Ditulis langsung di dalam tag HTML.

<p style="color:red;">Ini warna merah</p>

b. Internal CSS

Ditulis di bagian <style> dalam <head>.

<style>
p { color: blue; }
</style>

c. External CSS (paling direkomendasikan)

Disimpan dalam file .css terpisah.

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

2. Mengatur Warna dengan CSS

Warna diatur menggunakan properti color dan background-color.

Mengatur warna teks:

h1 {
  color: blue;
}

Mengatur warna background:

body {
  background-color: #f2f2f2;
}

Format warna yang bisa digunakan:

  • Nama warna: red, blue, green
  • Hex code: #ff0000
  • RGB: rgb(255,0,0)
  • RGBA: rgba(255,0,0,0.5) (ada transparansi)

Contoh background gradasi:

body {
  background: linear-gradient(to right, #4facfe, #00f2fe);
}

3. Mengatur Font & Teks dengan CSS

Beberapa properti teks yang penting:

a. Mengatur jenis font

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

b. Mengatur ukuran font

p {
  font-size: 18px;
}

c. Mengatur ketebalan

h1 {
  font-weight: bold;
}

d. Mengatur rata kiri/kanan/tengah

h1 {
  text-align: center;
}

e. Mengatur jarak antar baris (line-height)

p {
  line-height: 1.6;
}

f. Mengatur warna teks

p {
  color: #333;
}

Dengan kombinasi ini, website akan terlihat lebih rapi dan profesional.

4. Mengatur Layout (Posisi Elemen) dengan CSS

CSS memiliki beberapa teknik untuk mengatur posisi dan layout elemen.

a. Margin dan Padding

Ini adalah dasar layout CSS.

Margin = jarak luar (antara elemen)

Padding = jarak dalam (isi dan batas elemen)

div {
  margin: 20px;
  padding: 15px;
  background: lightyellow;
}

b. Mengatur lebar dan tinggi

div {
  width: 300px;
  height: 200px;
  background: lightgray;
}

c. Centering (tengah secara horizontal)

Dengan margin auto:

div {
  width: 300px;
  margin: auto;
}

d. Layout Flexbox (paling modern & mudah)

Flexbox membantu menyusun elemen sejajar.

Menjadikan container sebagai flex:

.container {
  display: flex;
}

Membuat elemen berada di tengah:

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

Membuat elemen tersusun ke samping:

.container {
  display: flex;
  gap: 20px;
}

Flexbox sangat ideal untuk menu, card, dan layout responsif.

e. Grid Layout (untuk layout besar)

Grid cocok untuk membangun struktur kompleks seperti galeri atau dashboard.

Contoh grid 3 kolom:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

5. Contoh Website Sederhana dengan CSS

Berikut contoh HTML + CSS sederhana yang bisa langsung kamu coba:

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <title>Belajar CSS</title>
</head>
<body>

<h1>Website Sederhana</h1>
<p>Ini tampilan website saya setelah ditambahkan CSS.</p>

<div class="box">
  <p>Ini adalah sebuah kotak.</p>
</div>

</body>
</html>

CSS (style.css)

body {
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: darkblue;
}

.box {
  width: 300px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Hasilnya: website lembut, bersih, dan modern.

6. Kesimpulan

CSS adalah alat utama untuk mempercantik website. Dengan belajar mengatur warna, font, dan layout, kamu sudah menguasai dasar web design. Setelah ini, kamu bisa belajar animasi, responsif, dan framework seperti Bootstrap atau TailwindCSS.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat File PDF di HP dan Laptop Tanpa Aplikasi Berat (Panduan Lengkap untuk Pemula)

Cara Membuat File PDF di HP dan Laptop Tanpa Aplikasi Berat (Panduan Lengkap untuk Pemula) File PDF adalah salah satu format dokumen yang paling sering digunakan di berbagai keperluan, mulai dari tugas sekolah, laporan kerja, surat resmi, lamaran pekerjaan, hingga e-book. Keunggulan PDF adalah tampilannya yang rapi dan tidak berubah meskipun dibuka di perangkat berbeda. Banyak orang mengira membuat file PDF itu sulit dan membutuhkan aplikasi rumit. Padahal, Anda bisa membuat PDF dari HP maupun laptop menggunakan berbagai cara yang simple, cepat, dan gratis. Pada artikel ini, Anda akan mempelajari cara membuat file PDF tanpa aplikasi berat , menggunakan: Google Docs Microsoft Word WPS Office SmallPDF ILovePDF Scanner kamera HP Fitur bawaan Android dan iPhone Cocok untuk pelajar, mahasiswa, guru, pekerja kantor, dan siapa pun yang ingin membuat PDF dengan mudah. Apa Itu File PDF dan Mengapa Penting? PDF adalah format dokumen yang dikembangkan oleh Adobe. Do...
Read more

Cara Menghemat Baterai HP Oppo agar Tahan Seharian

Cara Menghemat Baterai HP Oppo agar Tahan Seharian Baterai menjadi salah satu komponen paling penting pada HP Oppo, apalagi bagi pengguna yang aktif menggunakan ponsel untuk media sosial, gaming, dan pekerjaan sehari-hari. Sayangnya, penggunaan yang intensif sering membuat baterai cepat habis, dan hal ini bisa sangat mengganggu. Artikel ini akan membahas berbagai cara menghemat baterai HP Oppo agar daya tahan lebih lama, termasuk tips pengaturan, fitur bawaan, dan trik praktis yang bisa langsung dicoba. 1. Memanfaatkan Fitur Hemat Daya Bawaan Oppo HP Oppo dilengkapi dengan fitur Hemat Daya yang memungkinkan ponsel mengatur penggunaan energi secara otomatis. Cara mengaktifkannya: Buka Pengaturan → Baterai . Pilih Mode Hemat Daya . Aktifkan fitur tersebut dan pilih level penghematan yang diinginkan. Mode Hemat Daya akan membatasi aktivitas aplikasi di background, menurunkan kecerahan layar otomatis, dan mengurangi animasi agar baterai lebih awet. Selain mode hemat daya stand...
Read more

Tips Menggunakan S-Pen di Samsung Terbaru: Maksimalkan Kreativitas dan Produktivitas

Tips Menggunakan S-Pen di Samsung Terbaru: Maksimalkan Kreativitas dan Produktivitas Samsung dikenal dengan inovasi yang memudahkan penggunanya. Salah satu fitur paling ikonik adalah S-Pen , stylus pintar yang hadir di seri Galaxy Note dan Galaxy Ultra terbaru. S-Pen bukan hanya alat untuk menulis, tetapi juga meningkatkan produktivitas, kreativitas, dan efisiensi pengguna. Artikel ini akan membahas tips lengkap menggunakan S-Pen di Samsung terbaru , sehingga setiap pengguna bisa memaksimalkan potensinya. 1. Apa Itu S-Pen? S-Pen adalah stylus yang terintegrasi dengan smartphone Samsung. Berbeda dengan stylus biasa, S-Pen memiliki fitur canggih seperti: Tekanan sensitif untuk menulis dan menggambar. Fungsi remote dengan tombol fisik untuk mengontrol aplikasi. Air Actions yang memungkinkan gesture tanpa menyentuh layar. Integrasi dengan aplikasi Samsung Notes, Air Command, dan lainnya. S-Pen memungkinkan pengalaman menulis dan menggambar lebih natural, mirip menggunakan pena d...
Read more