-->

Selasa, 13 Oktober 2015

Apa itu CSS?

Ilmu CSS




Hi guys, udah lama ga share, kali ini saya akan share mengenai CSS.
Langsung aja disimak :)

 Definisi CSS


Mungkin anda ada yang bertanya-tanya, apa itu CSS? Dan apa fungsinya?

Menurut defini saya sendiri CSS (Cascading Style Sheet) adalah sekumpulan kode yang berfungsi menata tata letak halaman dan bertanggung jawab atas penampilan pada suatu website. Di dalam dunia web design, CSS adalah suatu kode yang dianggap wajib oleh para web designer , karena selain untuk menata tampilan pada halaman website, CSS ini juga berfungsi sebagai SEO (Search Engine Optimization). Bayangkan jika suatu website tanpa mempunyai kode CSS didalamnya, sungguh membuat pengunjung merasa tidak nyaman bukan? Maka oleh sebab itu kode yang diatur oleh W3C ini sangatlah berperan penting. Oh iya sebelum anda mempelajari apa itu CSS, alangkah baiknya anda mempelajari apa itu HTML. Karena percuma apabila kode CSS kita bagus tapi tidak bernampak di browser ya? :D . Dari tadi ngomongin definisi CSS melulu ya, mending langsung saja ke inti.

Penulisan CSS

 Hmm, penulisan CSS. Mengenai hal itu saya akan berkomentar bahwa penulisan CSS itu ada 3 macam. Apa aja sih?

Jenis-jenis penulisan CSS:
  1. Inline CSS
  2. Internal CSS
  3. External CSS
Wah ada 3 ya? Lalu gimana?

Inline CSS

Inline CSS adalah suatu jenis penulisan CSS yang berada di dalam tag HTML atau lebih tepatnya di dalam atribut style.

Saya akan memberi contoh penulisan CSS jenis ini di dalam suatu HTML, berikut kodenya :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Informasi dan Teknologi</title>
5. </head>
6. <body>
7. <p style="background: black">Ini adalah contoh paragraph</p>
8. </body>
9. </html>



Yang diberi warna putih itu merupakan contoh dari kode CSS inline yang disisipkan di dalam sebuah tag HTML dan pada atribut style yang kebetulan pada tag p (paragraph). Dan yang diberi warna hijau itu adalah kode CSSnya.

  • Internal CSS

Mengenal kata internal, anda pasti dapat mentimpulkan bahwa itu adalah CSS yang berada didalam. Ya, memang benar CSS itu berada di dalam, tepatnya didalam suatu HTML. Penulisan Internal CSS ini adalah didalam tag <style> dan tag <style> itu berada di tag <head>. Daripada bingung langsung saja kita lihat kodenya:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ilmu CSS</title>
  5. <style>
  6. body {  background-color: black }
  7. </style>
  8. </head>
  9. <body>
  10. <p>Paragraph</p>
  11. </body>
  12. </html>
 Yang diberi warna merah adalah tipe penulisan CSS internal dan yang berwarna biru itu adalah kode CSSnya.

  • External CSS

Kalo ada internal, pasti juga ada lawannya yaitu external (diluar) . Penulisan CSS jenis ini memungkinkan anda menulis kode CSS diluar HTML lebih tepatnya membuat file baru yang berformat .css (misal: mencoba.css) dan didalam tag link dan didalam tag href. Jenis penulisan CSS ini adalah penulisan yang sangat digemari oleh para web designer karena dianggap menyederhanakan script CSS bahkan dianggap efisien. Saya tidak akan membahasnya. Jadi, langsung saja ke contoh kodenya saja.
Misalkan, kita mempunyai kode HTML begini dan kita ambil contoh nama file CSSnya ilmu-css.css:
File HTML:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ilmu CSS</title>
  5. <link rel="stylesheet" href="mencoba.css" />
  6. </head>
  7. <body>
  8. <p>Paragraph</p>
  9. </body>
  10. </html>
File CSS (mencoba.css): 
1  
2
body { background-color: black}
p { color: white }

Dari kedua file diatas, bisa saya simpulkan bahwa pemanggilan CSS dengan tipe penulisan ini kita harus membuat tag link didalam tag head dan isi dari atribut href itu adalah url file CSS kita berada. Dan di file mencoba.css itu kita dapat leluasa memasukkan file CSS.

Semoga bermanfaat :)
Diposting oleh di

4 komentar :

Langganan: Posting Komentar ( Atom )