Jika HTML adalah kerangka rumahnya, maka CSS (Cascading Style Sheets) adalah cat tembok, desain interior, dan furniturnya. Tanpa CSS, website kamu hanya akan berisi teks hitam-putih yang membosankan.
Apa itu CSS?
CSS adalah bahasa yang digunakan untuk mengatur tampilan elemen HTML. Dengan CSS, kamu bisa mengubah warna teks, jenis font, ukuran gambar, hingga membuat tata letak (layout) yang rapi dan responsif di HP maupun Laptop.
Cara Kerja CSS
CSS bekerja dengan cara memilih elemen HTML (Selector) lalu memberinya gaya (Property). Perhatikan contoh sederhana ini:
/* Ini adalah komentar di CSS */
h1 {
color: blue; /* Mengubah warna judul jadi biru */
font-size: 32px; /* Mengubah ukuran huruf */
text-align: center; /* Membuat judul ke tengah */
}
p {
color: gray; /* Mengubah warna paragraf jadi abu-abu */
font-family: Arial; /* Mengubah jenis huruf */
}
3 Cara Memasang CSS:
Inline CSS: Langsung di dalam tag HTML.
Internal CSS: Di dalam bagian
<head>file HTML.External CSS: Menggunakan file terpisah (misal:
style.css). Ini adalah cara paling profesional!
-----
ini contoh internal<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Perkenalanku</title>
<style>
/* 1. Mengatur gaya untuk seluruh halaman */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5; /* Warna background abu-abu muda */
display: flex;
justify-content: center; /* Membuat konten ke tengah secara horizontal */
align-items: center; /* Membuat konten ke tengah secara vertikal */
height: 100vh; /* Menggunakan tinggi penuh layar */
margin: 0;
}
/* 2. Mengatur gaya untuk kartu profil */
.profile-card {
background-color: white;
width: 350px;
padding: 30px;
border-radius: 20px; /* Membuat sudut melengkung */
box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Memberi efek bayangan halus */
text-align: center; /* Semua teks di dalam kartu jadi di tengah */
transition: transform 0.3s ease; /* Efek animasi saat kursor di atasnya */
}
/* Efek sedikit terangkat saat kartu disentuh kursor */
.profile-card:hover {
transform: translateY(-5px);
}
/* 3. Mengatur gaya Foto Profil */
.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%; /* Membuat gambar jadi bulat sempurna */
object-fit: cover; /* Memastikan gambar tidak gepeng */
border: 5px solid #007bff; /* Memberi bingkai biru */
margin-bottom: 20px;
}
/* 4. Mengatur gaya Nama */
h1 {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
}
/* 5. Mengatur gaya info (Umur, Hobby) */
.info {
font-size: 16px;
color: #666;
margin: 5px 0;
}
.highlight {
color: #007bff; /* Warna biru untuk menonjolkan kata kunci */
font-weight: bold;
}
/* 6. Mengatur gaya Garis Pembatas */
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0;
}
/* 7. Mengatur gaya Filsafah Hidup */
.quote-title {
font-size: 14px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.quote {
font-style: italic;
color: #555;
background-color: #f9f9f9;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #007bff; /* Garis hiasan di sebelah kiri */
margin: 0;
}
</style>
</head>
<body>
<div class="profile-card">
<img src="https://via.placeholder.com/150" alt="Foto Profil" class="profile-pic">
<h1>Budi Pratama</h1>
<p class="info">Umur: <span class="highlight">22 Tahun</span></p>
<p class="info">Hoby: <span class="highlight">Coding, Membaca, Traveling</span></p>
<hr>
<p class="quote-title">Filsafah Hidup</p>
<blockquote class="quote">
"Hari ini harus lebih baik dari kemarin, dan hari esok harus lebih baik dari hari ini."
</blockquote>
</div>
</body>
</html>
0 Komentar