Pengenalan Dekorasi HTML : CSS Dasar #1

Published in

Amikom Computer Club

7 min readJan 15, 2022

Pengenalan CSS

CSS (Cascade Style Sheet) merupakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah. Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, dan lain-lain.

CSS menggunakan selector (id dan class) untuk menentukan elemen yang akan di modifikasi atau yang akan diberi sentuhan CSS. Jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah maka CSS berfungsi sebagai cat dan dekorasi pada bangunan rumah tersebut.

2. Cara Penggunaan CSS

a. Gaya Penulisan

a) Inline CSS Style

Cara penulisan syntax CSS dengan inline style adalah teknik penulisan yang tidak memerlukan selector (id dan class) sehingga sintaks CSS diletakkan atau langsung di sisipkan pada elemen HTML, sintaks CSS di letakkan di dalam atribut style = “…”.

Contoh : index.html

Perhatikan pada contoh diatas sintaks CSS diletakkan dalam elemen <h1> menggunakan atribut style= “ “. Perintah color adalah perintah css yang berfungsi untuk mengatur warna font. Jadi pada contoh Inline CSS Style ini kita membuat heading 1 dengan warna font yang kita atur menjadi putih dengan background biru, dan saat dijalankan hasilnya seperti berikut :

b) Internal CSS Style

Teknik penulisan syntax css dengan internal style adalah teknik cara penulisan syntax css yang diletakkan satu file dengan file html. Syntax css ini diletakkan di dalam tag <style> dan di akhiri dengan tag </style>. Biasanya <style> ….. </style> di letakkan pada bagian tag <head> pada HTML.

Contoh : Index.html

Hasilnya akan seperti ini :

C) External CSS Style

Teknik penulisan sintaks CSS dengan external style adalah teknik penulisan yang memisahkan file CSS dan HTML. Penggunaan CSS yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan , karena sintaks CSS disimpan pada file CSS. File CSS dengan HTML dihubungkan menggunakan link rel :

index.html

index.html (tambahan di dalam body)

style.css

3. Dekorasi Background dengan CSS

Background atau latar belakang pada website merupakan bagian yang wajib diperhatikan untuk membuat sebuah website menjadi menarik dan modern. Ada beberapa cara untuk mempercantik background pada sebuah website yaitu dengan menggunakan background yang berupa gambar dan menggunakan background yang berupa warna dengan bantuan CSS.

Mengubah warna background dengan warna css

Index.html

style.css

Hasilnya akan seperti ini :

Mengubah Background dengan Foto

Caranya hampir sama seperti kita mengubah background dengan warna, namun disini kita menambah foto background sesuai keinginan kita

index.html

style.css

Hasilnya akan terlihat seperti ini :

4. Pengaturan Margin dan Padding

Margin dan padding merupakan yang paling banyak digunakan dalam mendesain sebuah website dengan menggunakan CSS, karena margin dan padding digunakan untuk mengatur sisi dalam dari pada pada sebuah element dan mengatur sisi sebelah luar dari sebuah element.

a. Margin

Margin adalah sisi luar dari sebuah element, misalnya kita ingin mengatur jarak antar element. Kita bisa menggunakan sintaks margin untuk mengaturnya. Terdapat beberapa sisi luar margin yaitu margin atas dituliskan pada CSS dengan ‘margin-top’, margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ‘margin buttom’,‘margin-left’ sebagai jarak luar sebelah kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan, tetapi jika kita hanya menggunakan sintaks margin saja maka akan secara otomatis mengatur jarak atas, bawah,kiri dan kanan element.

Contoh penggunaan Margin

index.html

style.css

Hasil

b. Padding

Padding adalah sisi dalam dari sebuah element, kita bisa menggunakan sintaks padding untuk mengatur jarak pada sisi dalam sebuah elemen yang kita tentukan sama seperti margin yang memiliki sisi-sisi, seperti top, buttom, left, dan right. Jenis padding yaitu padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, padding bawah atau jarak dalam bagian bawah ditulis di CSS dengan ‘padding-buttom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element dan ‘padding-right’ adalah sisi dalam bagian sebelah kanan.

Jika kita hanya menuliskan sintaks ‘padding’ saja maka akan otomatis mengatur jarak atas, bawah, kanan dan kiri element yang bagian dalam.

Contoh pengaturan padding :

Index.html

style.css

Hasilnya :

5. Text Decoration

Kemudian, berikut ini beberapa sintaks CSS untuk mengatur font teks.

1. Font-size digunakan untuk mengatur ukuran font

2. Font-weight untuk mengatur ketebalan font

3. Font-family digunakan untuk mengubah jenis font

4. Font-style digunakan untuk merubah gaya pada font

5. Color digunakan untuk merubah warna font

Contoh penggunaan Text Decoration

Html

Css

Hasil

6. Position CSS

Position pada CSS digunakan untuk mengatur posisi sebuah element HTML. Terkadang kita ingin membuat atau menetapkan posisi sebuah element dengan element yang lain. Maka dengan menggunakan properti position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai dengan yang kita inginkan.

Referensi tambahan :

https://dosenit.com/css/position-di-css — Penjelasan lebih lengkap mengenai position

https://www.youtube.com/watch?v=qCPrNyW3XFg — Static dan relative

https://www.youtube.com/watch?v=ENooU6dnzoQ — Absolute dan Fixed

7. DEKORASI BORDER

Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk titik-titik, garis yang putus-putus, garis ganda dan banyak lagi style atau gaya yang bisa digunakan pada garis dengan CSS. Untuk membuat garis sekaligus memberikan value style, kita bisa menggunakan properti CSS border-style. Untuk mengatur ukuran pada border kita bisa menggunakan property yaitu border-width. Memberikan warna pada garis gunakan properti CSS yaitu border-color.

Berikut properti yang digunakan untuk mengubah tampilan border dengan CSS.

Border-bottom : mengatur garis yang terletak di bawah

Border-bottom-color : mengatur warna garis yang terletak di bawah

Border-bottom-style : mengatur style garis yang terletak di bawah

Border-bottom-width : mengatur ukuran garis yang terletak di bawah

Border-color : mengatur warna garis

Border-left : mengatur garisyang terletak di sebelah kiri

Border-left-color : mengatur warna garis yang terletak di sebelah kiri

Border-left-style : mengatur style garis yang terletak di sebelah kiri

Border-left-width : mengatur ukuran garis yang terletak di sebelah kiri

Boder-right : mengatur garis yang terletak di sebelah kanan

Boder-right-color : mengatur warna gris yang terletak di sebelah kanan