Style Halaman Website dengan memakai CSS

on

 CSS (Cascading Style Sheets)


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

See the Pen CSS by felicia rivera (@liverra) on CodePen.


  • 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.

See the Pen Inline Style by felicia rivera (@liverra) on CodePen.


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

See the Pen Internal Style by felicia rivera (@liverra) on CodePen.


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

See the Pen External Style by felicia rivera (@liverra) on CodePen.


  • 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;
}

Comments

Post a Comment