Cara Menggunakan CSS

Hai , kali ini saya akan memberikan materi tentang cara menggunakan CSS pada website anda . Oke Langsung aja .

1. Langkah pertama kita buat file degan dreamweaver atau notepad , lalu ketikan code berikut :

<html>
 <head>
   <title>Belajar CSS</title>
<!-- Menyambungkan HTML dengan CSS -->
 <link href="style.css" rel="stylesheet" type="text/css">
<!-- kode di atas befungsi untuk memanggil "style.css" -->

 </head>
<body>
<div id="ground1"> Block Pertama </div>
<div id="ground2"> Block Kedua </div>
<div class="ground3"> Block Ketiga </div>

</body>
</html>

Catatan:
A. untuk memanggil fungsi id dengan cara memberikan varibel(  #variabel )
B. untuk memanggil fugnsi class dengan cara memberikan varibel ( .variabel )

lalu kita save dengan nama index.html

2. Langkah selanjutnya buat file baru lagu dengna dreamweaver atau notepad , lalu ketikan kode css

#ground1 {

 backgorund:orange;
 widht:500px;
 height:250px;
 text-align:center;
 float:left;

}
#ground2{
 backgorund:red;
 widht:500px;
 height:250px;
 text-align:right;
 float:right;
}
.ground3{
 background:#fff;
 border:1px solid #000;
 width:200px;
 height:300px
 float:none;
}

lalu save dengan nama style.css

3. Kemudia jalankan file index.html dan lihat hasilnya
sumber : http://woengkreatif.blogspot.com/2013/10/cara-menggunakan-css.html

Komentar

  1. Unknown15 Desember 2017 pukul 03.08

    i love this blog about window really is great for mewindows 7 starter download really i am appericate your effort

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Bahaya Menyentuh Mainboard Komputer Atau Laptop Saat Dihidupkan

Gambar
Hai sahabat, kali ini saya akan membuat tulisan tentang bahaya menyentuh mainboard komputer atau laptop saat dihidupkan. Tapi tulisan ini hanya untuk mengingatkan ya sahabat, bukan berarti saya ingin menggurui Anda. Nah, sebagai teknisi komputer, terkadang kita akan melakukan pembongkaran terhadap komputer atau laptop yang rusak jika diperlukan. Saat pembongkaran itu lah biasanya kita lakukan pengetesan terhadap mainboard komputer atau laptop tersebut, dengan tanpa memasangnya di dalam casing seperti biasanya. Tentu jika demikian, maka mainboard komputer atau laptop yang sedang kita kerja pasti akan mudah untuk disentuh. Nah, di sinilah bahayanya jika Anda tidak berhati-hati. Sebab, dalam kondisi "ON" alias dialiri arus listrik maka mainboard bisa saja rusak jika disentuh menggunakan benda-benda yang terbuat dari logam atau besi, seperti contoh: pinset, obeng dan lain-lain. Kerusakan mainboard tersebut akibat adanya arus pendek atau corsleting saat logam menyentuh komp...
Baca selengkapnya

Mengetahui hari pada tanggal tertentu

Gambar
Mengetahui hari pada tanggal tertentu Pada tutorial kali ini akan dibahas mengenai cara pembuatan script PHP untuk menampilkan nama hari pada tanggal tertentu. Sebagai contoh misalkan diberikan suatu tanggal 3 februari 2010, kemudian kita ingin mengetahui hari apakah itu? Baiklah . kita akan segera dengan script PHP yang akan kita buat. Dalama PHP , belum ada suatu perintah langsung untuk mengetahui nama hari pada tanggal tertentu. Untuk itu kita haru membuat scriptnya sendiri. Sebagai pendahuluan, terlebih dahulu saya kenalakan dengan suatu fungsi dalam PHP untuk menampikan nama hari pada tanggal saat ini (  current date ) .  Fungsi tersebut adalah .             Date(“l”); Dengan parameter l ( L kecil ) merupakan format spesifik untuk menampiklan nama hari.  Sedangkan date sendiri adalah fungsi untuk memperolehh tanggal saat ini.  Sehingga akan menghasiklan  output  ( dengan an...
Baca selengkapnya

Teknologi Terbaru di Balik Intel Haswell

Gambar
Prosesor Intel Core i generasi ketiga dengan arsitektur Ivy Bridge ternyata mampu mengulang kesuksesan yang telah ditorehkan oleh prosesor generasi sebelumnya dengan arsitektur Sandy Bridge. Performa tinggi di kelasnya, konsumsi daya rendah, dan harga jual menarik membuat prosesor dengan proses fabrikasi 22 nm ini mendulang sukses baik di pasar komputer desktop maupun mobile. Dengan hadirnya beragam varian dari kelas di atas 3 juta rupiah hingga di bawah 1 juta rupiah membuat prosesor Intel Ivy Bridge tidak hanya diterima oleh kalangan berkantong tebal tetapi juga kalangan berkantong pas-pasan. Oleh karena itu, tidak aneh jika platform Ivy Bridge menjadi incaran pengguna yang ingin memiliki sebuah komputer terbaru. Logo baru prosesor Intel Core i7/Core i5/Core i3 Haswell Hari ini merupakan saat istimewa bagi Intel karena prosesor Core i kelas mainstream mereka akhirnya menginjak generasi keempat. Prosesor Core i generasi keempat ini menghadirkan arsitektur terbaru bernama Haswel...
Baca selengkapnya