Apa itu CSS?
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen HTML. CSS memisahkan konten (HTML) dari presentasi (CSS), membuat kode lebih rapi dan mudah dikelola.
Dengan CSS, Anda dapat mengubah warna, ukuran font, margin, padding, background, dan banyak lagi. CSS juga memungkinkan Anda membuat animasi dan efek visual yang menarik.
Tiga Cara Menggunakan CSS
1. Inline CSS
Menulis CSS langsung di atribut style elemen HTML.
html
<p style="color: red; font-size: 18px;">Teks merah</p>2. Internal CSS
Menulis CSS di dalam tag <style> di bagian <head>.
html
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>3. External CSS
Menulis CSS di file terpisah dan menghubungkannya dengan HTML.
html
<!-- Di file HTML -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- Di file style.css -->
p {
color: green;
font-size: 16px;
}Selector CSS
Element Selector
css
p {
color: black;
font-size: 16px;
}
h1 {
color: blue;
font-size: 32px;
}Class Selector
css
.btn-primary {
background-color: #6366f1;
color: white;
padding: 10px 20px;
}
.text-center {
text-align: center;
}ID Selector
css
#header {
background-color: #1e293b;
padding: 20px;
}
#footer {
background-color: #0f172a;
color: white;
}Kombinasi Selector
css
/* Descendant */
div p {
color: red;
}
/* Child */
ul > li {
list-style: none;
}
/* Sibling */
h1 + p {
margin-top: 0;
}
/* Multiple */
h1, h2, h3 {
font-family: Arial;
}Gradient Background
Linear Gradient
css
/* Dari kiri ke kanan */
background: linear-gradient(to right, #6366f1, #8b5cf6);
/* Dari atas ke bawah */
background: linear-gradient(to bottom, #06b6d4, #10b981);
/* Diagonal */
background: linear-gradient(135deg, #ff0000, #00ff00);
/* Dengan multiple colors */
background: linear-gradient(to right, #6366f1, #8b5cf6, #06b6d4);Radial Gradient
css
/* Dari pusat */
background: radial-gradient(circle, #6366f1, #8b5cf6);
/* Ellipse */
background: radial-gradient(ellipse, #06b6d4, #10b981);
/* Dengan ukuran */
background: radial-gradient(circle at 50% 50%, #ff0000, #00ff00);Box Model
Setiap elemen HTML memiliki box model yang terdiri dari content, padding, border, dan margin.
css
/* Margin - jarak luar */
margin: 20px; /* semua sisi */
margin: 10px 20px; /* atas-bawah, kiri-kanan */
margin: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */
/* Padding - jarak dalam */
padding: 15px;
padding: 10px 20px;
/* Border */
border: 2px solid #334155;
border-radius: 8px;
/* Width & Height */
width: 100%;
height: 200px;
/* Box sizing */
box-sizing: border-box; /* include padding dan border dalam width */Typography
css
/* Font */
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold; /* 100-900 */
font-style: italic;
/* Line Height */
line-height: 1.6;
/* Text */
text-align: center; /* left, right, center, justify */
text-decoration: underline;
text-transform: uppercase; /* lowercase, capitalize */
letter-spacing: 2px;
/* Color */
color: #111827;
background-color: #f9fafb;Siap Berlatih?
Setelah mempelajari materi CSS, coba latihan soal untuk menguji pemahaman Anda.
Mulai Latihan Soal