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:
- Inline CSS
- Internal CSS
- External CSS
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 :
<!DOCTYPE html> <html> <head> <title>Ilmu CSS</title> </head> <body> <p style="background: black">Ini adalah contoh paragraph</p> </body> </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:- <!DOCTYPE html>
- <html>
- <head>
- <title>Ilmu CSS</title>
- <style>
- body { background-color: black }
- </style>
- </head>
- <body>
- <p>Paragraph</p>
- </body>
- </html>
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: ilmu-css.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:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Ilmu CSS</title>
- <link rel="stylesheet" href="ilmu-css.css" />
- </head>
- <body>
- <p>Paragraph</p>
- </body>
- </html>
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 ilmu-css.css itu kita dapat leluasa memasukkan file CSS.Mungkin hanya itu saja yang bisa saya jelaskan . Terimakasih
Salam Ilmu CSS !
Halo mau nanya mas ? :D
ReplyDeleteNanya apa ? :-)
DeleteSunggu bermanfaat tutorial css nya..
ReplyDeleteSaya juga punya tutorial css di blog kang, monggo di baca sekalian di koreksi sama akang, takutnya ada yg salah :)
Cara memilih element atau selector tertentu
http://www.wappersunda.com/cara-memilih-element-atau-selector-terte.xhtml
bukanya internal dan external itu letak suatu location css ?
ReplyDeleteNice bro, izin share.
ReplyDeletemakasih informasinya gan kunjungi juga komputerpartner
ReplyDelete