Belajar CSS

Posted by Yogo Prestiyanto on Sunday, November 18, 2012

Apa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :
  • Inline CSS
  • Embedded CSS
  • External CSS
Untuk bisa belajar CSS yang harus disiapkan adalah :
  1. Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++
  2. Browser seperti Mozilla Firefox, Google Chrome,Opera, dll

Inline

Inline CSS digunakan pada tag HTML-nya
Sebagai contoh, ketikkan source code berikut :



Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :












Embedded CSS

CSS ini menempel diantara tag <head> .. </head>
Sebagai contoh :


Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.

<style type="text/css">
p {
color:red;
}
</style>
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.

Untuk tampilannya sebagai berikut :











External CSS

External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.
Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :


#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri


Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :




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

Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file index.html di Mozilla Firefox atau Browser lainnya.

Untuk tampilannya sebagai berikut :















Artikel diatas hanyalah dasar dari membuat CSS yang saya ketahui. Jika ada kekurangan dari penulisan harap dimaafkan.

   

1 comment:

  1. Terimakasih, sekedar menambahkan saja, semoga bermanfaat
    Rekomendasi Artikel Terkait ->


    Pranala -> Format Tampilan Visual Web Dengan CSS3

    ReplyDelete