CSS Tutorial Dasar untuk Pemula: Syntax dan Contoh
Artikel ini akan membantumu belajar CSS dengan lebih mudah, disertai aturan penulisan dan contoh lengkap!
Software Engineering
RevoU Staff
<p id=""><a href="https://revou.co/kosakata/css" target="_blank">CSS</a> adalah elemen kunci yang mengubah struktur dasar <a href="https://revou.co/kosakata/html" target="_blank">HTML</a> menjadi karya seni visual, memberikan nuansa dan estetika yang membuat <em id="">website </em>lebih menarik sekaligus fungsional.</p><p id="">Dengan CSS, kamu bisa mengontrol tampilan berbagai elemen HTML, mulai dari warna, <em id="">font</em>, sampai <em id="">layout</em>, membuat audiens mendapatkan pengalaman yang lebih berkesan. Jika HTML adalah kerangka bangunan, CSS merupakan cat dan dekorasi yang mempercantik bangunan tersebut.</p><p id="">Dalam artikel ini, kita akan belajar CSS secara mendalam serta bagaimana kamu bisa memanfaatkannya untuk menciptakan desain <em id="">web </em>yang menarik. Selamat membaca!</p><h2 id="">Persiapan Sebelum Belajar CSS</h2><p id="">Sebelum memulai, kamu perlu mengetahui bahwa memahami struktur dan sintaks HTML adalah kunci untuk mempelajari CSS.</p><p id="">HTML menggunakan <a href="https://revou.co/panduan-teknis/tag-html" target="_blank"><em id="">tag</em></a> untuk menentukan elemen seperti paragraf, judul, gambar, dan lain-lain. Misalnya, <em id="">tag </em>< p > dipakai untuk paragraf. Sementara <em id="">tag </em>< h1 > berfungsi untuk judul utama. Jika kamu sudah mengerti bagaimana <em id="">tag </em>dan elemen HTML bekerja, kamu akan lebih mudah memahami tutorial CSS dan menerapkannya dalam proyekmu.</p><p id="">Sebagai <a href="https://revou.co/panduan-karir/web-developer-adalah" target="_blank"><em id="">web developer</em></a>, kamu akan sering bekerja dengan HTML dan CSS secara bersamaan. Contohnya, saat kamu ingin mengubah tampilan teks atau gambar, kamu akan menggunakan CSS untuk melakukannya. Namun, sebelum itu, kamu perlu memastikan bahwa elemen HTML sudah ada dan ditempatkan dengan benar.</p><p id="">Jadi, sebelum kamu terjun ke dalam CSS tutorial, pastikan kamu sudah memiliki pemahaman yang baik tentang HTML. </p><h2 id="">Aturan Penulisan CSS</h2><p id="">Jika kamu sudah memahami dasar-dasar HTML dan siap melanjutkan belajar CSS, ada beberapa aturan penulisan yang perlu kamu ketahui.</p><p id="">Dalam CSS, ada beberapa komponen utama yang membentuk kode, yaitu<em id=""> selector, declaration, property, </em>dan <em id="">value</em>. Mari kita bahas satu per satu.</p><ul id=""><li id=""><strong id=""><em id="">Selector</em></strong>: <em id="">selector </em>adalah cara untuk menargetkan elemen HTML yang ingin kamu ubah tampilannya menggunakan CSS. Di CSS, <em id="">selector </em>bisa berupa nama <em id="">tag </em>HTML, <em id="">class</em>, ID, dan berbagai jenis selector lainnya.</li></ul><p id="">Sebagai contoh, untuk menargetkan semua elemen < p >, kamu akan menggunakan <em id="">selector </em><strong id="">p</strong>. Namun, ini hanya beberapa contoh dari beragam <em id="">selector </em>yang tersedia di CSS. Untuk informasi lebih lengkap mengenai <em id="">selector </em>yang bisa digunakan, kamu bisa mengunjungi <a href="https://www.w3schools.com/cssref/css_selectors.php" target="_blank">w3schools</a>.</p><ul id=""><li id=""><strong id=""><em id="">Declaration</em></strong>: <em id="">declaration </em>adalah kumpulan aturan yang akan diterapkan pada elemen yang ditargetkan oleh <em id="">selector</em>. <em id="">Declaration </em>berada di dalam kurung kurawal<strong id=""> {}</strong> setelah selector. Contoh:<strong id=""> p { color: red; }.</strong></li><li id=""><strong id=""><em id="">Property</em></strong>: <em id="">Property </em>adalah aspek spesifik dari elemen yang ingin kamu ubah. Dalam <a href="https://revou.co/panduan-karir/belajar-web-development" target="_blank"><em id="">web development</em></a>, <em id="">property </em>bisa berupa warna teks, jenis <em id="">font, margin, padding</em>, dan lain-lain. Di CSS, <em id="">property </em>ini akan ditemukan sebagai bagian dari <em id="">declaration</em>.</li><li id=""><strong id=""><em id="">Value</em></strong>: <em id="">value </em>adalah nilai yang akan diberikan pada <em id="">property</em>. Misalnya, jika <em id="">property</em>-nya adalah <em id="">color</em>, <em id="">value</em>-nya bisa berupa <strong id="">red, #FF0000</strong> atau<strong id=""> rgb(255,0,0).</strong> <em id="">Value</em> menentukan bagaimana perubahan akan terlihat pada elemen target.</li></ul><h2 id="">Cara Menulis Kode CSS dengan Contoh Sederhana</h2><p id="">Berikut beberapa cara menulis kode CSS disertai contohnya.</p><h3 id=""><strong id="">Mempercantik tampilan tombol</strong></h3><p id="">Untuk mempercantik tampilan tombol, kamu bisa menggunakan beberapa <em id="">property </em>CSS, seperti<em id=""> border, padding</em>, dan <em id="">border-radius</em>.</p><p id="">Misalnya, kamu memiliki elemen HTML berikut:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--<button class="my-button">Klik Saya</button>--></code></pre></div><p id="">Kamu bisa menulis kode CSS sebagai berikut untuk mempercantik tampilannya:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--.my-button {
border: 2px solid #007BFF;
padding: 10px 20px;
border-radius: 5px;
}--></code></pre></div><p id="">Dalam contoh di atas, <em id="">border </em>menambahkan batas sekitar tombol, <em id="">padding </em>memberikan jarak antara teks dan batas tombol, serta <em id="">border-radius</em> membuat sudut tombol menjadi bulat.</p><h3 id=""><strong id="">Menambahkan warna latar dan teks pada tombol</strong></h3><p id="">Untuk menambahkan warna latar dan warna teks pada tombol, kamu bisa menggunakan <em id="">property </em><strong id="">background-color</strong>.</p><p id="">Contoh:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--.my-button {
background-color: #007BFF;
color: white;
}--></code></pre></div><p id="">Pada contoh di atas, <strong id="">background-color: #007BFF</strong>; menetapkan warna latar belakang tombol menjadi biru dan <strong id="">color: white;</strong> menetapkan warna teks menjadi putih.</p><p id="">Dengan menggabungkan semua <em id="">property </em>ini, kode CSS untuk tombol akan ditampilkan sebagai berikut:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--.my-button {
border: 2px solid #007BFF;
padding: 10px 20px;
border-radius: 5px;
background-color: #007BFF;
color: white;
}--></code></pre></div><h2 id="">Cara Menambahkan CSS di HTML</h2><p id="">Ada beberapa cara untuk menambahkan CSS di HTML. Namun, dua metode di bawah ini paling umum digunakan.</p><h3 id=""><strong id="">Menggunakan tag < link > untuk menautkan CSS eksternal</strong></h3><p id="">Salah satu cara menambahkan CSS ke dalam HTML adalah menggunakan <em id="">tag </em>< link >. Metode ini memungkinkan kamu menyimpan kode CSS dalam <em id="">file </em>terpisah yang biasanya memiliki ekstensi <strong id="">.css.</strong></p><p id="">Cara Ini sangat membantu untuk memisahkan struktur (HTML) dan <em id="">style </em>(CSS), sehingga lebih mudah dikelola.</p><p id="">Contoh penggunaan <em id="">tag </em>< link > adalah sebagai berikut:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Konten HTML di sini -->
</body>
</html>--></code></pre></div><p id="">Dalam contoh ini,<strong id=""> href="styles.css"</strong> menunjukkan lokasi <em id="">file </em>CSS yang ingin kamu tautkan. Pastikan lokasi dan nama <em id="">file </em>sudah benar agar CSS berhasil diterapkan.</p><h3 id=""><strong id="">Memasukkan kode CSS langsung dalam </strong><a href="https://revou.co/panduan-teknis/html-style" target="_blank"><strong id="">tag < style > di HTML</strong></a></h3><p id="">Metode kedua adalah memasukkan kode CSS langsung ke dalam dokumen HTML menggunakan <em id="">tag </em>< style >. <em id="">Tag </em>ini biasanya ditempatkan di dalam elemen < head > dokumen HTML.</p><p id="">Contoh penggunaannya sebagai berikut:</p><div data-rt-embed-type='true'><pre><code class="language-markup"><!--<!DOCTYPE html>
<html>
<head>
<style>
.my-button {
border: 2px solid #007BFF;
padding: 10px 20px;
border-radius: 5px;
background-color: #007BFF;
color: white;
}
</style>
</head>
<body>
<button class="my-button">Klik Saya</button>
</body>
</html>--></code></pre></div><p id="">Dalam contoh di atas, kode CSS ditempatkan di antara <em id="">tag </em>< style > dan < /style >. Kode CSS ini akan diterapkan pada elemen HTML di dalam dokumen yang sama.</p><p id="">Namun, pendekatan seperti ini kurang disarankan karena dapat membuat struktur dokumen HTML menjadi kurang rapi. Sebagai <em id="">best practice</em>, sebaiknya pisahkan antara penulisan HTML dan CSS.</p><p id="">Menggunakan CSS eksternal yang dihubungkan ke HTML melalui <em id="">tag </em>< link > tidak hanya membuat kode lebih rapi, tetapi juga memudahkan dalam pengelolaan dan pemeliharaan, karena tidak mencampur kode CSS dan HTML dalam satu <em id="">file</em>.</p><h2 id="">FAQ (Frequently Asked Question)</h2><h3 id=""><strong id="">Apa itu inheritance dalam CSS?</strong></h3><p id=""><em id="">Inheritance </em>atau pewarisan dalam CSS adalah mekanisme di mana beberapa <em id="">property </em>CSS diwariskan dari elemen induk ke elemen anak. Artinya, jika kamu menetapkan suatu <em id="">property</em>, seperti<strong id=""> font-family</strong> atau <strong id="">color</strong> pada elemen induk, elemen anak juga akan mewarisi <em id="">property </em>tersebut, kecuali jika kamu menetapkan nilai berbeda secara eksplisit pada elemen anak.</p><p id="">Pewarisan ini memudahkan pengelolaan <em id="">style </em>pada elemen yang berbeda tetapi seharusnya memiliki tampilan yang serupa.</p><h3 id=""><strong id="">Bagaimana cara </strong><a href="https://revou.co/kosakata/debugging" target="_blank"><strong id="">debug</strong></a><strong id=""> kode CSS?</strong></h3><p id=""><em id="">Debugging </em>kode CSS bisa dilakukan dengan beberapa cara.</p><p id="">Salah satu metode paling umum adalah menggunakan <em id="">developer tool</em> yang disediakan oleh <em id="">web browser</em>, seperti Chrome DevTools. Dengan alat ini, kamu bisa memeriksa elemen HTML dan melihat <em id="">style </em>CSS yang diterapkan pada elemen tersebut.</p><p id="">Kamu juga dapat mengubah <em id="">property </em>CSS secara <em id="">real-time</em> untuk melihat perubahannya. Selain itu, pastikan untuk memeriksa urutan kode CSS kamu serta memastikan tidak ada kesalahan sintaks atau <em id="">typo </em>yang bisa menyebabkan kode tidak berjalan dengan semestinya.</p><h2 id="">Penutup</h2><p id="">Memahami tutorial CSS menjadi langkah krusial dalam perjalananmu sebagai <em id="">web developer</em>. Dari memahami dasar-dasar HTML, aturan penulisan CSS, hingga cara mengimplementasikannya dalam dokumen HTML, setiap aspek memiliki peranannya sendiri dalam membentuk sebuah <em id="">website </em>yang tidak hanya fungsional tetapi juga estetik.</p>