Malay

Tutorial CSS

Tutorial CSS3

CSS Lanjutan

Rujukan CSS

CSS Responsif

CSS - Panduan cepat

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang berwarna-warni CSS. Siapkan sabuk pengaman Anda, karena kita akan memulai perjalanan yang akan mengubah pandangan Anda tentang website selamanya!

CSS - Quick Guide

Apa itu CSS?

CSS, atau Cascading Style Sheets, adalah seperti desainer mode di dunia web. Jika HTML adalah tulang punggung sebuah website, CSS adalah kulit, pakaian, dan riasan. Itu yang membuat website terlihat indah dan unik.

Bayangkan Anda sedang membangun sebuah rumah. HTML akan menjadi batu dan mortar, sedangkan CSS akan menjadi cat, kertas dinding, dan furnitur. Itu yang membuat struktur yang biasa menjadi sebuah rumah.

mari mulai dengan contoh sederhana:

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

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

CSS - Sintaks

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

pemilih {
properti: nilai;
}

Pemilih menunjuk ke elemen HTML yang Anda ingin gayakan. Blok deklarasi berisi satu atau lebih deklarasi 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 teksnya biru, menetapkan ukurannya menjadi 24 pixel, dan menengahkan teks di tengah halaman.

CSS - Penempatan

Ada tiga cara untuk menempatkan CSS dalam HTML:

  1. CSS Inline
  2. CSS Internal
  3. CSS Eksternal

CSS Inline

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

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

CSS Internal

CSS Internal ditempatkan di dalam seksi <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 dalam file terpisah dengan ekstensi .css. Itu ditautkan ke file HTML menggunakan tag <link>. Itu seperti membuat majalah mode yang semua orang dapat 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 ke ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
rem Relatif ke ukuran font elemen root
vw Relatif ke 1% lebar viewport
vh Relatif ke 1% tinggi viewport

mari lihat 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:

  1. Dengan nama: merah, biru, hijau, dll.
  2. Dengan nilai RGB: rgb(255, 0, 0) untuk merah
  3. 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 pucat, 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 cara 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 mana pun sebagai cadangan. Itu juga menyetel ukuran ke 16 pixel, berat ke normal, dan gaya ke italic.

CSS - Teks

Properti teks mengontrol bagaimana teks ditampilkan:

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

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

CSS - Menggunakan Gambar

Gambar dapat digayakan 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 digayakan berbeda-beda berdasarkan keadaannya:

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

a:hover {
color: merah;
text-decoration: garis bawah;
}

a:visited {
color: ungu;
}

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

Ingat, CSS adalah tentang kreativitas dan eksperimen. Jangan takut untuk main-main dengan properti dan nilai yang berbeda. Semakin Anda latih, semakin Anda akan menjadi ahli dalam menciptakan desain web yang indah dan responsif. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Soalan dan Jawapan
Tutorial Seterusnya:
CSS - Rujukan