gravatar

Belajar CSS bersama Kediri Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Apakabar sahabat Kediri Blogger,kali ini kami akan membahas tentang CSS...apa sih kepanjangan CSS ?....kami akan mejelaskan kepanjangan dari CSS,CSS singkatan dari Cascading Style Sheets  dan itu kepanjangan nya..sekarang kalian sudah tau kan kepanjangan nya !!oke sekarang kita belajar bareng tentang CSS,ini berguna banget untuk pengeditan BLOG atau Website.langsung sajalah kita bareng bareng ke TKP.....

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yang pertama:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:


<p style="color:blue">Membuat tulisan warna biru</p> 
<p style="font-family:arial;font-size:150%;color:Blue">Membuat jenis font, ukuran dan warna</p> 
<p style="color:Blue;background-color:Pink;width:60px;text-align: center">Test</p>
 <p style="font-style:italic;">Membuat tulisan miring</p>


Maka hasilnya seperti ini : 

Membuat tulisan warna biru
Membuat jenis font, ukuran dan warna 
 Test 
Membuat tulisan miring 


2.Menaruh di dalam header dokumen HTML.

Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:

<style> <!-- p { color:Blue;font-family:arial;font-size:120%;} --> </style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :

<html> <head> <style> <!-- p { color:green;font-family:arial;font-size:120%;} --> </style> </head> <body> <p>Saat ini saya sedang belajar CSS</p> <p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p> <p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki format yang sama</p> </body> </html>


3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:

<link rel=''stylesheet" href=''style.css'' type=''text/css''>

Sehingga di dokumen html akan terlihat seperti berikut ini:


<html> <head> <title>Titel websiteku</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> </body> </html>


Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.

Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "kediri-blognet.com"> <html> <head> <title>Titel websiteku</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="halaman"><!-- div id halaman dimulai --> 
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1> <h2 class="sub-judul">Disini sub-judul websiteku</h2> </div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p> </div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai --> 
<p>Disini konten websiteku</p> </div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p> </div><!-- div class kanan berakhir -->
</div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p> </div><!-- div class footer berakhir --> 
</div><!-- div id halaman berakhir --> 
</body>
</html>

Yang berada diantara <–– dan ––> atau yang berwarna biru hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya . Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.

Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”


#halaman {/* "id" dilambangkan dengan "#" */
 width: 800px; margin: 0 auto;/* agar dokumen berada ditengah */ 
padding: 0 auto; } #judul { width: 100%; height: 100px; background: #5F9EA0; margin: 0;/* pengaturan sisi bagian luar */
 padding: 0;/* pengaturan sisi bagian dalam */ 
} #konten { width: 100%; margin: 0; padding: 0; } .kiri {/* "class" dilambangkan dengan "." */ 
width: 25%; height: 300px; float: left; background: #ADD8E6; } .tengah{ width: 50%; height: 300px; float: left; background: #FDF5E6; } .kanan{ width: 25%; height: 300px; float: right; background: #ADD8E6; } .footer{ height: 40px; background: #8FBC8F; clear: both; } .judul { color: Red; padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */ 
} .sub-judul { color: #ff0; padding: 0 10px 10px; } p { padding-left: 10px;/* penulisan untuk satu sisi saja */ }



Yang saya kasih warna biru hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.

Sekarang buka file “csstest.html” dengan browser anda.

Semoga belajar tentang CSS bersama kami kali ini ada hikmahnya dan bermanfaat buat kalian semua pengunjung Kediri Blogger.

Artikel Terkait

Widget by [ Kediri Blogger ]

Bagikan

Translate

Sponsor

Partners



cooltext855347361_zps698ca688

My Banner

christian tatelu