Style Halaman Website dengan memakai CSS

 CSS (Cascading Style Sheets)

• Apa itu CSS?
  
  
  
  Source: https://kursus-php.net/wp-content/uploads/2020/12/Apa-itu-CSS.jpg
  
  
  

Cascading Style Sheets atau yang biasa disebut dengan CSS digunakan untuk menyederhanakan proses pembuatan website dan untuk memperindah tampilan pada suatu website.

• Konsep Layout Halaman Web

Memodifikasi Layout website dapat dilakukan dengan CSS, orang yang mendesain layout disebut layouter. Proses layout disebut dengan layouting, dalam proses ini kalian dapat menggunakan Flexbox dan Grid untuk mengatur tata letak elemen pada sebuah web. Mereka memiliki fungsi yang sama, yaitu untuk mengatur sebuah tampilan halaman web agar terlihat lebih indah dan rapih.

• Jenis-jenis Layout Halaman Web

Jenis-jenis layout pada halaman web terbagi menjadi beberapa bagian, yaitu:

1.Fixed Layout

Fixed layout atau tata letak dengan posisi lengkap sehingga membuat tampilan tidak berubah-ubah yang menentukan efisiensi dalam suatu operasi dalam jangka panjang.

2. Fluid Layout

Fluid layout yaitu mendesain tampilan dalam presentase lebar yang dibuat untuk elemen web agar dapat diatur dan bekerja dengan maksimal pada setiap ukuran layar, layout ini juga merupakan layout yang paling banyak disukai oleh website developer.

3. Responsive Layout

Responsive layout artinya layout yang dapat tampil dengan baik sesuai fungsinya pada layar seluruh perangkat. Responsive layout ini merupakan gabungan dari Fixed layout dan Fluid Layout.

• Contoh Penulisan Script Code CSS

• Metode Style Sheets

1. Inline Style

Inline style yaitu code CSS yang ditulis langsung pada atribut elemen HTML guna memberikan style pada setiap tag. Inline CSS ditulis pada atribut style pada sebuah elemen.

2. Internal Style

Internal style yaitu code CSS yang ditulis dalam tag <style> dan dituliskan pada bagian atas (header) file HTML.

3. External Style

External style yaitu code CSS yang ditulis terpisah dengan code HTML, eksternal CSS ditulis dalam sebuah file khusus yang umumnya dengan ekstensi .css

• Contoh Property Pada CSS

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-family: arial;
    text-decoration: underline;
    color: pink;
}
img {
    background-image: url('https://wallpapertag.com/wallpaper/full/8/b/2/725730-widescreen-cute-colorful-backgrounds-2545x1692.jpg');
    width: 500px;
    border-radius: 15px;
    border: 5px solid;
}