--> Belajar CSS Mudah Di Pahami
Home Belajar CSS

www.sutekom.blogspot.com

Senikoding.com - CSS kepanjangan dari Cascading Style Sheet. Yang berfungsi untuk mengatur format atau tampilan dalam halaman Website. Sebuah Website bisa terdiri dari berpuluh puluh bahkan beratus ratus halaman. Jika setiap kita mengubah halaman website tersebut kita harus mengubah formatnya satu per satu maka akan sangat merepotkan. Namun jika kita menggunakan CSS maka hal tersebut bukan lagi sebuah masalah, karena dengan CSS kita bisa menyimpan format dan mengguankannya kapan pun dan dimana pun kita inginkan.

Seperti terbantunya kita dengan Formatting dan Style dalam membuat Document Office, maka Style Sheet juga sangat penting dalam membuat halaman HTML yang dinamis. Memang dalam menggunakan Style Sheet bkan suatu keharusan dalam membuat Web, namun jika memiliki Website dengan halaman yang sangat banyak, kita akan kesulitan dalam debugging, perbaikan, dan perawatan. Sehingga Belajar CSS sangat penting.

Dengan Style Sheet, kita bisa membuat Efek efek tertentu untuk konten Website. Misalnya saja kita ingin supaya bagian header dari Tabel di Web selalu ber Size/Ukuran 20px, dan color/warna Merah, maka definisikan untuk Style tersebut pada tag <TH>. Dengan demikian seluruh tabel yang didefinisikan akan mempunyai Format yang sama.

Belajar CSS Dasar


Cascading Style Sheet (CSS) sudah didukung oleh hampir semua Browser, karena CSS telah distandarkan oleh World Wide Web Consortium (W3C).

Ada 4 cara memasang kode CSS ke dalam kode HTML / Halaman Web, caranya:

1. Inline Style Sheet (Memasukkan kode CSS langsung di Tag HTML).
2. Internal Style Sheet (Embed atau memasang kode CSS ke dalam bagian <head>).
3. External Style Sheet (Include file CSS).
4. Import CSS file.

Ayo kita bahas Belajar CSS dari poin pertama, yaitu:

1. Inline Style Sheet


Cara ini merupakan penulisan langsung Script CSS ke dalam Tag HTML yang diinginkan. Cara ini sebaiknya HANYA digunakan jika kita mau memformat suatu Elemen satu kali saja. Kenapa kata "Hanya" saya tekankan, karena penulisan yang baik menurut Google yang mempunyai platfom Browser seperti Chrome, untuk Satu Format lebih baik menggunakan teknik Inline Style Sheet ini.
Contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>Latihan CSS</title> 
  </head>
  <body>
    <p style="color:red;">Contoh Paragraf berwarna Merah</p>
  </body>
</html>

Kode diatas akan memformat paragraf Tag <p> berwarna Merah.
Penulisan cara ini dimulai dengan kata style, lalu diikuti dengan Syntax Property dan Value.
<p style="property:value;">.

belajar css dasar untuk pemula


2. Internal Style Sheet


Selain dengan cara pertama, kita bisa juga dengan menaruh kode CSS diantara Tag <head> dan </head>. Artinya Style Sheet nya berada pada file yang bersangkutan namun diletakkan khusus pada suatu tempat Header / Kepala yaitu antara Tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan Tag <style> dan diakhiri dengan Tag </style> dibagian Head nya.
Bagaimana pengelompokan penulisan CSS yang baik dengan cara ini menurut Google, yaitu bilamana kode CSS tersebut panjang dan atau memformat lebih dari satu Elemen.
Contoh:

<!DOCTYPE html>
<html>
  <head>
  <title>Latihan CSS</title>
  <style>
    body {font-family:arial;} 
    h1 {font-size:20px; color:black; background-color:gray;} 
    p {color:red; font-size:14px;}
  </style>
  </head>
  <body>
     <h1>Latihan CSS</h1>
     <p>Contoh Paragraf berwarna Merah</p>
  </body>
</html>

