Tutorial CSS Colors, Background, Border, dan Margin

CSS Colors, Background, Border, dan Margin

Assalamu'alaikum W. W.

A. Pendahuluan

Halo, pada kesempatan kali ini saya akan menjelaskan tentang CSS, dalam bidang Color, Background, Border, dan Margin.

1.Pengertian

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen / artibut dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemograman.

CSS dapat 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.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.Latar Belakang

Ingin mengetahui bagaimana cara membuat tampilan dalam sebuah website dengan baik.

3.Maksud dan Tujuan

Paham dan dapat mengggunakan CSS, dan dapat membuat tampilan dalam sebuah website.

B. Alat dan Bahan

-PC

-Text Editor

-Web Browser

C. Jangka Waktu Pelaksanaan

-

D. Penjelasan

Color
  Ada beberapa pengaturan warna di CSS, yaitu :

1.RGB adalah suatu model warna yang terdiri atas 3 buah warna: merah (Red), hijau (Green), dan biru (Blue), yang ditambahkan dengan berbagai cara untuk menghasilkan bermacam-macam warna.

2.HEX adalah warna yang diatur dengan menggunakan nilai hexsadesimal.

3.HSL adalah warna yang dapat ditentukan dengan hue, saturation, dan lightness (HSL).

4.RGBA adlah warna dari kepanjangan RGB hanya ditambah dengan saluran alfa untuk mengatur keburaman.

5.HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk sebuah warna.

Contoh pengaturan warna dalam CSS.

Background
Penggunaan background-color , itu berfungsi sebagai pengaturan background pada sebuah karakter / komponen.

CSS Background Properti :
- Background = Mengatur properti latar belakang dalam satu deklarasi.
- Background-attachment = Mengatur apakah gambar latar belakang akan di fikskan dengan layar sehingga ketika di scroll akan tetap atau tidak.
-Background-color = Mengatur Backgroundwebsite menjadI warna.
-Background-image = Mengatur Background website menjadI gambar.
-Background-position = Mengatur posisi gambar yang dijadikan sebagai background.

-Background-repeat = Mengatur perulangan gambar, apakah jika ukuran gambar tak sesuai dengan ukuran layar maka gambar itu akan diulang.
Contoh penggunaan CSS Background :
1. Penggunaan background image.
 url adalah alamat file yang akan dijadikan background, atau jika itu menggunakan gambar local maka diisi letak direktori gambar tersebut.

 2. Penggunaan Background no-repeat,
no-repeat yang berarti jika gamabr tidak sesuai ukuran layar, tidak akan dilakukan tindakan apa -apa.

3.Background Repeat
Repeat, berarti jika background tidak sesuai dengan ukuran layar makan akan ditutup dengan gambar tersebut lagi.

4. Penyerdahanaan Script.
Jadi kita dapat menyederhanakn script, cara ini berguna agar script tidak terlalu panjang.

Border

Properti Background Border :

-Border Mengatur semua properti border dalam satu deklarasi
-Border-bottom Mengatur semua properti border bawah dalam satu deklarasi
-Border-bottom-color Mengatur warna border bawah
-Border-bottom-style Mengatur gaya border bawah
-Border-bottom-width Mengatur lebar border bawah
-Border-color Mengatur warna dari empat border.
-Border-left Mengatur semua properti border kiri dalam satu deklarasi
-Border-left-color Mengatur warna border kiri
-Border-left-style Mengatur gaya border kiri
-Border-left-width Mengatur lebar border kiri
-Border-radius Mengatur keempat properti border - * - radius untuk sudut membulat
-Border-right Mengatur semua properti border yang tepat dalam satu deklarasi
-Border-right-color Mengatur warna border kanan
-Border-right-style Mengatur gaya border yang tepat
-Border-right-width Sets lebar dari border kanan
-Border-style Mengatur gaya dari empat border
-Border-top Mengatur semua properti border atas dalam satu deklarasi
-Border-top-color Mengatur warna border atas
-Border-top-style Menetapkan gaya dari border atas
-Border-top-width Mengatur lebar border atas
-Border-width Mengatur lebar dari empat borde
Style / gaya - gaya border :
Mengatru penggunaan gaya / style dengan cara menggunakan border-style .

Contoh penggunaan border dalam membuat website.
1. Mengatur warna border
  Mengatur warna border dengan menggunakan border-color.

2. Mengatur border mana yang akan diperlihatkan, di sini kita dapat Menggunakan border-left, border-right, border-top, ataupun border-bottom.

3. Mengatur agar dalam satu border terdapat banyak jenis border.
Di sini kita dapat mengatur border yang berbeda jenis dalam satu border.

4. Mengatur Border radius.
Mengatur border radius berguna untuk membulatkan border.

5.Mengatur borde width.
Width yang berarti ketebalan, di sini kita dapat mengatur ketebalan sebuah border.

6. Mempersingkat script
Di pengatruan border kita juga dapat menyingkat penggunaan script, sehingga kita dapat merapikan script.

Margin
Margin CSS digunakan untuk membuat ruang di sekitar elemen, di outline/batas luar yang ditentukan.
Margin individual :
- margin-top / atas
- margin-right / kanan
- margin-bottom / bawah
- margin-left / kiri
Penyerdehanaan Script Margin
Contoh:
- margin : 25px 20px 30px 10px;
Berarti margin atas yaitu 25px, margin kanan 20 px, margin bawah 30px, dan margin kiri 10px.
- margin : 25px 20px 30px;
Berarti margin atas 25px, margin kiri dan kanan 20px, dan margin bawah 30px.
- margin : 25px 20px.
Berarti margin atas dan bawah 25px, dan margin kanan dan kiri.
- margin : 25px.
Berarti margin atas, kanan, bawah, dan kiri, bernilai 25px.
Pengaturan margin :
- Auto = Browser akan langsung mengatur margin secara otomatis.
- lenght = Kita menentukan panjang margin, bisa px, pt, cm, dll.
- % = Mengatur margin dalam bentuk %.
- inherit = Margin diwarisi dari elemen induk, misal ketika tulisan berada pada sebuah div, makan tulisan itu akan mengikuti berapa margin yang dimilik oleh div tersebut.
Contoh penggunaan margin .
Script :

Tampilan :

E. Kesimpulan

>Sebelum kita mempelajari pengaturan pengaturan lain di CSS, kita harus memahami Color / Warna di CSS terlebih dahulu.
>Untuk memperindah sebuah website kita dapat menggunakan background agar lebih menarik perhatian.
>Penggunaan border juga dapat mempermudah kita mengatur website, border berguna sebagai batasan antar konten lain, atau batasan antar layar.
>Penggunaan margin berguna untuk mengatur jarak antar conten dengan batasan layar, sehingga dapat merapikan tampilan website.

F. Referensi

https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/css_colors.as
https://www.w3schools.com/css/css_background.asp
https://www.w3schools.com/css/css_border.asp
https://www.w3schools.com/css/css_margin.asp

Wassalamu'alaikum W. W.

Share this post