Panduan cepat CSS

Selamat datang, para pengembang web yang berbakat! Hari ini, kita akan melihat dunia yang berwarna-warni CSS. Rekan! Karena kita akan melangsungkan perjalanan yang akan mengubah pandangan Anda tentang website selamanya!

CSS - Quick Guide

Apa itu CSS?

CSS, atau Cascading Style Sheets, mirip seperti desainer mode di dunia web. Jika HTML adalah kerangka sebuah website, maka CSS adalah kulit, pakaian, dan riasan. Ini yang membuat website terlihat indah dan unik.

Bayangkan Anda membangun sebuah rumah. HTML akan menjadi batu dan mortar, sedangkan CSS adalah cat, kertas dinding, dan perabot. Ini yang membuat struktur biasa menjadi rumah.

mari mulai dengan contoh sederhana:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

CSS ini mengatakan ke browser untuk menggambar seluruh halaman dengan warna abu-abu terang (#f0f0f0) dan gunakan Arial sebagai font default. Jika Arial tidak tersedia, dia akan menggunakan font sans-serif apa saja.

CSS - Sintaks

Sintaks CSS mirip seperti resep. Itu memiliki dua bagian utama: pemilih (selector) dan blok deklarasi.

pemilih {
properti: nilai;
}

Pemilih menunjuk ke elemen HTML yang Anda inginkan untuk di gayakan. Blok deklarasi mengandung satu atau lebih deklarasi yang dipisahkan oleh titik koma. Setiap deklarasi termasuk nama properti CSS dan nilai, dipisahkan oleh titik dua.

mari lihat contoh yang lebih kompleks:

h1 {
color: biru;
font-size: 24px;
text-align: center;
}

Di sini, kita menargetkan semua elemen <h1>. Kita membuat teks biru, menetapkan ukurannya menjadi 24 piksel, dan menengahkannya di halaman.

CSS - Penempatan

Ada tiga cara untuk menempatkan CSS di dalam HTML:

CSS Inline
CSS Internal
CSS Eksternal

CSS Inline

CSS Inline diterapkan langsung ke elemen HTML menggunakan atribut style. Itu seperti memberikan nasihat mode kepada satu orang saja.

<p style="color: merah; font-size: 16px;">Ini adalah paragraf merah.</p>

CSS Internal

CSS Internal ditempatkan di bagian <head> halaman HTML, di dalam tag <style>. Itu seperti menetapkan aturan busana untuk semua orang di sebuah pesta.

<head>
<style>
body {
background-color: biru muda;
}
h1 {
color: biru laut;
margin-left: 20px;
}
</style>
</head>

CSS Eksternal

CSS Eksternal disimpan di dalam file terpisah dengan ekstensi .css. Itu dihubungkan ke file HTML menggunakan tag <link>. Ini seperti membuat majalah mode yang semua orang bisa merujuk.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - Unit Pengukuran

CSS memiliki beberapa unit untuk menyatakan panjang. mari lihat yang paling umum:

Unit	Deskripsi
px	Pixel (1px = 1/96th of 1in)
%	Persentase
em	Relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
rem	Relatif terhadap ukuran font elemen root
vw	Relatif terhadap 1% lebar viewport
vh	Relatif terhadap 1% tinggi viewport

Ini adalah contoh menggunakan unit yang berbeda:

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - Warna

Warna di CSS dapat ditentukan dalam beberapa cara:

Dengan nama: merah, biru, hijau, dll.
Dengan nilai RGB: rgb(255, 0, 0) untuk merah
Dengan kode Hex: #FF0000 untuk merah

mari lihat ini dalam aksi:

h1 {
color: biru;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - Latar Belakang

Latar belakang dapat membuat website Anda tampak menarik. Anda dapat menyetel warna latar belakang, gambar, atau keduanya!

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

CSS ini menyetel warna latar belakang ke abu-abu terang, menambahkan gambar di tengah halaman, memastikan gambar tidak berulang, dan membuatnya menutupi seluruh viewport.

CSS - Font

Font sangat penting untuk kebacaan dan gaya. mari lihat bagaimana Anda dapat menyetel font:

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

Ini menyetel Helvetica sebagai font yang diinginkan, dengan Arial dan font sans-serif apa saja sebagai cadangan. Itu juga menyetel ukuran ke 16 piksel, berat ke normal, dan gaya ke italic.

CSS - Teks

Properti teks mengontrol bagaimana teks ditampilkan:

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

CSS ini membuat teks berwarna abu-abu gelap, rata kiri, bergaris bawah, semua huruf besar, dan tinggi baris 1,5 kali lipat.

CSS - Menggunakan Gambar

Gambar dapat di gayakan seperti elemen lainnya:

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

Ini membuat gambar responsif (100% lebar hingga 500px), mempertahankan rasio aspeknya, dan memberikan bentuk lingkaran.

CSS - Tautan

Tautan dapat di gayakan berbeda tergantung pada keadaannya:

a {
color: biru;
text-decoration: none;
}

a:hover {
color: merah;
text-decoration: underline;
}

a:visited {
color: ungu;
}

Ini mengubah warna tautan menjadi biru, menghapus garis bawah, membuatnya merah dan bergaris bawah saat di hover, dan membuat tautan yang sudah dikunjungi berwarna ungu.

Ingat, CSS adalah tentang kreativitas dan eksperimen. Jangan takut untuk bermain dengan properti dan nilai yang berbeda. Semakin banyak Anda berlatih, semakin baik Anda akan menjadi dalam menciptakan desain web yang indah dan responsif. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

CSS - Pertanyaan dan Jawaban

Tutorial Selanjutnya:

CSS - Referensi