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.html<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.<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>.<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:
h1 { color: green; font-size: 24px; } - Contoh Selektor Kelas (menggunakan tanda titik
.):.highlight { background-color: yellow; font-weight: bold; }<p class="highlight">Ini adalah teks dengan latar belakang kuning.</p> - Contoh Selektor ID (menggunakan tanda pagar
#):#header { color: white; background-color: navy; padding: 10px; }<div id="header">Ini adalah header.</div>
- Contoh Selektor Elemen:
- Warna dan Latar Belakang CSS memungkinkan kita mengubah warna teks dan latar belakang elemen.
body { background-color: #f0f0f0; }p { color: #333333; background-color: #e0e0e0; } - Font dan Teks CSS menyediakan properti untuk mengatur font, ukuran teks, ketebalan, dan perataan.
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.
.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.
.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.
.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.
.grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px; }<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.
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
