Styling Halaman Web Menggunakan CSS

 Styling Tampilan Website Menggunakan CSS

Topik Pembahasan Penggunaan CSS

1. Penjelasan CSS (Pengertian, Definisi, Fungsi, dan Tujuan)

2. Konsep Layout pada halaman website.

3. Jenis -  jenis Layout pada halaman website.

4. Contoh penulisan script code CSS.

5. Metode Stylesheet 

• Inline Style
• Internal Style
• External Style

6. Contoh - contoh property pada CSS.

1. PENJELASAN CSS

Pengertian :

    CSS merupakan singkatan dari Cascading Style Sheet, yaitu bahasa yang digunakan untuk menentukan tampilan dan format website. CSS digunakan bersama dengan bahasa markup, seperti HTML oleh karena itu hubungan kedua bahasa ini cukup erat karena HTML yang sifatnya sebagai fondasi dan CSS yang sifat nya sebagai pengisi.

Tujuan :

    Tujuan CSS sendiri ialah untuk menentukan tampilan dan format halaman website sehingga dapat menciptakan sebuah website yang menarik dan memiliki fungsi yang berjalan dengan baik.

Fungsi :

1. Mempercepat loading halaman website.
2. Memudahkan pengelolaan kode.
3. Menawarkan lebih banyak variasi tampilan.
4. Membuat Website tampil rapih di semua ukuran layar.

2. KONSEP LAYOUT PADA HALAMAN WEBSITE

    Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, serta penekanan pada bagian tertentu. Dengan menggunakan CSS kita dapat memodifikasi layout website (front-end) atau tampilan depan dengan mudah. Orang yang membuat atau mendesain sebuah layout disebut sebagai Layouter, adaoun aktivitas tersebut dinamakan proses Layouting. 

3. JENIS - JENIS LAYOUT PADA HALAMAN WEBSITE

1. Fixed Layout

Penggunaan Layout ini dapat membuat lebar atau proporsi tamplian website menjadi tetap, tidak berubah ubah (fixed),  tampilan Layout ini bisa saja unresponsive jika dibuka melalui mobile.

2. Fluid Layout

Layout yang satu ini merupakan salah satu jenis Layout yang banyak digemari para pembuat website, karena dalam mendesain tampilan yang satu ini, proporsi lebar yang dirancang untuk elemen website dimodifikasi sedemikian rupa agar dapat beroprasi dengan baik pada berbagai macam ukuran tampilan layar.

3. Responsive Layout

Layout yang satu merupakan pencampuran antara Fixed Layout dan Fluid Layout yang dimana elemen atau komponen website dalam sebuah website seperti gambar, teks, grid, padding, dan margin dapat menyesuaikan secara mandiri pada resolusi layar pengunjung atau viewer.

4. CONTOH PENULISAN SCRIPT CODE CSS

Contoh penulisan internal CSS style :

Hasilnya :