Pengertian CSS dan Penggunaannya untuk Pemula
 |
| sumber : Sabe.io |
CSS (Cascading Style Sheet) adalah salah satu bahasa yang digunakan dalam pemograman web yang befungsi mengontrol format tampilan pada sebuah halaman website, dimana CSS ini digunakan sebagai penunjang HTML agar tampilan yang dihasilkan HTML menjadi lebih baik dari segi visual ataupun dari segi penggunaan(User Interface).
Seperti biasa saya akan menganalogikan CSS ini ke hal umum agar lebih mudah dipahami, seperti pengertian umum terkait HTML dan CSS yang telah kita ulas pada artikel sebelumnya, saya menganalogikan HTML sebagai rangka utama sebuah rumah.
Mulai dari pondasi, tembok , dan atap sehinga rumah itu dapat berdiri, akan tetapi rumah yang dibangun tersebut belum memiliki daya tarik sepeti belum di Cat, Pintu , dan jendela dengan design unik sehingga menarik minat seseorang yang melihat nya.
Atau kita dapat menganalogikan CSS sebagai Make Up untuk mempercantik hamalam website yang telah dibangun oleh HTML.
Mulai dari pondasi, tembok , dan atap sehinga rumah itu dapat berdiri, akan tetapi rumah yang dibangun tersebut belum memiliki daya tarik sepeti belum di Cat, Pintu , dan jendela dengan design unik sehingga menarik minat seseorang yang melihat nya.
Atau kita dapat menganalogikan CSS sebagai Make Up untuk mempercantik hamalam website yang telah dibangun oleh HTML.
Untuk tata cara penggunaan nya sendiri HTML dibagi menjadi 3 Cara, antara lain:
- Inline Style , cara ini adalah menyematkan atribut CSS kedalam tag HTML secara langsung.
- Internal Style Sheet, cara ini adalah meletakan script CSS pada tag <Head> HTML
- External Style Sheet, cara ini adalah membuat script CSS pada file terpisah dengan extension file .css yang nantinya akan diimport langsung kedalam HTML
Berikut Contoh penggunaan CSS pada HTML:
Pengertian CSS dan Penggunaannya - Menambahkan Background Warna
Kita akan menggunakan Source yang sama dengan artikel yang telah kita pelajari sebelumnya tentang HTML, dapat dilihat artikel ini Pengertian Tag HTML.
Copy Source HTML yang telah dibuat pada artikel sebelumnya, kurang lebih seperti Code dibawah ini
<html>
<head>
<title>Ini adalah halaman website saya pertama kali</title>
</head>
<body>Ini adalah isi postingan saya pertama kali <br/>Berikut postinngan halaman website saya pada halaman kedua <br/>Ini post baris ke tiga
</body>
</html>
<head>
<title>Ini adalah halaman website saya pertama kali</title>
</head>
<body>Ini adalah isi postingan saya pertama kali <br/>Berikut postinngan halaman website saya pada halaman kedua <br/>Ini post baris ke tiga
</body>
</html>
Kita akan mempraktekan bagaimana kita menyematkan CSS pada Script HTML diatas, tambahkan attribute style pada Tag yang akan kita sisipkan CSS. Contoh:
saya akan menyematkan CSS untuk mengganti warna background halaman web oleh karena itu saya akan menyisipkan CSS pada tag <Body>
<body style="background-color : red">
Setelah itu mari kita coba save file HTML tersebut kembali, tata cara save file HTML pun telah saya jelaskan pada artikel sebelumnya , Pengertian Tag HTML.
Setelah kita save otomatis backgroud dari halaman website yang kita buat akan berubah menjadi warna merah
Berikut Source Code HTML dan CSS yang menghasilkan halaman website diatas :
<html>
<head>
<title>Ini adalah halaman website saya pertama kali</title>
</head>
<body style="background-color : red">
Ini adalah isi postingan saya pertama kali <br/>
Berikut postinngan halaman website saya pada halaman kedua <br/>
Ini post baris ke tiga
</body>
</html>
Pengertian CSS dan Penggunaannya - Menambahkan CSS pada masing masing Tag HTML
Pada point pertama diatas kita telah mencoba menambahkan CSS pada Tag <Body> sehingga efek dari CSS tersebut akan diimplementasikan keseluruh halaman website.
Selanjutnya kita akan menambahkan CSS hanya pada Tag tertentu saja.
kita akan ambil Source HTML yang sama dengan Source sebelum nya , dan disini saya akan menambahkan tag <p> </p> pada beberapa baris source.
<p> adalah Tag HTML yang berfungsi mendeklarasikan bahwa setiap text yang berada diantara Tag <p> dan </p> merupakan 1 kesatuan paragraf.
<p> adalah Tag HTML yang berfungsi mendeklarasikan bahwa setiap text yang berada diantara Tag <p> dan </p> merupakan 1 kesatuan paragraf.
Contoh Source Code
Berikut Source Code nya:
<html>
<head>
<title>Ini adalah halaman website saya pertama kali</title>
</head>
<body style="background-color : red">
<p>Ini adalah isi postingan saya pertama kali</p>
<p>Berikut postinngan halaman website saya pada halaman kedua</p>
<p>Ini post baris ke tiga</p>
</body>
</html>
Lalu mari kita tambahkan beberapa script HTML di tiap Tag <p> yang ada, kurang lebih seperti ini:
<html>
<head>
<title>Ini adalah halaman website saya pertama kali</title>
</head>
<body style="background-color : red">
<p style="background-color:blue">Ini adalah isi postingan saya pertama kali</p>
<p style="background-color:green">Berikut postinngan halaman website saya pada halaman kedua</p>
<p style="background-color:yellow">Ini post baris ke tiga</p>
</body>
</html>
Note: Warna pada script background-color dapat anda ganti sesuai dengan keinginan contoh menjadi background-color:red , background-color:black.
Setelah anda selesai maka save script diatas, lalu coba anda buka halaman website tersebut, kurang lebih tampilannya akan seperti ini:
Tiap paragraf akan menghasilkan warna yang berbedia.
Hal ini karena kita menyematkan script HTML pada tiap paragraf, sedangkan warna background berwarna merah didapatkan dari script CSS yang disematkan pada tag <body> sehingga keseluruhan tampilan website backgroundnya akan berubah mengikuti tag <body>
Hal ini karena kita menyematkan script HTML pada tiap paragraf, sedangkan warna background berwarna merah didapatkan dari script CSS yang disematkan pada tag <body> sehingga keseluruhan tampilan website backgroundnya akan berubah mengikuti tag <body>
Pada artikel ini kita telah belajar cara dasar penulisan script CSS pada HTML, nantikan artikel selanjutnya yang akan memberikan tips dan trik mengoptimalkan CSS pada HTML.
Bila ada pertanyaan kritik ataupun saran, dapat ditulis di kolom komentar ya.
Terima kasih
Semua gambar yang anda temukan di sini diyakini ada di dalam "domain publik".
Beberapa gambar yang ditampilkan tidak diketahui secara pasti sumber asalnya. Kami
tidak berniat untuk melanggar hak intelektual yang sah, hak artistik atau hak cipta. Jika
Anda adalah pemilik sah dari salah satu gambar yang diposting di situs ini, dan tidak
ingin ditampilkan atau jika Anda memerlukan kredit yang sesuai, maka silakan hubungi
kami dan kami akan segera melakukan apa saja yang diperlukan dengan menghapus
atau memberikan kredit pada konten yang ditampilkan.
Beberapa gambar yang ditampilkan tidak diketahui secara pasti sumber asalnya. Kami
tidak berniat untuk melanggar hak intelektual yang sah, hak artistik atau hak cipta. Jika
Anda adalah pemilik sah dari salah satu gambar yang diposting di situs ini, dan tidak
ingin ditampilkan atau jika Anda memerlukan kredit yang sesuai, maka silakan hubungi
kami dan kami akan segera melakukan apa saja yang diperlukan dengan menghapus
atau memberikan kredit pada konten yang ditampilkan.
Post a Comment for "Pengertian CSS dan Penggunaannya untuk Pemula"