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:
- 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 :
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
- <!DOCTYPE html>
- <html>
- <head>
- <title>Ilmu CSS</title>
- <style>
- body { background-color: black }
- </style>
- </head>
- <body>
- <p>Paragraph</p>
- </body>
- </html>
External CSS
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="mencoba.css" />
- </head>
- <body>
- <p>Paragraph</p>
- </body>
- </html>
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 :)
nice gan,ni tutor yang ane cari2 nih hehe... Blogger Modis
BalasHapusahaha yaya
Hapusthanks gan langsung ane coba seperti artikel di atas
BalasHapussip
Hapus