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

Mau Belajar

Software Engineering

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

Daftar Full Program

Coba Dulu Gratis

<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 website lebih menarik sekaligus fungsional.Dengan CSS, kamu bisa mengontrol tampilan berbagai elemen HTML, mulai dari warna, font, sampai layout, membuat audiens mendapatkan pengalaman yang lebih berkesan. Jika HTML adalah kerangka bangunan, CSS merupakan cat dan dekorasi yang mempercantik bangunan tersebut.Dalam artikel ini, kita akan belajar CSS secara mendalam serta bagaimana kamu bisa memanfaatkannya untuk menciptakan desain web yang menarik. Selamat membaca!<h2 id="">Persiapan Sebelum Belajar CSS</h2>Sebelum memulai, kamu perlu mengetahui bahwa memahami struktur dan sintaks HTML adalah kunci untuk mempelajari CSS.HTML menggunakan <a href="https://revou.co/panduan-teknis/tag-html" target="_blank">tag</a> untuk menentukan elemen seperti paragraf, judul, gambar, dan lain-lain. Misalnya, tag dipakai untuk paragraf. Sementara tag < h1 > berfungsi untuk judul utama. Jika kamu sudah mengerti bagaimana tag dan elemen HTML bekerja, kamu akan lebih mudah memahami tutorial CSS dan menerapkannya dalam proyekmu.Sebagai <a href="https://revou.co/panduan-karir/web-developer-adalah" target="_blank">web developer</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.Jadi, sebelum kamu terjun ke dalam CSS tutorial, pastikan kamu sudah memiliki pemahaman yang baik tentang HTML. <h2 id="">Aturan Penulisan CSS</h2>Jika kamu sudah memahami dasar-dasar HTML dan siap melanjutkan belajar CSS, ada beberapa aturan penulisan yang perlu kamu ketahui.Dalam CSS, ada beberapa komponen utama yang membentuk kode, yaitu selector, declaration, property, dan value. Mari kita bahas satu per satu.<ul id=""><li id="">Selector: selector adalah cara untuk menargetkan elemen HTML yang ingin kamu ubah tampilannya menggunakan CSS. Di CSS, selector bisa berupa nama tag HTML, class, ID, dan berbagai jenis selector lainnya.</li></ul>Sebagai contoh, untuk menargetkan semua elemen , kamu akan menggunakan selector p. Namun, ini hanya beberapa contoh dari beragam selector yang tersedia di CSS. Untuk informasi lebih lengkap mengenai selector yang bisa digunakan, kamu bisa mengunjungi <a href="https://www.w3schools.com/cssref/css_selectors.php" target="_blank">w3schools</a>.<ul id=""><li id="">Declaration: declaration adalah kumpulan aturan yang akan diterapkan pada elemen yang ditargetkan oleh selector. Declaration berada di dalam kurung kurawal {} setelah selector. Contoh: p { color: red; }.</li><li id="">Property: Property adalah aspek spesifik dari elemen yang ingin kamu ubah. Dalam <a href="https://revou.co/panduan-karir/belajar-web-development" target="_blank">web development</a>, property bisa berupa warna teks, jenis font, margin, padding, dan lain-lain. Di CSS, property ini akan ditemukan sebagai bagian dari declaration.</li><li id="">Value: value adalah nilai yang akan diberikan pada property. Misalnya, jika property-nya adalah color, value-nya bisa berupa red, #FF0000 atau rgb(255,0,0). Value menentukan bagaimana perubahan akan terlihat pada elemen target.</li></ul><h2 id="">Cara Menulis Kode CSS dengan Contoh Sederhana</h2>Berikut beberapa cara menulis kode CSS disertai contohnya.<h3 id="">Mempercantik tampilan tombol</h3>Untuk mempercantik tampilan tombol, kamu bisa menggunakan beberapa property CSS, seperti border, padding, dan border-radius.Misalnya, kamu memiliki elemen HTML berikut:<div data-rt-embed-type='true'><pre><code class="language-markup"></code></pre></div>Kamu bisa menulis kode CSS sebagai berikut untuk mempercantik tampilannya:<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>Dalam contoh di atas, border menambahkan batas sekitar tombol, padding memberikan jarak antara teks dan batas tombol, serta border-radius membuat sudut tombol menjadi bulat.<h3 id="">Menambahkan warna latar dan teks pada tombol</h3>Untuk menambahkan warna latar dan warna teks pada tombol, kamu bisa menggunakan property background-color.Contoh:<div data-rt-embed-type='true'><pre><code class="language-markup"><!--.my-button {

