Mengenal Dasar Dasar dan Layouting CSS

Minggu, 21 Agustus 2022

Dasar Menggunakan CSS

sumber : https://codelatte.org/wp-content/uploads/2018/11/CSS.jpg

Sebelum mempelajari Dasar Menggunakan CSS pada website, tahukan kalian apa itu CSS?CSS singkatan dari Cascading Style Sheet adalah mekanisme sederhana yang mengatur gaya/style (cth: warna, ukuran, posisi, dll). Pada Halaman Web. Bisa belajar di "https://www.w3.org/style/CSS".

Aturan yang digunakan untuk menampilkan elemen / tag html :

Dibuat terpisah dengan HTML
Bertujuan untuk memisahkan konten dan style
1 CSS dapat digunakan untuk banyak halaman HTML
1 Halaman HTML dapat terlihat berbeda Jika CSS yang digunakan juga berbeda

Contoh 1 CSS dapat digunakan untuk banyak halaman HTML

Konsep layout adalah sebuah kerangka yang mengatur tata letak navigasi, tombol CTA, dan elemen lainnya pada website. Dengan Layout yang tepat, suatu tampil Informasi pada website menjadi lebih rapih atau lebih menawan dan lebih fungsional.

2. Jenis Jenis Layout Halaman Web

Untuk membuat layout lebih fungsional, kita juga perlu tau beberapa jenis Layout. Berbagai jenis untuk membuat suatu tampilan website menjadi lebih nyaman untuk di pandang, kita perlu mengetahui memberikan suatu layout yang terbagi jadi beberapa jenis, yaitu :

Single column. © Screenshot Glints Blog.
Split screen. © invisionapp.com.
Multicolumn. © Screenshot Wired.
Asimetris. © onextrapixel.com.
Grid of Cards. © Screenshot YouTube.
Featured image. © Screenshot Apple.

3. Metode Stylesheet

CSS sendiri memiliki sebuah anatomi "selector { Property : Value;}"

Contoh :

h1 { Color : Green;}

Didalam CSS sendiri terdapat Total 350+ property dan value. Ada juga beberapa metode stylesheet yang digunakan dalam css, yaitu :

A. Inline Style

Inline style itu disisipkan langsung di dalam Codingan HTML yang mau kita isi dengan CSS.

Contoh :

<h1 style="color : Yellow;">Hello World</h1>

B. Internal Style/Embed

Dalam Internal Style/embed akan lebih mudah digunakan apabila codingan sudah di kelompokkan. Embed biasanya di letakan di bagian head pada HTML, sebagai contoh :

See the Pen Untitled by Mugata (@Mugata01) on CodePen.

C. External Style

External Style menggunakan metode yang mana CSS dan Html terpisah atau di tempatkan di file yang berbeda. Dibawah ini adalah External Style :

Contoh HTML dari External Style: