css adalah

CSS (Cascading Style Sheets) Adalah? Pengertian – Belajar Desain Web

CSS (Cascading Style Sheets) adalah bahasa desain web yang memungkinkan Anda untuk mengatur serta mengontrol tampilan web Anda yang sebelumnya dibuat dengan bahasa mark up. Seperti kita ketahui bersama bahwa, dunia IT sudah semakin maju sehingga sebagaian besar anggota masyarakat sudah bisa mendapatkan akses internet.

css adalah
CSS (Cascading Style Sheets) Adalah? Pengertian – Belajar Desain Web

Berbicara tentang internet, tentu kita harus berbicara tentang situs dan website yang tak terhitung jumlahnya. Banyak dari kita yang memiliki situs dan website untuk beraneka macam keperluan. Memiliki blog dan situs merupakan hal yang lumrah bagi masyarakat modern. Membuat website, tentu erat kaitannya dengan bahasa pemrograman.

Sering kali blogger akan takut duluan dan tidak mau belajar bahasa pemrograman karena materi ini memang tidak mudah. Namun demikian, bila Anda belajar dengan sungguh-sungguh, Anda akan bisa menguasai bahasa pemrograman dengan mudah. Yang jelas, blogger akan banyak diuntungkan bila mereka paham tentang bahasa pemrograman tersebut.

Pengertian CSS (Cascading Style Sheets)

CSS ialah salah satu bahasa pemrograman yang memungkinkan Anda untuk mengatur tampilan website Anda sesuai dengan yang dikehendaki. Bila Anda menguasainya, Anda bisa mengedit tampilan website Anda sesuai yang Anda inginkan. Itulah kenapa para blogger atau siapa saja yang memiliki website harus tahu dasar – dasar bahasa pemrograman.

CSS kependekan dari Cascading Style Sheets. Pada dasarnya, memiliki fungsi untuk memisahkan isi atau konten dari tampilan visual pada sebuah blog atau situs.

Sejarah CSS

Perlu diketahui bahwa, CSS sudah dikembangkan pada tahun 1996 oleh Word Wide Web Consortium atau W3C dengan maksud untuk memudahkan seseorang membuat website. Sebelum diciptakan, memformat sebuah halaman blog sangatlah sulit. Hal ini disebabkan karena pada HTML tidak dilengkapi dengan tags seperti yang kita tahu saat ini. CSS memudahkan para programmer untuk mengatur tampilan halaman situs yang dikelolanya.

Bisa dikatakan bahwa, tampilan halaman sebuah situs dipresentasikan atau ditampilkan. Dalam hal ini, code yang ada berfungsi untuk memperbaiki dan mempercantik halaman muka sebuah situs agar nampak menarik dan profesional.

Tampilan muka sebuah website sangat penting mengingat halaman muka merupakan halaman dimana pertama kali pengunjung datang ke website Anda. Pada perkembangannya, ada berbagai macam cara dan teknik untuk mengoptimasi halaman homepage guna meningkatkan konversi pengunjung web.

Dengan menggunakan CSS, bisa dengan mudah mengatur tampilan halaman depan situs Anda seperti warna tulisan membuat animasi, mengatur besarnya halaman untuk mencocokan dengan ukuran layar browser dan lain sebagainya.

Pada HTML versi 3.2 tags seperti <font> menimbulkan banyak masalah bagi para web developer. Hal ini disebabkan karena situs – situs tersebut memiliki beragam font dengan background dan style yang beragam pula. Untuk mengubahnya, seorang programmer harus menulis ulang dari nol yang memerlukan waktu sangat penjang dan melelahkan. Dengan bantuan W3C yang telah membuat CSS, masalah pelik ini bisa diatasi dengan mudah.

Hubungan CSS dan HTML

CSS dan HTML memiliki hubungan yang sangat erat. HTML bisa dikatakan sebagai pondasi sebuah situs yang tentunya ditulis dengan bahasa mark up, sedangkan ha-hal yang berkaitan dengan memperbaiki tampilan Anda akan memerlukan CSS. Yang jelas, kedua bahasa pemrograman ini berjalan bersama-sama untuk membantu programmer membuat sebuah web yang menarik dan profesional.

Sama seperti bahasa pemrograman yang lainnya, CSS terus berkembang. Pada tahun 1970, awalnya Cascading Style Sheet dikembangkan di SGML (Standard Generalized Markup Languange). Setelah itu, CSS terus berkembang dan sampai saat ini telah mendukung berbagai bahasa mark up misalnya XML, XHTML, SVG, HTML dan XML user interface language atau yang sering disebut dengan Mozilla XUL.

Pada tahun 1996 tepatnya pada bulan Desember, W3C melakukan perbaikan dengan memperkenalkan spesifikasi CSS level 1 atau lebih umum dikenal dengan CSS1.

CSS1 ini telah mendukung berbagi fromat, text font serta warna yang lebih beragam.

Selanjutnya, pada bulan Mei 1998 CSS2 diperkenalkan. Pada CSS2, Anda bisa dengan mudah mengatur tata letak elemen pada halaman depan situs Anda.

CSS terakhir yang diperkenalkan dan banyak kita pakai sekarang adalah CSS3.

Yang pasti CSS memiliki fungsi sangat penting. Hal ini karena sangat membantu bukan saja dalam hal-hal teknis, tetapi juga membuat tampilan lebih menarik dan elegan.

Kelebihan CSS

Sebenarnya, kita bisa dengan mudah mengetahui web yang menggunakan CSS dan yang tidak menggunakannya sama sekali. Sering kali, kita membuka sebuah website dan website tersebut gagal melakukan loading. Sebagai gantinya, web tersebut menampilkan halaman dengan dasar putih dan tulisan hitam atau biru. Bila hal ini terjadi bisa dipastikan bahwa website tersebut mengalami kegagalan dalam mengupload CSS atau bahkan website tersebut tidak memiliki CSS sama sekali alias hanya menggunakan HTML biasa.

Dengan adanya CSS, Anda tidak perlu lagi mendeskripsikan lagi semua alignment, warna font, background, dan lain sebagainya. Hal ini tentunya akan membuat pekerjaan Anda lebih cepat dan lebih mudah.

CSS juga membantu Anda dalam hal mengatur tampilan aspek file yang berbeda. Anda tinggal menentukan style lalu mengintegrasikan menjadi satu antara file CSS dan mark up HTML yang ada.

