Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

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.
Cara Menggunakan CSS pada sebuah Website
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;
}

"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>

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

CSS
<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">

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;
}

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>

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;
}

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>

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;
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.
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"

Berlangganan via Email