Pemrograma
n Web
CSS Dasar
1. Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengontrol tampilan dan tata
letak elemen-elemen HTML di dalam sebuah halaman web. Dengan CSS, tampilan web bisa dibuat lebih
menarik dan responsif.
Cara Menggunakan CSS
Ada tiga cara untuk menerapkan CSS dalam HTML:
[Link] CSS (langsung di dalam elemen HTML)
<p style="color: blue; font-size: 20px;">Ini adalah paragraf dengan inline CSS</p>
[Link] CSS (ditulis di dalam tag <style> di dalam <head>)
<style>
p { color: red; font-size: 18px; }
</style>
[Link] CSS (ditulis di file terpisah dengan ekstensi .css dan dipanggil dengan <link>)
<link rel="stylesheet" href="[Link]">
2. Selektor dalam CSS
Selektor digunakan untuk memilih elemen HTML yang akan diberikan gaya.
•Selektor Universal (*) –> Menerapkan gaya ke semua elemen.
•Selektor Elemen (p, h1, div) –> Menerapkan gaya berdasarkan tag HTML.
•Selektor ID (#id_elemen) –> Menargetkan satu elemen tertentu.
•Selektor Class (.nama_class) –> Menargetkan beberapa elemen dengan class yang sama.
•Selektor Atribut (input[type="text"]) –> Menargetkan elemen dengan atribut tertentu.
•Selektor Pseudo-class (:hover, :focus, :nth-child()) –> Menerapkan gaya berdasarkan keadaan elemen.
•Selektor Pseudo-element (::before, ::after) –> Menambahkan elemen virtual sebelum atau setelah elemen asli.
Contoh penggunaan:
p{
color: blue; font-size: 16px;
}
#judul {
font-weight: bold;
}
.konten {
background-color: lightgray; padding: 10px;
}
3. Properti Dasar dalam CSS
3.1 Warna dan Latar Belakang
body { 3.2 Teks dan Font
background-color: #f4f4f4; h1 {
color: #333; font-family: Arial, sans-serif;
} font-size: 24px;
text-align: center;
}
3.3 Box Model
Box model terdiri dari margin, border, padding, dan content.
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
Pemrograma
n Web
CSS Lanjutan
4. Layout dengan CSS
4.1 Display dan Position
Display menentukan bagaimana elemen ditampilkan.
•block: Elemen ditampilkan sebagai blok penuh.
•inline: Elemen hanya sebesar kontennya.
•flex: Memungkinkan penggunaan fleksibel dalam pengaturan tata letak .
div {
display: flex;
justify-content: center; 4.2 Float dan Flexbox
•Float memungkinkan elemen untuk mengalir di sekitar teks
align-items: center;
height: 100vh; atau elemen lainnya.
•Flexbox digunakan untuk membuat layout yang fleksibel.
}
.container {
4.3 Grid Layout display: flex;
CSS Grid adalah sistem layout yang lebih kuat flex-direction: row;
dibandingkan Flexbox. justify-content: space-between;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
5. Animasi dan Transisi 5.2 Animasi CSS
5.1 Transisi CSS Animasi memungkinkan perubahan gaya secara bertahap
Transisi memungkinkan perubahan gaya secara bertahap. dalam durasi tertentu.
button { @keyframes fadeIn {
background-color: blue; from { opacity: 0; }
transition: background-color 0.5s; to { opacity: 1; }
} }
button:hover { .box {
background-color: red; animation: fadeIn 2s ease-in;
} }
6. Responsive Web Design
6.1 Media Queries
Media queries digunakan untuk menyesuaikan tampilan berdasarkan ukuran layar.
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
6.2 CSS Grid dan Flexbox untuk Responsivitas
Grid dan Flexbox memungkinkan tata letak yang lebih dinamis untuk berbagai ukuran layar.
.container {
display: flex;
flex-wrap: wrap;
}
.grid { display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Kesimpulan
Dengan memahami CSS dasar dan lanjut, kita bisa mengontrol
tampilan dan tata letak halaman web dengan lebih baik.
Penggunaan selektor, layouting dengan Flexbox dan Grid, serta
efek animasi membuat tampilan web lebih menarik dan
responsif. Menggunakan teknik responsive design memastikan
website dapat menyesuaikan dengan berbagai perangkat dan
ukuran layar.
[Link]
[Link]