CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web.
Cara Menyisipkan CSS
Ada tiga cara utama untuk menyisipkan CSS ke dalam HTML:
- Inline CSS: CSS ditulis langsung di atribut elemen HTML dengan
style.htmlCopy code<p style="color: red; font-size: 16px;">Ini adalah paragraf berwarna merah.</p> - Internal CSS: CSS ditulis di dalam tag
<style>di bagian<head>dari dokumen HTML.htmlCopy code<head> <style> p { color: blue; font-size: 18px; } </style> </head> - External CSS: CSS ditulis di file terpisah dengan ekstensi
.css, lalu dihubungkan ke halaman HTML menggunakan tag<link>.htmlCopy code<head> <link rel="stylesheet" href="styles.css"> </head>
Contoh Dasar CSS
- Selector dan Properti CSS Selector digunakan untuk memilih elemen HTML yang ingin diberi gaya, sedangkan properti CSS mengatur aspek visual elemen tersebut.
- Contoh Selektor Elemen:cssCopy code
h1 { color: green; font-size: 24px; } - Contoh Selektor Kelas (menggunakan tanda titik
.):cssCopy code.highlight { background-color: yellow; font-weight: bold; }htmlCopy code<p class="highlight">Ini adalah teks dengan latar belakang kuning.</p> - Contoh Selektor ID (menggunakan tanda pagar
#):cssCopy code#header { color: white; background-color: navy; padding: 10px; }htmlCopy code<div id="header">Ini adalah header.</div>
- Contoh Selektor Elemen:cssCopy code
- Warna dan Latar Belakang CSS memungkinkan kita mengubah warna teks dan latar belakang elemen.cssCopy code
body { background-color: #f0f0f0; } p { color: #333333; background-color: #e0e0e0; } - Font dan Teks CSS menyediakan properti untuk mengatur font, ukuran teks, ketebalan, dan perataan.cssCopy code
h1 { font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; text-align: center; } p { font-size: 16px; line-height: 1.5; } - Margin dan Padding Margin adalah jarak luar antar elemen, sedangkan padding adalah jarak dalam antara konten elemen dan batas elemen.cssCopy code
.container { margin: 20px; padding: 10px; border: 1px solid #ccc; } - Border CSS memungkinkan kita menambahkan border pada elemen HTML dengan pengaturan warna, ketebalan, dan jenis garis.cssCopy code
.box { border: 2px solid black; border-radius: 5px; /* Membuat sudut border menjadi melengkung */ } - Layout dengan Flexbox dan Grid
- Flexbox: Digunakan untuk tata letak berbasis fleksibel, mempermudah pengaturan elemen dalam baris atau kolom.cssCopy code
.flex-container { display: flex; justify-content: space-between; align-items: center; } - Grid: Digunakan untuk tata letak berbasis grid, cocok untuk tata letak halaman yang kompleks.cssCopy code
.grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px; }htmlCopy code<div class="grid-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
- Flexbox: Digunakan untuk tata letak berbasis fleksibel, mempermudah pengaturan elemen dalam baris atau kolom.cssCopy code
Dengan CSS, kita bisa mengatur tampilan halaman agar lebih menarik dan responsif.
6. Selamat, anda sudah bisa menginstall laravel versi terbaru sesuai dengan requirment PHP nya
Referensi Lainnya :
- https://www.petanikode.com/css-untuk-pemula/?authuser=0
- https://aufaroot18.medium.com/tutorial-css-lengkap-indonesia-73386cd6eb29?authuser=0
- https://htmlcheatsheet.com/css/?authuser=0
- https://websitesetup.org/css3-cheat-sheet/?authuser=0
- https://www.w3schools.com/css/?authuser=0
- https://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/?authuser=0