background-color: #007BFF;

color: white;

}--></code></pre></div>Pada contoh di atas, background-color: #007BFF; menetapkan warna latar belakang tombol menjadi biru dan color: white; menetapkan warna teks menjadi putih.Dengan menggabungkan semua property ini, kode CSS untuk tombol akan ditampilkan sebagai berikut:<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>Ada beberapa cara untuk menambahkan CSS di HTML. Namun, dua metode di bawah ini paling umum digunakan.<h3 id="">Menggunakan tag < link > untuk menautkan CSS eksternal</h3>Salah satu cara menambahkan CSS ke dalam HTML adalah menggunakan tag < link >. Metode ini memungkinkan kamu menyimpan kode CSS dalam file terpisah yang biasanya memiliki ekstensi .css.Cara Ini sangat membantu untuk memisahkan struktur (HTML) dan style (CSS), sehingga lebih mudah dikelola.Contoh penggunaan tag < link > adalah sebagai berikut:<div data-rt-embed-type='true'><pre><code class="language-markup"><!--<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>--></code></pre></div>Dalam contoh ini, href="styles.css" menunjukkan lokasi file CSS yang ingin kamu tautkan. Pastikan lokasi dan nama file sudah benar agar CSS berhasil diterapkan.<h3 id="">Memasukkan kode CSS langsung dalam <a href="https://revou.co/panduan-teknis/html-style" target="_blank">tag < style > di HTML</a></h3>Metode kedua adalah memasukkan kode CSS langsung ke dalam dokumen HTML menggunakan tag < style >. Tag ini biasanya ditempatkan di dalam elemen < head > dokumen HTML.Contoh penggunaannya sebagai berikut:<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>

</body>

</html>--></code></pre></div>Dalam contoh di atas, kode CSS ditempatkan di antara tag < style > dan < /style >. Kode CSS ini akan diterapkan pada elemen HTML di dalam dokumen yang sama.Namun, pendekatan seperti ini kurang disarankan karena dapat membuat struktur dokumen HTML menjadi kurang rapi. Sebagai best practice, sebaiknya pisahkan antara penulisan HTML dan CSS.Menggunakan CSS eksternal yang dihubungkan ke HTML melalui tag < link > tidak hanya membuat kode lebih rapi, tetapi juga memudahkan dalam pengelolaan dan pemeliharaan, karena tidak mencampur kode CSS dan HTML dalam satu file.<h2 id="">FAQ (Frequently Asked Question)</h2><h3 id="">Apa itu inheritance dalam CSS?</h3>Inheritance atau pewarisan dalam CSS adalah mekanisme di mana beberapa property CSS diwariskan dari elemen induk ke elemen anak. Artinya, jika kamu menetapkan suatu property, seperti font-family atau color pada elemen induk, elemen anak juga akan mewarisi property tersebut, kecuali jika kamu menetapkan nilai berbeda secara eksplisit pada elemen anak.Pewarisan ini memudahkan pengelolaan style pada elemen yang berbeda tetapi seharusnya memiliki tampilan yang serupa.<h3 id="">Bagaimana cara <a href="https://revou.co/kosakata/debugging" target="_blank">debug</a> kode CSS?</h3>Debugging kode CSS bisa dilakukan dengan beberapa cara.Salah satu metode paling umum adalah menggunakan developer tool yang disediakan oleh web browser, seperti Chrome DevTools. Dengan alat ini, kamu bisa memeriksa elemen HTML dan melihat style CSS yang diterapkan pada elemen tersebut.Kamu juga dapat mengubah property CSS secara real-time untuk melihat perubahannya. Selain itu, pastikan untuk memeriksa urutan kode CSS kamu serta memastikan tidak ada kesalahan sintaks atau typo yang bisa menyebabkan kode tidak berjalan dengan semestinya.<h2 id="">Penutup</h2>Memahami tutorial CSS menjadi langkah krusial dalam perjalananmu sebagai web developer. Dari memahami dasar-dasar HTML, aturan penulisan CSS, hingga cara mengimplementasikannya dalam dokumen HTML, setiap aspek memiliki peranannya sendiri dalam membentuk sebuah website yang tidak hanya fungsional tetapi juga estetik.