Rabu, 28 November 2018

Memasang CSS pada HTML

A. Apa Itu CSS?


CSS digunakan memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya. 


Contoh coding CSS adalah sebagai berikut :

      •            h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
      •            Color merupakan properti CSS
      •            blue adalah nilai dari properti CSS
      •            Setiap deklarasi atau statement CSS di buat didalam tanda kurawa { }
      •            Setiap properti diakhiri dengan tanda titik koma ;
  
Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */ 


/* comment : membuat heading */ 

h1 { color :blue; font-size:18px; } 

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id

Selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut : 

ini paragraph 

definisi id diatas pada CSS akan ditulis sebagai berikut : 

#parameter {
text-align:center;
color:red;
font-size:12px;
font-weight:bold;

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut: 

ini paragraph 

ini link 

Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah 

.center {text-align:center;} 

Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi misalnya.

Semua definisi css di bawah akan diterapkan pada tag HTML diatas 

.center {text-align:center;}
.blue {color:blue;}
.largefont{ font-size:18px; } 

Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya:

p.center {text-align:center;}
h1.blue {color:blue;}
a#largefont{ font-size:18px; }

B.  Implementasi CSS pada Tag HTML

Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb : 

  1. Internal Style

Cara membuat internal Style Sheet adalah dengan menambahkan tag <style type="text/css" media="screen"> pada bagian header tag HTML kita. Setelah selesai menambahkan tag maka selanjutnya tag tersebut kita tutup lagi dengan </style> sehingga kode HTML menjadi sebagai berikut :


<html>
<head>
<title> BELAJAR CSS </title>
<style type="text/css">
<!-- disini kode CSS -->
</style>
</head>
<body>
<!--disini content HTML-->
</body>
</html>


  2. External Style Sheet

Menuliskan kode css yang terpisah dengan file HTML, jadi kita harus mempunya 2 File, yaitu file master HTML dan file bernama style.css
Untuk memanggil file css kedalam HTML adalah sebagai berikut :



<html>
<head>
<title> BELAJAR CSS </title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
<body>
  

SELAMAT MENCOBA



Tidak ada komentar:

Posting Komentar