Skip to content
  • Home
  • Services

    Jasa Pembuatan Website

    SEO / SEM

    Landing Page

    Company Profile

    Product Catalog

    Online Shop

  • Website Features
  • Our Projects
  • Contact Us

Our Blog

Belajar Komponen Dasar CSS Dengan Mudah

Table of Contents

Toggle
    • Baca Juga : 4 Manfaat Website untuk Bisnis Anda
  • Jenis-jenis CSS
  • Pengenalan komponen dasar CSS
  • Kelebihan CSS

CSS atau Cascading Style Sheet jadi sebuah bahasa style sheet yang sangat berbeda dari bahasa pemrograman dan bahasa mark up. Penggunaan CSS sering digunakan untuk membuat format layout halaman web. Tidak hanya untuk membuat format layout halaman web, CSS juga bisa berfungsi sebagai alat yang digunakan untuk menambahkan font, warna, dan spasi yang ada ke dalam dokumen HTML.

Keberadaan CSS pada dasarnya sangat membantu para developer website untuk membuat tampilan menarik dengan waktu yang tidak begitu banyak. CSS dikembangkan oleh World Wide Web Consortium (W3C) pada tahun 1996.

Baca Juga : 4 Manfaat Website untuk Bisnis Anda

Website yang memiliki banyak font, warna yang beragam, dan style yang sangat menarik membutuhkan CSS untuk mewujudkan itu semua. Karena itu CSS jadi hal yang sangat penting untuk tampilan sebuah website. Satu file dari CSS bisa digunakan untuk halaman website lain, jadi ketika web developer ingin mengubah tampilan halaman web bisa mengubah tampilan secara bersamaan.

HTML dan CSS dalam sebuah pembangunan website jadi hal yang tidak dapat dipisahkan. CSS sebagai pondasi dari tampilan sebuah website sedangkan HTML sebagai pondasi dan dasar pijakan dari website tersebut yang ditulis dengan bahasa mark up.

Jenis-jenis CSS

Ada beberapa jenis penulisan kode di CSS yang bisa dilakukan oleh para developer untuk mempercantik tampilan website yang dibangun. Ada 3 jenis CSS yang biasa digunakan, yaitu seperti yang terangkum di bawah ini.

  1. Inline style sheet

Penggunaan inline style sheet sering sekali membuat ukuran file yang ada di HTML jadi semakin besar. Hal ini karena tag pada HTML penuh dengan atribut HTML karena penulisannya langsung dilakukan di HTML.

  1. Internal style sheet

Kode ini biasanya ditulis dalam tag <style> yang ada di  file HTML. Penggunaan internal style sheet hanya berubah di satu halaman. Selain itu, komponen class dan ID pada selektor CSS juga bisa digunakan untuk internal style sheet.

  1. Eksternal style sheet

Jika inline dan internal ditulis langsung di tag dan file HTML, lain halnya dengan eksternal style sheet yang ditulis terpisah dengan memberikan ekstensi. Untuk menggunakan CSS yang ada ke HTML, Anda perlu untuk mengimpornya terlebih dahulu

Pengenalan komponen dasar CSS

Seperti hal lain dalam pembuatan website, di dalam CSS juga ada yang perlu diperhatikan sebagai hal-hal dasar yang sangat penting. Setidaknya, hal-hal di bawah ini perlu Anda perhatikan.

  1. Selektor

Dalam CSS ada yang dinamakan sebagai selektor. Selektor adalah kata kunci atau simbol yang digunakan untuk menyeleksi dan memilih elemen HTML. Setidaknya ada 5 selektor yang terdapat di CSS, seperti selektor tag, selektor class, selektor ID, selektor atribut, selektor universal.

Setiap selektor yang ada di CSS punya cara dan kode penggunaannya tersendiri. Seperti selektor class yang dibuat dengan tanda titik di depannya. Sedangkan selektor ID yang punya sifat unik dengan tanda pagar (#) yang ada di depannya, dan seterusnya.

  1. Properti

Sama seperti selektor yang punya banyak jenis di dalamnya, properti yang ada pada sebuah CSS uga terdiri dari berbagai macam jenis lagi di dalamnya. Ada properti position, properti float, dan properti display.

Karena CSS digunakan untuk membuat format layout halaman web beserta komponen dan isi yang terkait di dalamnya, maka ketiga properti yang ada tadi juga berkutat di sisi elemen tampilan.

  1. Value

Selanjutnya ada value yang sangat berhubungan dengan properti. Value jadi bagian dari statement yang ada di sebuah CSS. Terdapat beberapa tipe dari value, URL dan URI, warna, string, integer dan real number, persentase, dan lain-lainnya. Sebuah value sangat tergantung pada jenis properti yang digunakan.

Kelebihan CSS

Diluar dari kemudahannya untuk membantu pengerjaan website para developer, ternyata banyak kelebihan Cascading Style Sheet. Kelebihan-kelebihan yang ada pada CSS menjadi hal yang menyebabkan style sheet ini jadi favorit bagi sebagian orang.

  1. Memuat halaman lebih cepat

Dengan CSS, baris kode yang dimuat jauh lebih sedikit selain itu halaman yang dimuat bisa lebih cepat. Karena baris kode yang dimuat lebih sedikit, hal tersebutlah yang menyebabkan proses download jadi lebih mudah.

  1. Didukung banyak browser terbaru

Selain didukung oleh banyak browser terbaru, CSS juga bisa sangat kompatibel dengan berbagai macam perangkat jadi Anda bisa sekaligus menyesuaikan tampilan dokumen sesuai dengan perangkat yang digunakan.

  1. Jadi standar pengembangan website

Saat ini, CSS jadi standar pengembangan website di hampir seluruh dunia. Hal ini karena rata-rata website sudah dibangun dengan CSS. Oleh karena itu, sebuah website yang dibangun dengan CSS punya tampilan yang menarik di browser-browser terkenal.

by Breefstudio
Share this article :
Share on facebook
Share on twitter
Share on linkedin
Related Post

Keunggulan Website Produk Katalog! VS Brosur Cetak? Praktis?

Sobat Breef, di era digital saat ini, kita tidak bisa hanya mengandalkan cara pemasaran konvensional. Brosur cetak yang dulu menjadi andalan kini mulai tergeser oleh

Mengapa Website Bisnis Harus Mobile-Friendly? Ini Alasannya!

Era Digital Yang Serba Smart! Sobat Breef, di era digital seperti sekarang, hampir semua orang menggenggam smartphone setiap saat. Dari mencari informasi, berbelanja online, hingga

Etika Kecerdasan Buatan! Tantangan, Tanggung Jawab Era Digital

Sobat breef, dalam beberapa dekade terakhir, kecerdasan buatan (AI) telah berkembang pesat dan menjadi bagian integral dari kehidupan kita. Teknologi ini tidak hanya mengubah cara

FREE konsultasi dengan Breef Studio

Website expert kami dengan senang hati akan segera membantu Anda. Konsultasi segera untuk mendapatkan solusi terbaik untuk bisnis Anda.

Hubungi kami

Dimulai dengan memahami bisnis dan kebutuhan bisnis klien kami, kami mengidentifikasi dan memfasilitasi berbagai fitur dan perangkat sesuai kebutuhan untuk meningkatkan pertumbuhan bisnis mereka.

Services
  • Company Profile
  • Product Catalog
  • Online Shop
  • SEO / SEM
About
  • Our Company
  • Our Team
  • Career
  • Blog
  • Our Contact
PT Breef Digital Indonesia
AKR Tower Unit 9E
Kebon Jeruk, Jakarta Barat Indonesia
Instagram
Facebook
Linkedin
Google Partner
© Copyright 2025 Breef | All Rights Reserved