🎨 Penjelasan tentang CSS, Apa itu CSS ?
- Baca Juga Pengertian Website
CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.
📝 Konsep layout halaman web
Dengan CSS kita dapat memodifikasi layout website (front-end)/halaman depan dengan mudah, orang yang membuat/mendesain layout disebut Layouter dan kegiatan tersebut dinamakan proses Layouting. Dalam proses layouting dalam CSS kita dapat menggunakan Flexbox dan Grid dalam mengatur posisi/tata letak elemen pada web. Flexbox dan Grid sama-sama berfungsi untuk mengatur tampilan sebuah halaman web menjadi lebih terstruktur dan rapi.
⚙️ Jenis-jenis layout halaman web
✔️ Fixed Layout
Dalam penggunaan Fixed Layout lebar tampilan web menjadi tetap (fixed), mungkin terlihat seperti tidak responsive jika dibuka dalam tampilan mobile.
✔️ Fluid Layout
Layout ini adalah yang paling banyak disukai oleh para pembuat website, karena dalam mendesain tampilan ini, persentase lebar yang dirancang untuk elemen web diatur sedemikian rupa agar bekerja dengan baik pada berbagai ukuran layar.
✔️ Responsive Layout
Jenis layout ini, merupakan penggabungan dari Fixed Layout dan Fluid Layout, dimana seluruh elemen dalam web seperti, teks, gambar, grid, margin, dan padding, dapat menyesuaikan sendiri pada resolusi layar pengunjung.
✒️ Contoh penulisan script code CSS
Dalam CSS terdapat beberapa atribut dalam menyeleksi suatu elemen, dapat menggunakan class, id, dan value.
Contoh:
See the Pen CSS syntax by Syaddad (@syaddad) on CodePen.
✍️ Metode stylesheet
- Inline Style
Inline Style adalah cara untuk memberi style pada tag html yang di seleksi, tidak secara umum.
See the Pen Inline Style by Syaddad (@syaddad) on CodePen.
- Internal Style
Internal Style adalah cara kita memberi style pada tag-tag html yang di awali sintaks
<style>....</style>
See the Pen Internal Style by Syaddad (@syaddad) on CodePen.
- External Style
External Style adalah menkoneksikan file satu dengan file lainnya. Seperti contoh terdapat dua file, yaitu
See the Pen External Style by Syaddad (@syaddad) on CodePen.
🎨 Contoh-contoh property pada CSS
h1 {
font-weight: 400;
text-transform: uppercase;
font-family: poppins;
text-decoration: underline;
color: grey;
}
img {
background-image: url('https://i.postimg.cc/YS2nRBLX/BIG-BLUR-DAY-3.png');
width: 500px;
border-radius: 15px;
border: 5px solid;
}
/*Contoh Properti Pada tag h1 dan img*/
