CSS Property

CSS properties digunakan untuk menentukan style atau tampilan dari elemen HTML yang dipilih oleh CSS selectors. Setiap properti CSS memiliki nilai tertentu yang mendefinisikan tampilan elemen tersebut.

Struktur Dasar CSS Property

Sintaks dasar CSS property adalah sebagai berikut:

selector {
    property: value;
}

• Selector: Menentukan elemen HTML yang ingin diberi gaya.

• Property: Menentukan properti yang ingin diterapkan pada elemen tersebut.

• Value: Nilai dari properti yang akan diterapkan pada elemen.

***CSS memiliki berbagai properti yang digunakan untuk mendesain dan mengatur tampilan elemen HTML. Berikut adalah beberapa properti CSS yang paling umum digunakan: ***

Color

Properti color digunakan untuk mengatur warna teks dari elemen.

p {
    color: blue;
}

Background

Properti background digunakan untuk mengatur latar belakang elemen, termasuk warna latar belakang, gambar latar belakang, dan lainnya.

div {
    background-color: lightblue;
    background-image: url('background.jpg');
}

Font

Properti font digunakan untuk mengatur jenis, ukuran, dan gaya font elemen.

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
}

Margin & Padding

Properti margin digunakan untuk mengatur jarak di luar elemen (spasi antara elemen dan elemen lainnya). Sementara itu, properti padding digunakan untuk mengatur jarak di dalam elemen (spasi antara isi elemen dan batas elemen).

div {
    margin: 20px;
    padding: 15px;
}

Width & Height

Properti width digunakan untuk mengatur lebar dan properti height untuk mengatur tinggi elemen.

img {
    width: 100px;
    height: 150px;
}

Border

Properti border digunakan untuk mengatur garis batas di sekitar elemen. Anda dapat mengatur lebar, warna, dan gaya garis batas.

div {
    border: 2px solid black;
}

Text-align

Properti text-align digunakan untuk mengatur perataan teks di dalam elemen.

h1 {
    text-align: center;
}

Display

Properti display digunakan untuk menentukan bagaimana elemen ditampilkan di halaman web. Beberapa nilai umum untuk properti ini termasuk block, inline, dan none.

p {
    display: block;
}

Position

Properti position digunakan untuk mengatur posisi elemen dalam halaman. Nilai-nilai umum yang digunakan adalah static, relative, absolute, dan fixed.

div {
    position: relative;
    top: 20px;
    left: 50px;
}

Opacity

Properti opacity digunakan untuk mengatur transparansi elemen.

img {
    opacity: 0.5;
}

Catatan Tentang Properti CSS

Properti CSS sangat bervariasi dan bisa diterapkan ke hampir semua elemen HTML untuk memberikan style visual.

Setiap properti memiliki aturan penulisan yang sama, dengan nama properti diikuti oleh nilai yang dipisahkan dengan tanda titik dua (:) dan diakhiri dengan titik koma (;).

Banyak sekali properti CSS yang dapat dipadupadankan untuk menciptakan style halaman yang menarik.