Halo semuanya, pada artikel alafgani.web.id kita akan membahas Contoh CSS Sederhana, mari kita simak contoh dan penjelasannya:
Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen pada halaman web. Dengan menggunakan CSS, Anda dapat memberikan gaya visual yang menarik dan konsisten pada situs web Anda. Bagi pemula, memahami dasar-dasar CSS sangat penting. Dalam artikel ini, kami akan memberikan contoh-contoh CSS sederhana yang cocok bagi pemula untuk memulai perjalanan mereka dalam desain web.
Baca Juga : Memahami Class pada CSS beserta Contohnya
Mengatur Warna dan Ukuran Font
Misalkan kita ingin mengubah warna dan ukuran font pada elemen teks pada halaman web. Berikut adalah contoh CSS sederhana untuk mencapai hal tersebut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Sederhana</title>
<style>
/* Mengubah warna dan ukuran font */
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Ini adalah contoh teks dengan gaya CSS sederhana.</p>
</body>
</html>
Pada contoh di atas, kami menggunakan elemen <style>
untuk menempatkan kode CSS di dalam elemen <head>
pada halaman HTML. CSS tersebut akan diterapkan pada semua elemen <p>
(paragraf) di dalam halaman web. Dalam contoh ini, teks pada paragraf akan berwarna biru dengan ukuran font 16 piksel.
Mengatur Tampilan Tombol
Kita juga dapat menggunakan CSS untuk mengubah tampilan tombol. Berikut adalah contoh sederhana untuk mengubah warna latar belakang, ukuran font, dan tata letak tombol:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Sederhana</title>
<style>
/* Mengatur tampilan tombol */
.tombol {
background-color: #4CAF50;
color: white;
font-size: 14px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class=”tombol”>Klik Saya</button>
</body>
</html>
Mengubah Warna Teks
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Dasar</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Ini adalah contoh teks dengan warna biru.</p>
</body>
</html>
Pada contoh ini, kode CSS p { color: blue; }
diterapkan. Ini berarti semua elemen <p>
(paragraf) akan memiliki warna teks biru. Anda dapat mengganti warna biru dengan nilai lain seperti red (merah), green (hijau), atau menggunakan kode warna seperti #ff0000 (merah).
Mengubah Warna Latar Belakang
<html>
<head>
<title>Contoh CSS Dasar</title>
<style>
body {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Halaman dengan latar belakang abu-abu</h1>
<p>Ini adalah contoh paragraf pada latar belakang abu-abu.</p>
</body>
</html>
Pada contoh di atas, kami menggunakan class selector dengan nama “tombol” untuk mengatur tampilan tombol. CSS tersebut akan memberikan latar belakang hijau (#4CAF50), teks berwarna putih, ukuran font 14 piksel, padding (jeda) sebesar 10 piksel di atas dan bawah serta 20 piksel di kiri dan kanan, tidak ada border, dan mengubah kursor menjadi tanda panah saat diarahkan ke tombol.
Mengubah Ukuran Font
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Dasar</title>
<style>
h1 {
font-size: 24px;
}
</style>
</head>
<body>
<h1>Ini adalah judul dengan ukuran font 24px</h1>
<p>Ini adalah paragraf dengan ukuran font default.</p>
</body>
</html>
Pada contoh ini, kode CSS h1 { font-size: 24px; }
diterapkan. Ini mengubah ukuran font pada semua elemen <h1>
menjadi 24 piksel. Anda dapat mengganti nilai 24px dengan ukuran font lain sesuai kebutuhan.
Mengatur Padding dan Margin
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Dasar</title>
<style>
div {
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<h2>Ini adalah judul dalam sebuah div</h2>
<p>Ini adalah paragraf dalam sebuah div.</p>
</div>
</body>
</html>
Pada contoh ini, kode CSS div { padding: 10px; margin: 20px; }
digunakan. Ini memberikan jarak (padding) sebesar 10 piksel di dalam dan jarak (margin) sebesar 20 piksel di luar semua elemen <div>
. Anda dapat mengganti nilai padding dan margin sesuai preferensi Anda.
Menerapkan Gaya Hover
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Dasar</title>
<style>
button:hover {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<button>Klik Saya</button>
</body>
</html>
Pada contoh ini, kode CSS button:hover { background-color: yellow; color: black; }
diterapkan. Ini mengubah latar belakang tombol menjadi kuning dan warna teks menjadi hitam saat tombol tersebut diarahkan (hover) oleh kursor. Anda dapat mengganti warna latar belakang dan warna teks sesuai keinginan Anda.
Dalam semua contoh tersebut, kode CSS ditempatkan di dalam elemen <style>
di dalam bagian <head>
dokumen HTML. CSS tersebut akan diterapkan pada elemen-elemen yang dipilih (misalnya <p>
, <body>
, <h1>
, <div>
, atau button
) sesuai dengan aturan yang ditetapkan dalam kode CSS.
itulah contoh CSS sederhana yang cocok bagi An yang ingin mempelajari dasar-dasar desain web. Dengan menggunakan CSS, Anda dapat mengubah tampilan dan tata letak elemen-elemen pada halaman web dengan mudah. Teruslah eksplorasi dan berlatih menggunakan CSS untuk mengembangkan keterampilan desain web Anda. Semoga artikel ini memberikan dasar yang baik untuk memulai perjalanan Anda dalam dunia CSS!
Apakah kamu ingin mempelajari dasar-dasar HTML, membangun halaman web yang menarik, atau mengembangkan keahlian dalam pengkodean web?
e-Book kami memberikan panduan langkah demi langkah yang mudah diikuti, dilengkapi dengan contoh kode dan penjelasan yang jelas.
Apa yang akan kamu dapatkan dari eBook ini:
- Penjelasan mendalam tentang tag-tag HTML dan fungsinya.
- Petunjuk praktis untuk membangun struktur dasar halaman web.
- Cara mengatur tata letak dan gaya menggunakan CSS.
- Teknik dasar untuk menambahkan gambar, tautan, dan multimedia ke dalam halaman web.
- Tips dan trik untuk mengoptimalkan kode HTML Anda.
Jangan lewatkan kesempatan ini untuk meningkatkan pengetahuan dan keterampilan kamu dalam Pengembangan Web. Unduh eBook “Panduan Pemula HTML: Menguasai Dasar-Dasar Pengembangan Web” secara gratis sekarang juga!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.