Didalam Tag <head> ada Tag <style>, Tag itu merupakan implementasi atau uraian dari code code CSS yang diletakkan di dalam Header suatu Website. Code CSS tersebut akan meLoad terlebih dahulu karena letaknya di bagian atas dari halaman dan akan mempercepat proses halaman itu sendiri.
Tulisan dengan cara seperti ini telah disukai Google, dan kita juga lebih mudah dalam pengembangan dan merubahnya jika diperlukan. Misalkan  saja code CSS yang begitu kompleks dan banyak di Implentasikannya seperti cara Pertama diatas, maka akan membuat pusing bagi Editor codenya dan sama sekali tidak disukai pihak Google selaku salah satu pengembang platfom Browser Chrome.

belajar css dasar untuk pemula

Baca juga: Belajar CSS Dasar Lanjutan Mudah Dipahami

3. External Style Sheet


Code CSS External ditulis dalam suatu file terpisah yang disimpan dengan ekstensi ".css" tanpa tanda petik dua. Kemudai file CSS yang terpisah nantinya akan di panggil atau di Load pada halaman yang memerlukannya atau menggunakannya. Dengan cara ini kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman Website kita.
Contoh:

<!DOCTYPE html>
<html>
  <head>
  <title>Latihan CSS</title>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
  </head>
  <body>
     <h1>Latihan CSS</h1>
     <p>Contoh Paragraf berwarna Merah</p>
  </body>
</html>

Perhatikan kode ini <link rel='stylesheet' type='text/css' href='css/style.css'>. Kode tersebut adalah contoh pemanggilan file External CSS yang berada pada Folder CSS dan filenya bernama style.css.
Dengan cara tersebut pemanggilan file CSS didalam website. Maka halaman terkait akan terload Code CSS yang berada pada file style.css.
Isi dari file style.css bisa seperti contoh poin dua atau yang lain sesuai kebutuhan.
Contoh isi file style.css:

body {font-family:arial;}
h1 {font-size:20px; color:black; background-color:gray;}
p {color:red; font-size:14px;}

Penulisan atau cara seperti ini yaitu External Style Sheet akan mempermudah dalam pengembangan web,  koreksi bug dan baik di implementasikan untuk kode kode yang panjang.

4. Import CSS


Kita bisa juga dengan cara meng-Import CSS ke dalam suatu file CSS yang lain menggunakan Tag Import.
Contohnya:

<!DOCTYPE html>
<html>
  <head>
  <title>Latihan CSS</title>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
  </head>
  <body>
     <h1>Latihan CSS</h1>
     <p>Contoh Paragraf berwarna Merah</p>
  </body>
</html>

Didalam file style.css nantinya Import file CSS yang lain akan diload.
Berikut contoh Import file CSS didalam file style.css:

@import url("style2.css");
body {font-family:arial;}
h1 {font-size:20px; color:black; background-color:gray;}
p {color:red; font-size:14px;}

Didalam file style2.css terdapat Code code CSS yang di load dalam file style.css.

Namun perlu diperhatikan bahwa penggunaan "link" atau cara External Style Sheet memiliki Performa atau kecepatan lebih cepat dibandingkan dengan Import, karena pada link load kode CSS dilakukan secara Pararel, sedangkan pada Import Load kode CSS dilakukan secara Serial atau berurutan.
Ilustrasi gambarnya seperti ini:

Gbr1. Ilustrasi Load External CSS


Gambar1. adalah Ilustrasi Load dengan External Style Sheet (Pararel).

Gbr2. Ilustrasi Import CSS

Gambar2. adalah Ilustrasi Load dengan Import File (Serial).

Sampai disini dulu kita Belajar CSS. Semoga Artikel ini yang membahas tentang Belajar CSS, Belajar CSS Dasar, Belajar CSS Fundamental, Belajar CSS Mudah Di Pahami bermanfaat.

Nantikan Tips dan Informasi lainnya :).

- Salam -

Baca juga :


4 komentar

  1. Anonim13 Januari, 2017 10:24

    masih banyak belajar lgi ini, aduh untung baca ini. makasih tutorialnya

    BalasHapus
  2. penulis cupu13 Januari, 2017 13:59

    suwer ane masih bingung sama css. bedanya sama html itu apa ya gan?

    BalasHapus
    Balasan
    1. Celoteh Mas Edi13 Januari, 2017 17:13

      css untuk desain / mempercantik web, html untuk pondasi dasar web gan.. lengkapnya http://sutekom.blogspot.co.id/search/label/HTML

      Hapus

Dilarang SPAM Komentar!

to Top