Cara Kerja CSS (Cascading Style Sheets

Syntax yang digunakan dalam CSS adalah bahasa inggris sederhana dan disana terdapat beberapa rule. Seperti kita tahu bahwa, HTML hanya digunakan untuk mark up halaman situs saja, sedangkan untuk styling Anda bisa menggunakan CSS. Sebagai Contoh: <p> This is a paragraph.</p>.

Sekarang bagaimana caranya untuk membuat style paragraph? CSS memiliki struktur syntax yang sederhana. Di dalam struktur, ada declaration block dan selector. Anda tinggal memilih elemen yang mana yang Anda ingunkan. Setelah itu, Anda tinggal declare untuk elemen yang sudah Anda pilih.

Yang jelas, Anda harus mengingat rules yang ada. Tapi, tenang saja rules yang ada sangat sederhana dan tentunya mudah untuk diingat. Awal mulanya Anda akan berpikir bahwa CSS nampak menakutkan tetapi Anda akan cepat menyukainya bila sudah mulai memahaminya.

CSS Style External, Internal dan CSS Inline

Setiap kali website di refresh oleh pengguna maka CSS style internal akan di load ulang. Dengan demikian, maka waktu loading sebuah halaman menjadi lambat. Hal ini merupakan kekurangan dari CSS. Namun, dengan CSS Anda bisa melakukan sharing template untuk preview karena ada dalam satu halaman.

Contoh coding CSS Internal:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      body {background-color:blue;}
      h2 {color:yellow;}
      p {color:red;}
   </style>
</head>
<body>

<h2>Ini Adalah Contoh Internal CSS</h2>

<p>Internal CSS adalah coding CSS yang dilakukan secara langsung pada halaman HTML sebuah website. Disini Anda menggabungkan codingnya langsung. Styling pada CSS internal dapat menjadi lebih mudah.</p>

</body>
</html>

CSS yang paling mudah adalah external karena semua aktivitas dilakukan di external file CSS. Mereka memiliki file yang terpisah dan bisa diterapkan di halaman manapun sehingga membuat loading halaman lebih cepat.

Contoh coding CSS External:

body {background-color:red;}
h2 {color:black;}
p {color:yellow;}

Elemen spesifik yang digunakan pada CSS inline adalah tag <style>. Setiap komponen dilakukan style tersendiri. Dalam hal ini, penggunaan CSS tidak disarankan. Namun demikian, bila ada elemen yang ingin Anda ubah, maka Anda tidak memiliki akses ke file CSS.

Contoh coding CSS Inline: 

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:black;">

<h2 style="color:white;">Cara Menggunakan CSS Pada HTML Secara Langsung</h2>

<p style="color:white;">CSS adalah sebuah bahasa pemrograman yang digunakan untuk membuat menarik tampilan suatu halaman website. CSS ini termasuk kategori CSS Internal karena coding dilakukan pada internal halaman HTML</p>

</body>
</html>

 

Cara Mengubah Tampilan Blogger dengan Mengedit CSS

CSS banyak dipakai oleh blogging platform populer saat ini. Salah satu blogging platform yang sangat terkenal dan memiliki banyak pengguna adalah Blogger yang dimana dimiliki oleh Google.

Saat ini, ada jutaan orang menggunakan Blogger. Bila Anda salah satu dari mereka, Anda harus tahu bagaimana cara merubah tampilan blogger dengan menggubah lewat CSS-nya. Dalam kesempatan ini, kita akan bahas tentang mengubah tampilan blogger lewat CSS.

Mengubah tampilan blogger dengan mengubah CSS-nya tidaklah susah. Perlu diketahui, ada dua cara untuk bisa mengubah CSS pada blogger, yaitu lewat menu kustomisasi yang ada atau Anda bisa langsung mengubahnya di kode HTML yang ada. Dua-duanya bisa memberi hasil yang diharapkan bila dilakukan dengan benar.

mengubah tampilan website
Cara Mengubah Tampilan Blog Dengan Menggunakan CSS

Bila Anda ingin mengubah tampilan blogger melalui menu kustomisasi blogger, maka Anda akan menambah kode yang ingin Anda pasang yang akan terpisah dengan CSS yang ada. Ini adalah cara terbaik khususnya bila Anda ingin menyimpan CSS yang ingin ditambahkan. Dalam hal ini, kode akan tetap tersimpan meski Anda mengganti template baru yang Anda inginkan.

Bila Anda ingin menghindari penumpukan kode yang kadang bisa membuat panambahan kode tidak nampak hasilnya, Anda bisa menambahkan kode langsung ke HTML-nya. Cara ini juga akan menyatukan kode CSS tambahan menjadi satu dengan CSS utama.

Cara Menambah CSS melalui Template Blogger

Untuk menambah CSS lewat template blogger sangat gampang. Berikut ini adalah caranya:

  1. Pertama, Anda harus login terlebih dahulu lalu masuk ke bagian dashboard.
  2. Selanjutnya, pilihlah Menu lalu template terus sesuaikan.
  3. Kemudian, pilih menu Tingkat lanjut dan selanjutnya pilih Tambahkan CSS di ujung paling bawah.
  4. Selanjutnya, Anda sudah bisa menambahkan CSS Anda. Untuk melihat hasilnya, Anda bisa menggunakan live preview, apakah CSS yang Anda tambahkan sudah benar atau belum.
  5. Bila semuanya sudah benar, Anda tinggal menyimpannya dengan cara menekan tombol Terapkan ke blog.
  6. Menggunakan Editor Blogger untuk menambahkan CSS

Cara kedua untuk menambahkan CSS pada blogger adalah melalui editor bloger. Tahapan-tahapan yang harus dilakukan adalah sebagai berikut:

  1. Anda harus log in terlebih dahulu lalu masuk ke dashboard.
  2. Pilih menu template
  3. Pilih edit HTML.

Bila Anda ingin menambahkan CSS, Anda harus menaruh kode CSS di antara kode <b:skin> dan <b:/skin>. Ini adalah tempat yang secara umum Anda bisa menambahkan kode CSS. Namun demikian, ada juga beberapa developer yang mengerjakan template-nya dengan cara lain yang berbeda. Biasanya, kode tersebut berada pada baris-baris awal, tetapi bila Anda mengalami kesulitan mencari kode tersebut kamu bisa menggunakan fasilitas tekan tombol Ctrl+F.

Dengan CSS, pengaturan halaman web menjadi lebih mudah. Pada perkembangannya, CSS juga memudahkan Anda yang masih awam dalam dunia programming untuk bisa mengubah tampilan halaman depan web Anda dengan mudah. CSS merupakan bahasa pemrograman yang membantu programmer untuk mengatur tampilan dari halaman depan website yang diciptakanya.

REVIEW OVERVIEW
5.00
OVERALL SCORE
Coding dari CSS ini bermanfaat membuat website lebih indah dan menarik
Manfaat dari CSS ini sangat bagus membuat website makin indah

Leave a Reply

Your email address will not be published. Required fields are marked *