Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya atau style halaman web. Dengan CSS, kita dapat mengontrol warna, tata letak, jenis font, dan banyak lagi untuk memperindah tampilan situs web kita. Properti CSS terdiri dari pasangan key-value yang menginstruksikan browser tentang bagaimana elemen HTML harus ditampilkan. Pada tutorial tentang properti dasar CSS ini akan membahas beberapa properti yang sering digunakan yang berkaitan dengan “Warna dan Latar Belakang”, “Teks dan Font”, “Padding, Margin, dan Border”, “Ukuran dan Posisi Elemen”.
Bagian 1: Warna dan Latar Belakang
Warna dan latar belakang adalah aspek penting dalam mendesain tampilan web yang menarik. Berikut adalah beberapa properti utama yang dapat Anda gunakan untuk memformat warna dan latar belakang menggunakan CSS:
1. Properti Warna (color)
Properti color digunakan untuk mengubah warna teks pada elemen. Anda dapat menggunakan nilai berupa nama warna, kode hex, RGB, atau HSL.
Contoh penggunakan properti color:
1 2 3 4 5 6 | h1{ color: red; /* Mengubah warna teks menjadi merah */ } p{ color: #333333; /* Mengubah warna teks menjadi abu-abu gelap */ } |
2. Properti Latar Belakang (background)
Properti background digunakan untuk mengatur latar belakang elemen. Anda dapat mengatur warna latar belakang, gambar latar belakang, dan lainnya.
Contoh penggunaan properti background:
1 2 3 4 | header { background-color: #F2F2F2; /* Mengatur latar belakang header menjadi abu-abu muda */ background-image: url('header-bg.jpg'); /* Menggunakan gambar sebagai latar belakang */ } |
Pada contoh di atas telah dicontohkan penggunakan properti background-color dan background-image. Selain itu ada beberapa properti terkait background yaitu:
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
Contoh penggunaan sebagai berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .banner { background-image: url('banner-bg.jpg'); background-repeat: no-repeat; /* Mencegah gambar latar belakang diulang */ } .parallax { background-image: url('parallax-bg.jpg'); background-attachment: fixed; /* Membuat gambar latar belakang tetap pada posisinya saat halaman digulir */ } .featured-box { background-image: url('box-bg.jpg'); background-position: center top; /* Mengatur posisi gambar latar belakang ke tengah horizontal dan atas vertikal */ } .call-to-action { background: #3498db url('cta-bg.jpg') center/cover no-repeat fixed; /* Kombinasi warna biru, gambar "cta-bg.jpg", posisi tengah, ukuran menutupi elemen, tanpa pengulangan, dan tetap pada posisinya saat halaman digulir */ } |
Bagian 2: Teks dan Font
Teks dan jenis font memiliki dampak besar terhadap keterbacaan dan estetika situs web Anda. Berikut adalah beberapa properti yang terkait dengan font:
1. Properti Ukuran Font (font-size)
Properti font-size digunakan untuk mengatur ukuran teks pada elemen. Nilai dari font-size dapat berupa px, em atau dalam ukuran %.
Contoh:
1 2 3 4 5 6 7 8 9 10 11 | h1 { font-size: 40px; } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 80%; } |
2. Properti Jenis Font (font-family)
Dalam desain web, properti font-family digunakan untuk menentukan jenis font yang akan digunakan pada teks di dalam elemen HTML. Ini memungkinkan Anda mengubah gaya tulisan agar lebih sesuai dengan tema dan gaya desain situs web Anda. Properti ini memberi Anda kontrol atas jenis font yang akan ditampilkan pada halaman web.
Contoh:
1 2 3 | body { font-family: 'Arial', sans-serif; /* Menggunakan font Arial dengan backup jenis font sans-serif */ } |
Bagian 3: Padding, Margin, dan Border
Padding, margin, dan border mempengaruhi tata letak dan kerangka elemen di dalam halaman web.
1. Properti Padding
Properti padding digunakan untuk memberikan jarak antara konten dalam elemen dan batasannya.
Contoh:
1 2 3 | section { padding: 20px; /* Memberikan jarak 20px pada semua sisi konten di dalam elemen section */ } |
2. Properti Margin
Properti margin digunakan untuk memberikan jarak antara elemen dengan elemen lain di sekitarnya.
Contoh:
1 2 3 | div { margin: 10px; /* Memberikan jarak 10px pada semua sisi elemen div */ } |
3. Properti Border
Properti border digunakan untuk menambahkan garis di sekitar elemen. Anda dapat mengatur ketebalan, jenis, dan warna garis.
Contoh:
1 2 3 4 | button { border: 2px solid #3498db; /* Menambahkan garis solid berwarna biru pada tombol */ border-radius: 5px; /* Mengatur radius sudut garis menjadi melengkung */ } |
Bagian 4: Ukuran dan Posisi Elemen
Ukuran dan posisi elemen sangat penting untuk menciptakan tata letak yang responsif dan menarik.
1. Properti Lebar dan Tinggi (width dan height)
Properti width dan height digunakan untuk mengatur lebar dan tinggi elemen.
Contoh:
1 2 3 4 | img { width: 100%; /* Mengatur gambar agar selalu memiliki lebar 100% dari kontainer */ height: auto; /* Menjaga perbandingan aspek gambar agar tidak terdistorsi */ } |
2. Properti Posisi (position)
Properti position digunakan untuk mengontrol cara elemen ditempatkan dalam halaman. Nilai umum termasuk static, relative, absolute, dan fixed.
Contoh:
1 2 3 4 5 | footer { position: fixed; /* Membuat footer tetap berada di bagian bawah layar */ bottom: 0; /* Menempatkan elemen di bagian bawah */ width: 100%; /* Mengisi lebar layar */ } |
Contoh Penggunaan Properti Dasar CSS dalam desain Halaman Web
File html latihan_css_003.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Laman Web dengan Properti Dasar CSS KelasRingan.Com</title> <link rel="stylesheet" href="assets/css/style_properti_dasar.css"> </head> <body> <header> <h1>Selamat Datang di Contoh Laman Web KelasRingan.Com</h1> </header> <nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang Kami</a></li> <li><a href="#">Layanan</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> <div class="container"> <h1>Tentang Kami</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, augue vel tincidunt hendrerit, ligula risus varius justo, nec malesuada sapien sem et nisi.</p> <p>Nullam a felis eget dui blandit lacinia vel vel purus. Sed id condimentum mi. Curabitur condimentum in felis ac fringilla.</p> </div> <footer> <p>Copyright © 2023 KelasRingan.Com</p> </footer> </body> </html> |
File CSS assets/css/style_properti_dasar.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header{ background-color: #333; text-align: center; padding: 10px; } header > h1 { color: white; } nav ul { list-style: none; margin: 0; padding: 10px; display: flex; justify-content: center; background-color: #444; } nav li { margin: 0 20px; } nav a { text-decoration: none; color: white; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; } h1 { color: #333; } p { line-height: 1.6; margin-bottom: 20px; } footer { text-align: center; padding: 10px; background-color: #444; color: white; } |
Hasilnya jika kita jalankan file latihan_css_003.html pada web browser adalah sebagai berikut:
Dalam tutorial ini, kami telah membahas properti dasar CSS yang mencakup warna dan latar belakang, teks dan font, padding, margin, border, serta ukuran dan posisi elemen. Dengan menguasai properti-properti ini, Anda akan dapat menciptakan tampilan web yang menarik dan sesuai dengan tujuan desain Anda. Berikutnya kami akan memberikan penerapan properti dasar CSS pada halaman web.
Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.