Close Menu

Properti CSS Dasar

Table of Contents

CSS memiliki banyak properti yang dapat digunakan untuk mengatur tampilan elemen HTML. Berikut adalah beberapa properti CSS dasar yang sering digunakan, beserta penjelasan dan contohnya.

Warna (Color) #

color: Mengatur warna teks.

p {
    color: blue;
}

background-color: Mengatur warna latar belakang elemen.

div {
    background-color: yellow;
}

Teks (Text) #

font-family: Mengatur jenis font yang digunakan.

p {
    font-family: Arial, sans-serif;
}

font-size: Mengatur ukuran font.

h1 {
    font-size: 24px;
}

font-weight: Mengatur ketebalan font.

p {
    font-weight: bold;
}

text-align: Mengatur perataan teks.

h1 {
    text-align: center;
}

text-decoration: Mengatur dekorasi teks seperti garis bawah, garis atas, atau coretan.

a {
    text-decoration: none;
}

Margin dan Padding #

margin: Mengatur ruang di luar batas elemen. Dapat diatur secara individual (top, right, bottom, left) atau secara keseluruhan.

div {
    margin: 20px;
}
div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

padding: Mengatur ruang di dalam batas elemen. Dapat diatur secara individual (top, right, bottom, left) atau secara keseluruhan.

div {
    padding: 10px;
}
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Border #

border: Mengatur garis batas elemen. Dapat diatur secara keseluruhan atau untuk masing-masing sisi (top, right, bottom, left).

p {
    border: 1px solid black;
}
p {
    border-top: 2px dashed red;
    border-right: 2px dashed red;
    border-bottom: 2px dashed red;
    border-left: 2px dashed red;
}

border-radius: Mengatur sudut batas elemen menjadi melengkung.

div {
    border: 1px solid black;
    border-radius: 10px;
}

Ukuran dan Tampilan #

width: Mengatur lebar elemen.

div {
    width: 200px;
}

height: Mengatur tinggi elemen.

div {
    height: 100px;
}

display: Mengatur bagaimana elemen ditampilkan.

div {
    display: none; /* Elemen tidak ditampilkan */
}
span {
    display: block; /* Mengubah elemen inline menjadi block */
}

position: Mengatur posisi elemen.

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

Contoh Penggunaan Properti CSS Dasar #

Berikut adalah contoh lengkap penggunaan beberapa properti CSS dasar dalam sebuah dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Properti CSS Dasar</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }

        h1 {
            font-size: 24px;
            color: green;
            text-align: center;
            text-decoration: underline;
        }

        p {
            color: blue;
            font-size: 16px;
            margin: 20px 0;
            padding: 10px;
            border: 1px solid black;
            border-radius: 5px;
        }

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

        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Properti CSS Dasar</h1>
    <p class="highlight">Ini adalah paragraf yang disorot dengan latar belakang kuning dan teks tebal.</p>
    <p>Ini adalah paragraf dengan teks berwarna biru dan ukuran font 16 piksel.</p>
    <a href="#">Ini adalah tautan tanpa garis bawah.</a>
</body>
</html>

Penjelasan:

  • Elemen body memiliki font Arial, latar belakang abu-abu muda, dan margin 20 piksel di sekitar elemen.
  • Elemen h1 memiliki ukuran font 24 piksel, warna hijau, teks rata tengah, dan garis bawah.
  • Elemen p memiliki teks berwarna biru, ukuran font 16 piksel, margin 20 piksel di atas dan bawah, padding 10 piksel di dalam, garis batas hitam, dan sudut melengkung.
  • Elemen a (tautan) memiliki teks berwarna merah tanpa garis bawah.
  • Elemen p dengan class highlight memiliki latar belakang kuning dan teks tebal.

Dengan memahami dan menggunakan properti CSS dasar ini, Anda dapat mengatur tampilan elemen HTML dengan lebih fleksibel dan menarik. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings