Skip to content Skip to sidebar Skip to footer
Home / css / css-dasar / web-design

CSS Dasar Part 1 - Beauty Of CSS

Posted by Eren Rere Post a Comment
CSS Dasar Part 1 - Beauty Of CSS- Amazing CSS, banyak kata yang bisa menggambarkan makna dari bahasa CSS untuk dunia web design. Di artikel saya mengenai About HTML, saya pernah menjelaskan bahwa HTML adalah pembentuk struktur utama sebuah halaman website, sedangkan CSS mempunyai fungsi Dekorasi pada sebuah halaman website. Ibaratnya, CSS adalah seorang MakeUp Artist, yang bisa membuat penampilan seseorang menjadi terlihat sangat menarik dan berbeda.

css membuat halaman website lebih menarik dan interaktif
Beauty Of CSS


CSS secara ilmiah adalah terminologi dari singkatan Cascading Style Sheet. Berdasarkan link http://www.w3.org/style/CSS, CSS diterjemahkan sebagai sebuah mekanisme sederhana yang mengatur gaya/style pada halaman website. Gaya/style ini bisa berupa ukuran, warna, posisi, bentuk, dll.

Semua website tanpa ada dekorasi dari CSS, tampilannya akan terlihat sama, hanya ada text, gambar, dan link saja. CSS yang bisa membuat sebuah halaman website, meskipun struktur halaman website yang dibentuk oleh HTML sangat sederhana, tapi dengan CSS halaman tersebut bisa sangat cantik, menarik, berbeda, interaktif, dan yang pasti memberikan nilai untuk sebuah halaman website bagi user yang mengunjungi website tersebut. Jadi sebaiknya kita juga harus paham mengenai apa itu CSS dan fungsinya selain kita memahami HTML, even hanya sedikit saja.

HTML sendiri sebenarnya bisa mempercantik dan mendekorasi halaman website dengan segala keterbatasannya . namun sangat disarankan, untuk mendekorasi website kita menggunakan CSS tidak menggunakan HTML. CSS bisa memisahkan antara konten dan style dari konten halaman website tersebut. Kalau kita menggunakan HTML, style dan konten akan dijadikan satu, sehingga sangat tidak praktis. Untuk contoh langsungnya, kita bisa lihat contoh HTML dibawah ini, bagaimana kalau kita menggunakan HTML untuk menghias/mendekorasi element dari halaman sebuah website:


<!DOCTYPE html>

<html>
<head>
    <title>CSS</title>
</head>
<body>

<font size="10px" color="orange" face="arial">
    <center><h1>Hello World</h1></center>
</font>
<font size="5px" color="yellow" face="verdana">
    <center><p>Kita belajar apa itu CSS dan bagaimana cara menggunakannya</p></center>
</font>    
</html>

cara memberikan style css pada halaman html
CSS ( Cascading Style Sheet )

Dari contoh diatas kita bisa lihat bagaimana menghias satu element dalam HTML. Kalau kita menggunakan HTML untuk mendekorasi, artinya setiap baris element, harus diberikan style masing-masing. Kalau dalam satu halaman kita memiliki 10 h1 dan 10 p, maka kita harus mendekorasi 10 h1 dan 10 p, belum lagi elemen atau tag HTML lainnya. Hal ini sangat merepotkan dan tidak praktis, karena membuat halaman HTML kita jadi tidak rapi dan sangat banyak kode HTML, bisa dibayangkan hal ini mungkin akan membuat kepusingan pada saat kita membuat website.

Dengan CSS kita bisa memisahkan antara konten dan style dengan begitu mudah. Satu element yang kita beri style, maka style ini akan berlaku juga buat style lain dengan syarat masih dalam element atau tag HTML yang sama. Untuk contohnya kita bisa lihat contoh berikut, hasilnya akan sama dengan contoh diatas :

HTML

<h1>Hello World</h1>
    <p>Kita belajar apa itu CSS dan bagaimana cara menggunakannya</p>

CSS

h1 {
 font-family: arial
 font-size: 10px;
 color: orange;
 text-align: center;
}
p {
 font-family: verdana;
 font-size: 5px;
 color: yellow;
 text-align: center;
}

cara memberikan style css dengan file css yang terpisah dari halaman html
CSS ( Cascading Style Sheet )

Dari contoh di atas, kita bisa menyimpulkan mengenai CSS ( Cascading Style Sheet ) sebagai berikut :
  • CSS merupakan aturan untuk menampilkan sebuah element / tag HTML.Kalau HTML fungsinya untuk membuat struktur utama halaman website dan menyajikan konten, sedangkan peranan CSS adalah bagaimana sebuah konten dapat ditampilkan pada halaman website secara menarik, berbeda, dan interaktif dengan style atau gayanya, baik itu berupa warna, ukuran, dan posisi sebuah konten.
  • CSS dibuat terpisah dengan HTML. CSS bisa dibuat terpisah dengan elemen HTML ataupun dijadikan satu, tapi tetap dalam bagian yang berbeda, sehingga tidak mengotori halaman HTMLnya.
  • CSS bertujuan untuk memisahkan konten dan style. Apabila konten dan style dipisahkan, akan mudah bagi kita memodifikasi konten dan style masing-masing, tanpa harus mengotori halaman CSS atau HTMLnya.
  • Satu CSS dapat digunakan pada banyak halaman HTML. Karena konten dan style terpisah, maka 1 CSS bisa digunakan pada struktur halaman HTML yang berbeda.Sebagai contoh apabila kita memiliki struktur HTML yang berbeda ada 100, maka 1 CSS ini bisa memberikan style pada 100 struktur halaman HTML tersebut. Contohnya bisa dilihat digambar dibawah ini :


mekanisme kerja html dan css
Cascading Style Sheet

  • Satu halaman HTML dapat berbeda, jika menggunakan CSS yang berbeda pula. Ketika kita memilki satu halaman website, kemudian dalam periode waktu tertentu kita jadwalkan untuk melakukan perubahan tampilan agar tidak terlihat membosankan dan selalu menyajikan tampilan baru dan menarik sesuai dengan trend, saat inilah kita menggunakan CSS yang berbeda setiap waktu.


Apabila kita bisa memahami HTML dan CSS, akan sangat membantu kita dalam mengontrol konten dan style website kita setiap waktu. Kita bisa mengubahnya kapan saja kita mau, baik itu sesuai dengan selera kita atau selera trend pasar.

Sekian pembahasan mengenai apa itu CSS dan fungsinya, semoga penjelasan ini bisa bermanfaat buat teman-teman yang baru belajar CSS, kalo ada pertanyaan, kritik dan saran, silakan tulis dikolom komentar. See you on my next articles.

Referensi :
https://www.w3schools.com
https://www.w3schools.com/css
https://www.w3.org/Style/CSS/


  • kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
  • the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Post a Comment for "CSS Dasar Part 1 - Beauty Of CSS"

Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan