Belajar CSS 1

 BELAJAR LENGKAP CSS


Pengertian CSS 

      CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.
CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.
CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. 

Jenis CSS

Setelah memahami fungsi CSS, kamu juga perlu tahu bahwa dalam proses implementasinya, ada 3 jenis CSS yang bisa kamu praktekkan. Setiap jenisnya memiliki fungsi, kelebihan, dan kekurangan masing-masing. 

Berikut penjelasan dari ketiga jenis CSS tersebut:

1. Internal CSS

Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan website dengan tampilan berbeda-beda. 

Kelebihan internal  CSS adalah :

  • Editing yang mudah di tiap halaman website
  • Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
  • Internal stylesheet bisa memakai ID dan Class
  • Error mudah diperbaiki

Kekurangan internal  CSS adalah :

  • Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
  • Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya
  • Ukuran file menjadi lebih besar 

2. External CSS

External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis sendiri pada file ekstensi .css. Penulisan file eksternalnya bisa diletakkan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css. Penggunaannya cukup sederhana karena tidak perlu menuliskan CSS pada setiap file HTML.

Kelebihan external CSS adalah :

  • Ukuran file lebih kecil
  • Code rapi
  • Respon website lebih cepat
  • Bisa digunakan untuk beberapa halaman website berbeda

Kekurangan external CSS adalah :

  • Kurang cocok untuk halaman custom
  • Halaman website rawan berantakan saat file CSS gagal load sempurna

3. Inline CSS

Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut HTML. Jadi, di setiap atribut memiliki style CSS yang berbeda sesuai kebutuhan dan ini tergolong kurang efisien jika dibanding jenis CSS lainnya

Cara Kerja CSS

Cara kerja CSS sebenarnya cukup simpel. Mengingat default CSS memakai Bahasa Inggris berbasis syntax dengan struktur yang terbilang sederhana, yakni selector dan declaration block.

Meskipun begitu, cara kerja CSS rupanya juga didukung oleh berbagai rule. Namun tenang saja, sebab rule-nya tidak kompleks. Tentukan saja elemen yang diinginkan. Setelah itu, declare elemen tersebut. Selesai!

Agar lebih jelas, ambil saja contoh:

<p>This is a paragraph.</p>.

Lalu, kamu ingin setiap elemen <p> hurufnya ditebalkan atau bold dan berwarna hijau.

Maka, yang perlu kamu lakukan adalah:

<style>

p {

color: green;

text-weight: bold;

}

<style>

Contoh CSS

Contoh CSS code sederhana lainnya adalah sebagai berikut:

Untuk warna background website merah muda

body 

{

  background-color: pink;

} 

Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 20px

h1 

{

  font-family: verdana;

  font-size: 20px;

Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya