Pengertian CSS adalah? Mengenal Apa Itu CSS dan Belajar CSS Dasar

Dalam pengertian baku Cascading Style Sheet atau CSS adalah kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup. Dimana bahasa markup pada bahasan ini salah satunya adalah HTML atau Hyper Text Markup Language. Untuk pengertian umum dari CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan pada sebuah halaman HTML. Ada beberapa kegunaan dari CSS adalah dapat mengubah desain dari text, merubah warna, menampilkan gambar, latar belakang dan lain sebagainya dari semua kode tag pada HTML. CSS biasanya selalu dikaitkan dengan HTML, karena keduanya itu memang saling melengkapi.

Pengertian CSS adalah? Mengenal Apa Itu CSS dan Belajar CSS Dasar

Konsep Dasar Penggunaan CSS Adalah

HTML ditujukan untuk membuat struktur atau konten dari halaman website. Sedangkan CSS digunakan untuk tampilan dari halaman website tersebut. HTML dan CSS adalah bagian yang tak terpisahkan dari website modern saat ini. Awal mula CSS adalah sering diperlukan karena banyaknya kebutuhan dari halaman website yang semakin kompleks. Pada awal kemunculan HTML, kita dapat membuat suatu setiap baris kode itu memiliki ciri khas tersendiri.

Belajar CSS Dasar

Pada contoh diatas terdapat struktur dari CSS adalah yang diapit pada tag <style>. Terdapat  tag <p> didalam tag <body> yang dimana nantinya tag <p> akan dijadikan sebagai penentu atau selector dari apa yang anda jadikan untuk memvariasi atau memperindah dari hasil apa yang ditentukan. Jika kita ingin merubah seluruh warna menjadi hijau , maka pada pendeklarasian CSS adalah hanya menambahkan apa saja Property dan Value yang kita inginkan dalam perubahan warna kita menggunakan Property Color dengan Value Green. Contoh tersebut adalah aturan dasar CSS sederhana yaitu terdiri dari dua bagian utama : pemilih p dan deklarasi {font-size: 50px;}. Sudah dibahas sebelumnya pada pemilih p itu disebut dengan Selector juga menggunakan Property font-size dan Value diisi dengan 50px. Sementara pada kasus diatas hanya mempengaruhi satu dari Property yang diperlukan untuk merender dokumen HTML, setelah memenuhi syarat sebagai style sheet lalu dikombinasikan dengan style sheet lainnya. Pemilih atau penentu atau Selector adalah tautan antara dokumen HTML dari semua jenis elemen pada HTML.

Metode Input Kode CSS ke dalam Halaman HTML

Dari pembahasan artikel sebelumnya ada bahasan tentang HTML (pada artikel dasar HTML). HTML pada dasarnya adalah kumpulan tag-tag yang disusun sehingga dapat memiliki bagian-bagian tertentu, Seperti contoh pengaturan penulisan, tabel dan lain sebagainya. Dan disinilah peran CSS adalah untuk mendesain tag-tag pada HTML.

Secara garis besar sudah ada beberapa aturan penggunaan yang dibagi menjadi 3 metode dalam menginputkan kode CSS adalah Inline Style, Internal Style Sheets dan External Style Sheets.

1. Inline Style

Metode Inline Style CSS adalah salah satu cara dari teknik penulisan CSS yang langsung ditulis ke dalam tag HTML dengan menggunakan atribut style, untuk lebih jelas melihat penggunaan metode Inline Style pada CSS penulis akan memberikan sedikit gambaran bagaimana cara menggunakannya. Berikut salah satu cara penggunaan Inline Style CSS adalah sebagai salah satu cara dari beberapa metode penulisan CSS.

Belajar CSS

Dan hasil dari contoh penulisan Inline Style CSS adalah:

Dalam penulisan kode diatas, disini menyisipkan atribut style pada tag <p> dan nilai dari atribut style adalah perintah CSS yang ingin diterapkan. Terlihat ada beberapa Property dan Value yang digunakan. Pada pengunaan diatas ada 2 Property dan Value, bagaimana cara menggunakan 2 Property dan Value di dalam atribut style? Untuk mencegah terjadinya error atau kode tidak terender maka ditambahkan (spasi) untuk memberikan batas antara 1 Property dan Value dengan Property dan Value lainnya, kode akan tetap jalan meskipun kita memberikan Property dan Value secara menerus dan cara ini terhindar dari terjadi error.

Penggunaan kode pada tag CSS adalah suatu hal yang tidak disarankan walaupun terlihat praktis, dikarenakan kode CSS adalah langsung tergabung dengan HTML yang membuat terlihat tidak cocok dalam penempatan dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten yang ada pada HTML.

2. Internal Style Sheets

Metode Internal Style Sheets atau disebut dengan Embedded Style Sheets yang digunakan untuk memisahkan kode CSS dari tag HTML namun masih tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada pada tag HTML, pada metode ini berbeda teknik penggunaan yaitu dengan cara dikumpulkan pada sebuah tag <style>. Tag style ini harus berada pada bagian atau di dalam tag <head> dari halaman HTML. Cara penggunaan dari Internal Style Sheets sebagai berikut:

Dapat dilihat pada contoh diatas pada tag <style> terdapat atribut yaitu type yang menandakan bahwa kita akan menggunakan CSS pada tag tersebut. Dan penggunaan metode CSS diatas sudah cukup lebih baik daripada penggunaan Inline Style, dikarenakan kita sudah memisahkan antara CSS dari HTML dan seluruh kode CSS akan ditaruh di dalam tag <style> yang berada di dalam tag <head>.

Ada pula kekurangan dalam menggunakan Internal Style Sheets CSS adalah jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat di atasi dengan menggunakan metode External Style Sheets.

3. External Style Sheets

Metode External Style Sheets CSS adalah salah satu penggunaan penulisan kode CSS yang sangat disarankan karena metode ini mengangkat kode CSS kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman HTML yang membutuhkan kode CSS, dengan metode ini kita hanya melakukan pemanggilan file CSS. Masih menggunakan contoh yang sama pada metode Internal Style Sheets, tahap pertama kita akan melakukan pemindahan isi dari tag <style> ke dalam halaman baru CSS yang telah dibuat dan pada contoh kali ini file CSS adalah style.css:

Pada file CSS perhatikan pada ekstensinya dan pastikan penggunaannya diakhiri dengan .css, untuk keperluan memudahkan file CSS disave pada folder yang sama dengan file HTML. Kembali pada halaman HTML, CSS telah menyediakan 2 cara untuk menginput kode CSS tersebut ke halaman HTML.

a. @import

Pada metode @import external style sheets CSS adalah metode yang dapat menyisipkan @import url(‘style.css’); pada tag <style>. url() atau alamat bisa berupa halaman yang relatif yaitu bisa seperti : (folder/file.css) atau bisa dapat menggunakan absolut seperti : (www.webhostingterbaik.com/belajar.css).

b. External Style Sheets

Cara input yang kedua CSS adalah External Style Sheets dengan menggunakan tag <link> dan berikut ini contoh dari penggunaannya:

Pada metode link External Style Sheets dapat menggunakan atribut tambahan yaitu href pada tag <link> untuk memanggil file CSS agar dapat digunakan dalam halaman HTML pada pembahasan ini menggunakan file style.css.

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah Metode External Style Sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.

Aturan dan Cara Penulisan CSS

Agar lebih mudah untuk dipahami CSS memiliki aturan dan cara penulisan kode CSS. Dibawah ini adalah contoh kode HTML beserta CSS yang akan dibahas secara terstruktur.

Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai berikut:

  • Selector di tempatkan pada awal pada penulisan CSS. Dalam contoh diatas kita menggunakan Selector (body, h1, h2, #content, .paragraf). Di dalam penulisan CSS adalah terdapat aturan main dalam penulisan Selector. Terdapat perbedaan pada contoh diatas yaitu Selector yang berwarna merah  adalah penggunaan pada tag HTML, Selector yang berwarna hijau memiliki 2 teknik penulisan ada yang menggunakan titik (.) dan tanda pagar (#), pada penggunaan titik (.) lalu diikuti dengan Selector yang dibuat ini digunakan pada atribut class, pada penggunaan tanda pagar (#) lalu diikuti dengan Selector yang dibuat ini digunakan pada atribut id.
  • Setelah penulisan Selector, penulisan isi Property dan Value harus di dalam kurung kurawal ‘{’ dan ‘}’Setelah penulisan Selector, penulisan isi Property dan Value harus di dalam kurung kurawal ‘{’ dan ‘}’.
  • Pada penulisan Property antara Property  satu dengan yang lainnya dapat dipisahkan dengan menggunakan tanda titik koma (;), kenapa harus menggunakan titik koma (;)? Karena didalam penulisan baris kode harus melakukan penghentian proses eksekusi kode tersebut maka digunakannya tanda titik koma tersebut untuk menghentikan proses pada kasus CSS adalah penggunaan CSS.
  • Diantara Property dengan Value (nilai). Dipisahkan dengan tanda titik dua (:). Dengan menggunakan tanda titik dua (:) kita mengetahui dimana Property yang kita gunakan dan Value yang kita gunakan.
  • Property terdiri dari 1 kata atau 2 kata. Pada contoh diatas Property yang menggunakan 2 kata disambung dengan menggunakan tanda hubung (-) bukan menggunakan spasi. Seperti contoh diatas penggunaan Property CSS adalah: text-decoration, text-align, background-color, font-size dan lain sebagainya yang cara penulisan sama dengan contoh Property CSS pada contoh diatas.

Mengenal Satuan Nilai

Dalam merancang halaman web menggunakan CSS adalah sebagai suatu kebutuhan yang fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu Property, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, pointin, pc, dan pt.

Sebuah nilai dalam CSS dapat bernilai positif maupun negatif, bisa berupa angka bulat, maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna yang hanya bisa bernilai 0-255 atau 0 sampai dengan Hexadesimal FF.

1. Nilai Absolut

Nilai absolut adalah sebuah nilai yang ada pada CSS, dimana nilai tersebut tidak dipengaruhi dengan kondisi tag induknya (parent). Di dalam nilai absolut CSS adalah milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm.

Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}

2. Nilai Relatif

Dalam ukuran pixel (px) adalah ukuran yang sering digunakan dalam CSS. Pixel dalam CSS termasuk nilai relative karena tidak terikat dengan perbandingan media manapun. Pada spesifikasi CSS2 ada pengaturan pada pixel. 1,1 pixel dapat disamai dengan 0.26mm atau 1/96 inci, banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya.

Dalam 1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Maka sebuat tag <em> yang berada di dalam paragraph tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag <p>.

3. Nilai Persentasi

Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Dapat diberi contoh dengan membuat sebuat definisi CSS sebagai p{font-size: 10px;}, dan em{font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt atau sekitar 12pt.

Bergabung dengan tim webhostingterbaik semenjak website ini mulai dirilis. Selalu antusias mencari berbagai informasi dan membagikan informasi yang diketahuinya kepada semua orang melalui tulisannya secara lengkap.

Dapatkan posting terbaru :