Tutorial CSS Padding, Height / Width dan Text

CSS Padding, Height / Width dan Text

Assalamu'alaikum W. W.
A. Pendahuluan
Halo, pada kesempatan kali ini saya akan menjelaskan tentang CSS, dalam pengaturan padding, Height / Width, dan Text .

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
Padding
Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan. Atau bisa disebut penjaga jarak antar konten.
Padding individual :
- padding-top / atas
- padding-right / kanan
- padding-bottom / bawah
- padding-left / kiri
Penyerdehanaan Script Padding
Contoh:
- padding : 25px 20px 30px 10px;
Berarti padding atas yaitu 25px, padding kanan 20 px, padding bawah 30px, dan padding kiri 10px.
- margin : 25px 20px 30px;
Berarti padding atas 25px, padding kiri dan kanan 20px, dan padding bawah 30px.
- margin : 25px 20px.
Berarti padding atas dan bawah 25px, dan padding kanan dan kiri.
- margin : 25px.
Berarti padding atas, kanan, bawah, dan kiri, bernilai 25px.
Contoh penggunaan padding :
Script :

 Tampilan :

Height / Width
Height dan Width digunakan untuk mengatur tinggi dan lebar elemen.
Tinggi dan lebar dapat diatur ke auto (ini adalah default. Berarti browser menghitung tinggi dan lebar secara automatis), atau ditentukan dengan nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung
Properti Height / Width :
- height = Menetapkan ketinggian elemen
- max-height = Mengatur tinggi maksimum elemen
- max-width = Menetapkan lebar maksimum elemen
- min-height = Mengatur tinggi minimum elemen
- min-width = Menetapkan lebar minimum elemen
- width = Menetapkan lebar elemen
Contoh penggunaan Height dan Width :
Script :

Tampilan :

Text

    1) Text Color

        Text color berguna untuk mengatur warna pada teks di halaman website. Cara mengatur Text Color dapat dilakukan dengan berbagai cara. Dapat menggunakan nama warna tersebut, Contoh " color : red ; ", bisa juga menggunakan HEX Contoh: " color : #ff00ff ; " dan dapat menggunakan RGB, Contoh : " color : rgb (255, 0, 0) ;".

   2) Text Alignment

       Text-align digunakan untuk mengatur kesejajaran horizontal teks. Cara mengatur text-align dapat dengan cara:

• text-align:center; = Untuk mengatur teks agar berada pada posisi tengah.
• text-align:left; = Untuk mengatur teks agar rata kiri.
• text-align:right; = Untuk mengatur teks agar rata kanan.
• text-align:justify; = Untuk mengatur teks menjadi rata kanan dan kiri.  

   3) Text Decoration
       Text-decoration digunakan untuk mengatur atau menghapus hiasan dari teks. Mengatur text-decoration bisa menggunakan banyak cara, yaitu :

• text-decoration: none; = digunakan untuk menghapus hiasan pada teks.
• text-decoration: overline; = digunakan untuk membuat garis atas pada teks.
•  text-decoration: line-through; = digunakan untuk mencoret tengah teks.
•  text-decoration: underline; = digunakan untuk membuat garis bawah. 

   4) Text Transformation
       Text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks. Mengatur text-transform bisa menggunakan banyak cara, yaitu :

• text-transform: uppercase; = digunakan untuk membuat semua huruf menjadi huruf kapital.
• text-transform: lowercase; = digunakan untuk membuat semua huruf menjadi huruf kecil.
• text-transform: capitalize; = digunakan untuk membuat semua huruf menjadi setiap huruf pertama di semua kata menjadi huruf kapital.

   5) Text Indentation
       Text-indent digunakan untuk menentukan lekukan baris pertama teks: Biasanya digunakan untuk menuliskan paragraf. Mengatur text-indent dapat dilakukan dengan cara, Contoh: " text-indent: 40px; "
   6) Letter Spacing
       Letter-spacing digunakan untuk mengatur jarak antar kata. Mengatur letter-spacing dapat dilakukan dengan berbagai cara, Contoh: " letter-spacing: 3px; " atau bisa ditambah "-" minus untuk mengurangi jarak.
   7) Line Height
       Line-height digunakan untuk mengatur jarak baris. Mengatur line-height dpat dilakukan dengan cara, Contoh: " line-height: 0.8; ".
   8) Text Direction
       Text direction digunakan untuk membuat teks menjadi terbalik. Mengatur text direction dapat dilakukan dengan cara, Contoh: " direction: rtl; ".
   9) Word Spacing
       Word spacing digunakan untuk mengatur jarak antar kalimat. Mengatur word spacing bisa dengan cara, Contoh : " word-spacing: 5px; ".
   10) Text Shadow
       Text shadow digunakan untuk membuat bayangan pada kalimat. Mengatur text shadow bisa menggunakan cara, Contoh: " text-shadow: 3px 2px red; " .
Contoh penggunaan CSS Text :
Contoh 1.

Contoh 2.

Contoh 3.

 Contoh 4.

Contoh 5.

E. Kesimpulan 
>Penggunaan padding berguna untuk pengaturan jarak konten dengan konten lainnya.
>Penggunaan height dan width digunakan untuk mengatur lebar dan panjang suatu elemen.
>Penggunaan pengturan teks yang baik juga dapat mempengaruhi keindahan sebuah website.
F. Referensi
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/css/css_dimension.asp
https://www.w3schools.com/css/css_text.asp 

Wassalamu'alaikum W. W. 

Share this post