Lompat ke konten Lompat ke sidebar Lompat ke footer
HTML Dengan CSS

HTML Dengan CSS

Sebelum kita membahas serta memberikan contoh-contohnya tentang HTML Dengan CSS, sebaiknya sobat harus ketahui dulu apa itu CSS serta apa gunanya dalam kode html. Mungkin sebagian dari sobat sudah mengetahuinya, tetapi tidak ada salahnya juga mengingatkan kembali atau bisa juga dipakai sebagai materi pembelajaran bagi sobat pemula.

CSS adalah singkatan dari Cascading Style Sheets. Dalam bahasa yang dapat di mengerti sobat pengunjung, CSS adalah gaya dan warna dalam memanipulasi teks, background, dan kotak. Sobat bisa lihat pada artikel sebelumnya saya sudah menggunakannya bahkan sempat memberikan kode html dengan ccs. Sobat yang pemula pasti bingung ya? Supaya lebih jelasnya lagi, nanti saya bahas beserta contohnya. Yang perlu di ketahui sobat pengunjung, CSS dapat di tambahkan ke elemen HTML dengan 3 cara :

1. Inline CSS

Penggunaannya untuk menerapkan gaya unik atau penggunaan warna dalam teks yang sobat inginkan dan hanya bersifat tunggal. Bisanya di pakai pada bagian judul halaman <h1>

Contoh teks warna biru :  Topik Inline CSS

Kode html dan ccs :
 <h1><b><span style="color: blue;">Topik Inline CSS</span></b></h1>

2. Internal

Fungsi ini lebih ke satu halaman blog atau website sobat. Dapat menampilkan gaya halaman yang berwarna serta teks atau tulisan yang berwarna-warni sesuai keinginan sobat. CSS internal di gunakan pada <head> bagian halaman HTML, dalam sebuah <style> elemen.

Contoh :
Background warna pink, Judul warna biru dan Paragraf warna hitam
Topik CSS Internal

Saya mencoba membuat halaman blog keren dengan postingan menggunakan HTML dengan CSS
Kode html dan css :
<div class="tr_bq" style="background-color: pink; font-family: verdana, geneva; font-size: 12px; margin: 10px; padding: 10px; text-align: justify;">
<div style="text-align: center;">
<span style="color: blue;"><b>Topik CSS Internal</b></span></div>
<div style="text-align: left;">
Saya mencoba membuat halaman blog keren dengan postingan menggunakan HTML dengan CSS</div>
</div>

3. Eksternal

Gaya eksternal mirip dengan internal yang menampilkan satu halaman blog atau website tapi pada eksternal menambahkan link ke <head>  bagian halaman HTML. Sobat juga bisa mengubah tampilan keselurahan blog atau website sesuai keinginan.

Contoh :
Background warna kuning, judul warna pink, paragraf warna hitam dan menambahkan link KLIK DISINI
Topik CSS Eksternal

Saya mencoba membuat halaman blog keren dengan menggunakan HTML dengan CSS Eksternal.
Untuk lebih jelasnya silahkan lihat di sini contohnya KLIK DISINI
Kode html dan css :
<div class="tr_bq" style="background-color: yellow; font-family: verdana, geneva; font-size: 12px; margin: 10px; padding: 10px; text-align: center;">
<b><span style="color: magenta;">Topik CSS Eksternal</span></b>
<div style="text-align: left;">
Saya mencoba membuat halaman blog keren dengan menggunakan HTML dengan CSS Eksternal.</div>
<div style="text-align: left;">
Untuk lebih jelasnya silahkan lihat di sini contohnya <a href="https://milano-ruus.blogspot.com/2018/03/html-dengan-css.html" target="_blank">KLIK DISINI</a></div>
</div>

Nah sampai di sini, sobat sudah paham kan dengan kode HTML dengan CSS ? Saya berharap demikian sobatku.

Demikian pembahasan dan contoh HTML dengan CSS yang bisa di terapkan dalam postingan blog atau website sobat. Semoga postingan ini bermanfaat dan bisa di gunakan oleh sobat pengunjung.

Terima kasih atas kunjungannya, dan jika ada yang kurang atau di antara sobat ingin memberikan masukan, silahkan tulis di dalam kolom komentar.
Open Comments

Posting Komentar untuk "HTML Dengan CSS"