CSS yang merupakan singkatan dari Cascading Style Sheets adalah bagian mendasar dari repertoar desainer web. CSS menentukan bagaimana komponen HTML dirender ke layar yang pada gilirannya membuat halaman web terlihat bagus dan ramah pengguna. Ini dapat memberikan titik masuk yang sangat besar untuk pengetahuan yang lebih sedikit tetapi juga grafik dasar akan sangat membantu dalam mengotomatisasi CSS Anda menjadi desain yang menyenangkan hanya dengan pemahaman pemula tentang belajar css. Jadi, dalam posting ini kita akan membahas beberapa properti CSS yang diperlukan untuk pemula.
1. Sintaks dan Struktur CSS
Properti Properti memiliki struktur dasar sebelum masuk ke properti yang lebih detail. Selector dan Blok DeklarasiSebuah aturan CSS terdiri dari selector + blok deklarasi.
- Pemilih: Ini menargetkan elemen HTML yang ingin Anda beri gaya.
- Blok Deklarasi: Blok ini berisi satu atau beberapa deklarasi, masing-masing menentukan properti dan nilainya.
Sebagai contoh:
p {
color: blue;
font-size: 16px;
}
Dalam contoh ini, p adalah pemilih (menargetkan semua elemen <p>), dan deklarasi mengubah warna teks menjadi biru dan mengatur ukuran font menjadi 16 piksel.
2. Properti Warna dan Latar Belakang
Salah satu hal pertama yang dipelajari oleh seorang pemula adalah cara mengubah warna elemen. Hal ini bisa dilakukan dengan menggunakan properti warna dan warna latar belakang.
- color: Menentukan warna teks di dalam elemen
p {
color: red;
}
- background-color: Menetapkan warna latar belakang elemen.
div {
background-color: yellow;
}
CSS memungkinkan Anda menentukan warna dalam beberapa format: berdasarkan nama (misalnya, merah), heksadesimal (misalnya, #ff0000), RGB (misalnya, rgb (255, 0, 0)), atau bahkan HSL (Hue, Saturation, Lightness).
Sumber: fikti.umsu.ac.id
3. Properti Font
Font-Based - ini adalah properti yang kami manfaatkan untuk memastikan bahwa teks kami tampak mudah dibaca, dan menyenangkan secara visual di web.
- font-family: Menentukan jenis huruf (font) suatu elemen.
p {
font-family: Arial, sans-serif;
}
- ukuran huruf: Mengatur ukuran teks
h1 {
font-size: 32px;
}
- bobot huruf: Menentukan ketebalan font, seperti normal, tebal, atau nilai numerik.
strong {
font-weight: bold;
}
Dengan ini, Anda dapat membuat desain teks khusus yang sesuai dengan gaya situs web Anda dan juga mudah dibaca.
4. Margin dan Padding
Margin dan padding berfungsi untuk mengatur ruang yang ada di sekitar elemen Anda, sehingga menghasilkan tata letak yang lebih baik dan rapi.
- margin: Menciptakan ruang di luar elemen, mendorongnya menjauh dari elemen di sekelilingnya.
div {
margin: 20px;
}
- padding: Menambahkan ruang di dalam elemen, di antara konten dan batas elemen.
p {
padding: 10px;
}
Hal ini membuat piksel tata letak Anda menjadi sempurna, dan Anda dapat mengontrol elemen mana yang tidak boleh terlalu dekat atau jauh dengan menyesuaikan margin/paddingnya.
5. Properti Perbatasan
Garis tepi membantu menentukan batas-batas elemen, menambahkan struktur dan gaya pada desain Anda.
- batas: Menentukan lebar, gaya, dan warna batas.
div {
border: 2px solid black;
}
Tiga nilai yang digunakan dalam properti garis tepi mencakup lebar (misalnya, 2px), gaya (misalnya, solid, putus-putus), dan warna (misalnya, hitam).
6. Lebar dan Tinggi
Untuk mengontrol ukuran elemen, Anda dapat menggunakan properti lebar dan tinggi.
- lebar: Menentukan seberapa lebar sebuah elemen.
div {
width: 300px;
}
- tinggi: Menentukan tinggi suatu elemen.
img {
height: 200px;
}
Properti ini sangat penting untuk desain responsif, memastikan elemen Anda menyesuaikan dengan benar pada ukuran layar yang berbeda.
7. Tampilan dan Pemosisian
Properti tampilan dan posisi adalah kunci untuk mengontrol bagaimana elemen diatur pada halaman.
● Tampilan: Menentukan perilaku tata letak suatu elemen. Nilai yang umum termasuk:
- block: Elemen menggunakan lebar penuh yang tersedia (e.g., <div>).
- inline: Elemen hanya mengambil ruang sebanyak yang diperlukan (e.g., <span>)
- none: Hides the element.block: Elemen menggunakan lebar penuh yang tersedia (e.g., <div>).
span {
display: inline;
}
● Posisi: Menentukan bagaimana suatu elemen diposisikan dalam dokumen.
- statis (default): Diposisikan menurut alur dokumen normal.
- relatif: Diposisikan relatif terhadap posisi normalnya.
- absolut: Diposisikan relatif terhadap posisi pendahulunya yang terdekat.
- tetap: Tetap berada di tempat yang sama meskipun halaman digulir.
div {
position: absolute;
top: 50px;
left: 100px;
}
Kesimpulan
CSS dapat menjadi bagian yang sangat kuat dalam desain web, dan memahami properti utama adalah langkah pertama Anda dalam membuat situs web yang tampak mengagumkan dan berfungsi sebagaimana mestinya. Warna, Font, margin / padding, tampilan adalah beberapa properti dasar yang dapat dikuasai oleh pemula dan mulai menata halaman web mereka. Setelah Anda menguasai dasar-dasarnya, jangan ragu untuk mempelajari properti CSS yang lebih canggih seperti tata letak grid, flexbox, dan animasi untuk meningkatkan estetika.