Cara Menggunakan CSS pada sebuah Website
Dunia Programming - Pada tutorial kali ini, Dunia Programming akan membahas tentang bagaimana Cara Menggunakan CSS pada sebuah Website. CSS sering kita dengar dan kita ketahui dengan nama Style atau sebuah gaya dari suatu website.
Jadi, CSS sangatlah berperan penting dalam kesuksesan tampilan sebuah website, tanpa adanya CSS, tampilan website yang kalian buat tidak akan menarik perhatian para pengunjung.
Cara penulisan CSS dalam suatu website
Namun cara tersebut juga digunakan apabila terdapat perbedaan antara tag satu dengan yang lainnya.
 |
| Cara Menggunakan CSS pada sebuah Website |
Jadi, CSS sangatlah berperan penting dalam kesuksesan tampilan sebuah website, tanpa adanya CSS, tampilan website yang kalian buat tidak akan menarik perhatian para pengunjung.
Cara penulisan CSS dalam suatu website
CSS
variabel {
property: nilai;
}
property: nilai;
}
"Bagaimana Cara Menggunakan CSS pada suatu website..?"
Cara menggunakan CSS pada suatu website terbagi menjadi 3 bagian
1). Embeded
untuk cara yang pertama ini sangatlah mudah kita lakukan, namun cara ini memiliki kekurangan, apabila kita menggunakan cara ini, secara otomatis, kita harus memberi style kedalam masih-masing tag yang ingin kita beri style, contohnya
CSS
<body style="background:#000; font-family: Arial">
.
.
</body>
.
.
</body>
Namun cara tersebut juga digunakan apabila terdapat perbedaan antara tag satu dengan yang lainnya.
2). Internal
Untuk cara yang satu ini penulisannya berbeda dengan cara pertama, untuk cara yang satu ini, penulisannya berada diantara tag pembuka dan penutup <head> lebih tepatnya dibawah tag pembuka dan penutup <title></title>.
Contoh Penulisan CSS
Cara ini berbeda dengan yang pertama, untuk cara yang satu ini kita harus menggunakan ( . ) dan ( # ).
Penjelasan :
( . ) titik : untuk cara penulisannya dengan class
( # ) pagar : untuk cara penulisannya dengan id
Jadi apabila kalian menggunakan cara ini, kalian harus menyebutkan variabelnya terlebih dahulu, untuk variabel terserah si pembuat. berikut contoh penulisannya :
Didalam tag :
Catatan :
Untuk tulisan yang saya beri garis biru, kalian bisa rubah sesukan hati kalian, bisa kotak, bisa wadah dan lain lain
Didalam CSS :
Contoh Lengkap :
3). External
Untuk cara yang satu ini hampir sama dengan Internal, akan tetapi peletakan script CSSnya berada diluar file atau diluar file .html, jadi kita harus memanggil CSSnya dengan cara :
Catatan :
Untuk teks yang saya kasih garis biru, kalian bisa sebutkan letak dimana file css kalian simpan. misalkan dalam satu folder maka penulisannya href="style.css", begitu juga dengan semisalnya.
Dan kita perlu membuat file berekstensi .css dengan nama standarnya style.css, nama style bisa kalian rubah sesuka hati, bisa gaya.css ataupun nama lain.
Jadi Penulisannya akan nampak seperti pada gambar dibawah ini :
dan filenya akan nampak seperti pada gambar dibawah ini :
Script lengkap CSS dan HTML :
Copy script dibawah ini, dan simpan dengan nama index.html
Copy script CSS dibawah ini, kemudian simpan dengan nama style.css
Sekian penjelasan singkat dari Dunia Programming, dan buat kalian yang ingin lebih lanjut memahami beberapa property CSS Background lnegkap, silahkan kalian bisa klik tombol dibawah ini
Semoga apa yang telah saya berikan bermanfaat bagi kalian semua, dan jangan lupa buat kalian yang tidak ingin ketinggalan informasi tentang seputar Dunia Programming, silahkan Subscribe alamat email kalian dengan cara menulis alamat email kalian pada bagian Kotak Subscribe dibawah ini.
Untuk cara yang satu ini penulisannya berbeda dengan cara pertama, untuk cara yang satu ini, penulisannya berada diantara tag pembuka dan penutup <head> lebih tepatnya dibawah tag pembuka dan penutup <title></title>.
Contoh Penulisan CSS
CSS
<head>
<title></title>
<style type="text/css">
</style>
</head>
<title></title>
<style type="text/css">
</style>
</head>
Cara ini berbeda dengan yang pertama, untuk cara yang satu ini kita harus menggunakan ( . ) dan ( # ).
Penjelasan :
( . ) titik : untuk cara penulisannya dengan class
( # ) pagar : untuk cara penulisannya dengan id
Jadi apabila kalian menggunakan cara ini, kalian harus menyebutkan variabelnya terlebih dahulu, untuk variabel terserah si pembuat. berikut contoh penulisannya :
Didalam tag :
Judul
<body class="wrapper">
atau
<body id="wrapper">
atau
<body id="wrapper">
Catatan :
Untuk tulisan yang saya beri garis biru, kalian bisa rubah sesukan hati kalian, bisa kotak, bisa wadah dan lain lain
Didalam CSS :
CSS
.wrapper {
width: 100px;
height: 100px;
background: #000;
}
atau
#wrapper {
width: 100px;
height: 100px;
background: #000;
}
width: 100px;
height: 100px;
background: #000;
}
atau
#wrapper {
width: 100px;
height: 100px;
background: #000;
}
Contoh Lengkap :
CSS
<!doctype html>
<html>
<head>
<title>Belajar CSS - Dunia Programming</title>
<style type="text/css">
.wrapper {
width: 100px;
height: 100px;
background: #000;
}
</style>
</head>
<body class="wrapper">
</body>
</html>
<html>
<head>
<title>Belajar CSS - Dunia Programming</title>
<style type="text/css">
.wrapper {
width: 100px;
height: 100px;
background: #000;
}
</style>
</head>
<body class="wrapper">
</body>
</html>
3). External
Untuk cara yang satu ini hampir sama dengan Internal, akan tetapi peletakan script CSSnya berada diluar file atau diluar file .html, jadi kita harus memanggil CSSnya dengan cara :
CSS
<link rel="stylesheet" type="text/css" href="lokasi tempat css kalian disimpan">
Catatan :
Untuk teks yang saya kasih garis biru, kalian bisa sebutkan letak dimana file css kalian simpan. misalkan dalam satu folder maka penulisannya href="style.css", begitu juga dengan semisalnya.
Dan kita perlu membuat file berekstensi .css dengan nama standarnya style.css, nama style bisa kalian rubah sesuka hati, bisa gaya.css ataupun nama lain.
Jadi Penulisannya akan nampak seperti pada gambar dibawah ini :
CSS
.kotak1 {
width: 100px;
height: 100px;
background: #000;
}
.kotak2 {
width: 100px;
height: 100px;
background: #333;
}
width: 100px;
height: 100px;
background: #000;
}
.kotak2 {
width: 100px;
height: 100px;
background: #333;
}
dan filenya akan nampak seperti pada gambar dibawah ini :
Script lengkap CSS dan HTML :
Copy script dibawah ini, dan simpan dengan nama index.html
CSS
<!doctype html>
<html>
<head>
<title><Belajar CSS - Dunia Programming/title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
</body>
</html>
<html>
<head>
<title><Belajar CSS - Dunia Programming/title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
</body>
</html>
Copy script CSS dibawah ini, kemudian simpan dengan nama style.css
CSS
body {
background: red;
}
.kotak1 {
width: 100px;
height: 100px;
background: #000;
}
.kotak2 {
width: 100px;
height: 100px;
background: #333;
background: red;
}
.kotak1 {
width: 100px;
height: 100px;
background: #000;
}
.kotak2 {
width: 100px;
height: 100px;
background: #333;
Catatan :
Untuk Teks yang kasih garis biru, kalian bisa memanggil nama tagnya langsung, jad tidak harus nama variabel, akan tetapi kalian juga bisa memanggil nama tagnya misalkan table, tr, td dan sebagainya.
Dari ketiga cara tersebut, yang biasa digunakan oleh para programmer adalah cara ke 3, namun apabila source code CSS yang kalian buat sedikit, kalian bisa gunakan cara ke 2 atau ke 1.Untuk Teks yang kasih garis biru, kalian bisa memanggil nama tagnya langsung, jad tidak harus nama variabel, akan tetapi kalian juga bisa memanggil nama tagnya misalkan table, tr, td dan sebagainya.
Sekian penjelasan singkat dari Dunia Programming, dan buat kalian yang ingin lebih lanjut memahami beberapa property CSS Background lnegkap, silahkan kalian bisa klik tombol dibawah ini
Semoga apa yang telah saya berikan bermanfaat bagi kalian semua, dan jangan lupa buat kalian yang tidak ingin ketinggalan informasi tentang seputar Dunia Programming, silahkan Subscribe alamat email kalian dengan cara menulis alamat email kalian pada bagian Kotak Subscribe dibawah ini.
Post a Comment for "Cara Menggunakan CSS pada sebuah Website"
- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain