Apakah tampilan web kamu biasa saja ? terlihat kaku ? saya punya jawabannya yaitu menggunakan CSS, apa sih CSS itu ? sebelum itu marillah kita lihat pengertian nya terlebih dahulu
- Pengertian CSS 📍
CSS atau Cascading Style Sheet adalah salah satu styling language (Bahasa design) bagian dari Markup Language seperti HTML, yang dapat "mewarnai" atau mendesain suatu halaman web
- Konsep Layout halaman web 🔍
Dengan CSS kita dapat memodifikasi layout website (front-end) atau halaman depan dengan mudah, orang yang mendisign / membuat layout disebut sebagai disebut Layouter dan kegiatannya disebut dengan proses Layouting. Dalam proses layouting CSS kita dapat menggunakan Flexbox dan Grid dalam mengatur tata letak suatu elemen pada web. Flexbox dan Grid sama-sama berfungsi untuk mengatur tampilan sebuah halaman web menjadi lebih tersusun / terorganisir dengan rapi
- Jenis - Jenis Layout halaman Web 🔎
- Fixed Layout
Dalam penggunaan Fixed Layout tampilan web akan tetap (fixed). Mungkin tidak terlihat responsive di tampila perangkat mobile - Fluid Layout
Layout ini sangat di senangi web developer , karena dalam mendisign tampilan ini persentase ukuran lebar yang dirancang untuk element web dapat diatur sedemikian rupa agar bekerja dengan baik - Responsive Layout
Jenis Layout ini adalah penggabungan dari Fixed Layout dan Fluid Layout , dimana seluruh element di web seperti, text, gambar, grid, margin, dan padding, dapat menyesuaikan resolusi layar pengunjung web
- Contoh penulisan script code CSS ✏️
Dalam CSS terdapat beberapa atribut dalam menyeleksi suatu element, dapat menggunakan class. id, dan juga value.
CONTOH
See the Pen CSS 1 by Ryuzen (@iryyuzen_) on CodePen.
- Metode Stysheet ✍️
- Inline Style
Inline style adalah cara untuk memberi style pada tag HTML yang di seleksi ( tidak secara umum)
See the Pen Inline Style by Ryuzen (@iryyuzen_) on CodePen.
- Internal Style
Internal Style adalah cara memberi style pada tag HTML yang di awal syntax
<style>. . . . .</style>
See the Pen Internal Style by Ryuzen (@iryyuzen_) on CodePen.
- External Style
External Style adalah mengkoneksikan satu file ke file lainnya. Seperti contoh terdapat dua buah file
See the Pen External Style by Ryuzen (@iryyuzen_) on CodePen.
- Contoh properties pada CSS 📁
p {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: 400;
color: gray;
}
img {
width: 400px;
border-radius: 15px;
border: 4px solid;
}
table {
border-spacing: 5px;
border-collapse: 2px;
}
Sumber Informasi :
Posting Komentar