Belajar CSS : Color, Background dan Border

Belajar Web Design

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur tampilan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Pada umumnya CSS digunakan untuk memformat tampilan halaman web yang dibuat, biasanya dipakai untuk mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Pada postingan kali ini, kita akan belajar tentang beberapa properti dari CSS, yaitu Color, Background dan Border.

Salah satu cara pengunaan properti CSS adalah menggunakan atribut style=”” pada tiap elemen HTML.

Format dari properti CSS adalah seperti ini:

nama_properti : valuenya;

Berikut ini adalah contohnya:

  1. Color adalah salah satu properti CSS yang digunakan untuk mengubah warna teks pada sebuah halaman web.
<h1 style="color:dodgerblue;">CSS Color</h1>
    <p style="color: crimson;">Mengganti warna teks pada halaman web.</p>

Maka, hasilnya seperti ini pada sebuah halaman web.

2. Background Color, adalah salah satu properti CSS yang digunakan untuk mengubah warna backround tiap elemen HTML.

<body style="background-color: black;">
        
        <h1 style="background-color: darkorange;">Background Color</h1>
        
        <p style="background-color: dodgerblue;">Mengubah Warna pada tiap elemen HTML.</p>

    </body>

Maka, hasilnya seperti ini pada sebuah halaman web.

3. Border, adalah salah satu properti CSS yang digunakan untuk memberikan bingkai pada elemen HTML. Adapun format dari properti border ini adalah sebagai berikut:

border : ketebalan_garis jenis_garis warna_garis

Oke, langsung aja kita coba.

    <h3 style="border: 1px solid black;">Border Keseluruhan</h3>
    <h3 style="border-left: 5px solid crimson;">Border Kiri</h3>
    <h3 style="border-right: 5px solid red;">Border Kanan</h3>
    <h3 style="border-bottom: 2px solid dodgerblue;">Border Bawah</h3>

Maka, hasilnya seperti ini pada sebuah halaman web.

Nah, di atas tadi kita lihat kan ada berbagai macam value dari format script kodenya. Mulai dari ketebalan bingkai, bentuk garis bingkai, hingga warna garisnya. Akan tetapi, untuk garis bingkainya juga ada beberapa variasi yang bisa kita coba. Untuk variasinya bisa coba dengan properti border-style.

Berikut ini adalah contohnya.

    <h3 style="border-style: solid;">Border dengan Style Garis Solid</h3>
    <h3 style="border-style: dotted;">Border dengan Style Garis Dotted</h3>
    <h3 style="border-style: dashed;">Border dengan Style Garis Dashed</h3>
    <h3 style="border-style: double;">Border dengan Style Garis double</h3>
    <h3 style="border-style: groove;">Border dengan Style Garis groove</h3>
    <h3 style="border-style: ridge;">Border dengan Style Garis ridge</h3>
    <h3 style="border-style: inset;">Border dengan Style Garis inset</h3>
    <h3 style="border-style: outset;">Border dengan Style Garis outset</h3>
    <h3 style="border-style: none;">Border dengan Style Garis none</h3>
    <h3 style="border-style: hidden;">Border dengan Style Garis hidden</h3>
    <h3 style="border-style: dotted dashed solid double;">Border dengan Style Garis mix</h3>

Maka, hasilnya seperti ini pada sebuah halaman web.

Demikianlah postingan pada kesempatan kali ini. Akhir kata, semoga bermanfaat ya.

No related posts.