pertemuan 12

Cara Menggunakan Bootstrap

Sebagai salah satu library css, kita tinggal import style / css bootstrap di bagian head html yang telah kita buat. Ada baiknya kamu kenalan dengan css dalu sebelum menggunakan bootstrap. Kenapa? Karena dengan mengenali CSS kamu akan lebih mudah mengimplementasikan bootstrap ke dalam website yang kamu buat. Terutama untuk editing style supaya bisa sesuai dengan keinginan kita.

Cara Import Bootstrap ke Halaman Web Pertama, download bootstrap di getbootstrap. Setelah download letakkan css bootstrap dalam folder project website yang akan kamu buat. Setelah itu panggil ke dalam website menggunakan link rel, pastikan css bootstrap berada pada bagian teratas. Jangan ada import file css diatas bootstrap.

<link rel="stylesheet" href="css/bootstrap.css">

Pada script di atas, bootstrap.css saya letakkan pada folder css yang berada 1 direktori dengan index.html. Apabila kamu ingin menggunakan bootstrap pada website yang online di internet, kamu bisa menggunakan CDN dari bootstrap untuk diimport di halaman websitemu. Berikut cara menggunakan bootstrap dari CDN. 

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Dengan kode di atas, kamu bisa import css bootstrap di websitemu. Namun file css bootstrap tidak berada di server yang kamu gunakan. Menurut saya kode tersebut cocok digunakan untuk custom css di blogger. Karena kita tidak memiliki tempat untuk upload file css sendiri :D.

Setelah belajar cara import bootsrap, sekarang kita mencoba beberapa library bootstrap yanga ada.

Cara Menggunakan Bootstrap

Untuk menggunakan bootstrap sebenarnya mudah, kita tinggal buat sebuah tag html yang diikuti dengan nama class. Berikut contoh form dengan bootstrap

<input type="text" class="form-control" placeholder="Text input">

Selengkapnya tentang contoh penggunaan bootstrap bisa dilihat pada halaman dokumentasi bootstrap.

Tips dan Trik Menggunakan Bootstrap

Tadi sempat saya singgung, bahwa import bootstrap pada halaman paling atas. Karena css teratas akan di tumpuki oleh script yang ada di bawahnya. Oleh karena itu saya sarankan untuk import bootstrap pada bagian teratas karena apabila ada sesuatu yang kurang cocok dengan style default bootstrap kita bisa dengan mudah untuk menumpuki / override.

Misal untuk Heading 1 / H1 di bootstrap secara default 36px, dengan menggunakan override ini, kita bisa dengan mudah merubah H1 menjadi ukuran 30px. Dan style tersebut kita import tepat berada di bawah import bootstrap.

Berikut gambar susunan external css yang biasanya saya gunakan dalam membuat layout website. Import bootstrap di bagian atas, dan custom css yang berada di bawahnya.

susunan import css bootstrap dan custom

Bagaimana? Mudah bukan menggunakan bootstrap :D? Kita tidak perlu lagi mengatur berbagai macam parameter CSS yang kadang membingungkan. Bootstrap termasuk salah satu framework yang mudah digunakan dan memiliki dokumentasi yang lengkap. Jadi cocok digunakan untuk teman-teman yang belajar membuat halaman website yang bisa tetap cantik dilihat pada perangkat mobile dengan resolusi kecil (responsive).

pertemuan 11

Pengertian Javascript

Javascipt merupakan bahasa pemrograman komputer yang dinamis. Biasanya sering digunakan pada web browser untuk menciptakan halaman web yang menarik, interaktif, serta merapkan berbagai fungsi pada halaman web. Javascript merupakan salah satu pemrograman web yang harus kita pelajari (selain HTML dan CSS).


Cara Kerja Javascript

Javascript bukan sebuah compiled language, artinya javascript tidak memerlukan sebuah compiler agar kode yang ada di dalamnya bisa dijalankan. Kode dari Javascript langsung diterjemahkan oleh web browser.Untuk dapat menjalankan Javascript,Web browser harus support Javascript. Semua web browseryang ada pada masa sekarang ini umumnya sudah mendukung Javascript. Javascript biasanya ditulis pada dokumen HTML atau dengan membuat file terpisah yang kita hubungkan dengan dokumen HTML .Untuk penulisan Javascript di dalam dokumen HTML, penulisan scriptnya bisa kita tulis di dalam tag <head> </head> atau di dalam tag <body></body>. Cara penulisannya ada dengan menuliskan tag <script type="text/javascript> Kode Javascript </script>. Sedangkan apabila kita menggunakan file Javascript yang terpisah, kita bisa menambahkan tag <script type="text/javascript" src="filejavascript.js"></script>.

Contoh Penggunaan Javascript


Dari penjelasan singkat di atas, tentu masih sulit bagi kita untuk memahami bagaimana sebenarnya Javascript bekerja. Oleh karena itulah kita akan coba membuat sebuah dokumen HTML sederhana dengan menambahkan Javascript di dalamnya.Pertama - tama, kita siapkan sebuah dokumen HTML sederhana. Bisa kita tulis dari awal untuk dokumen HTML ini. Bila sudah siap, maka kita akan memiliki sebuah kode HTML dengan bentuk sebagai berikut :

<html>


<head>


<title>Belajar Javascript</title>


</head>


<body>


<div id="contoh"> Mari Belajar Javascript </div>


</body></html>

Jika anda sudah memahami bagaimana membuat HTML, maka ada bisa membuat kode sesuai dengan keinginan anda tanpa mengikuti contoh di atas.Setelah HTML siap, sekarang kita tambahkan Javascript di dalamnya. Yang akan saya contohkan adalah sebagai berikut :

<!DOCTYPE html><html>


<head>


<title>Belajar Javascript</title>


</head>


<body>


<div id="contoh"> Contoh </div>




<script>


document.getElementById("contoh").innerHTML = "Mari Belajar Javascript!!";</script>




</body>


</html>


Kemudian coba jalankan dokumen HTML tersebut dengan menggunakan browser. Kita bisa lihat hasilnya bahwa kata "Contoh" yang ada pada elemen div berubah menjadi "Mari Belajar Javascript!!". Hal ini terjadi karena pada scipt Javascript, kita memerintahkan elemen dengan id "contoh" akan berisi kata "Mari Belajar Javascript!!".

Demikian penjelasan singkat mengenai Javascipt. Kita belajar bagaimana Javascript bekerja pada browser, kemudian kita juga belajar contoh penggunaan Javascript secara sederhana. Pada postingan selanjutnya, kita akan coba belajar lebih dalam lagi mengenai Javascript dan bagaimana mengimplementasikan Javascript pada JQuery.

Catatan : Jika hasil yang muncul tidak sesuai dengan yang diharapkan, coba periksa karakter seperti tanda kutip ("). Ada kemungkinan bahwa tanda tersebut bukan merupakan karakter standar yang dapat dikenali oleh browser.

pertemuan 10

Apa fungsi dari tag DIV?
Umumnya yang paling sering digunakan untuk membuat suatu susunan Template adalah elemen tag DIV. Jadi, di dalam Body saya jamin Anda akan banyak menemukan DIV. Elemen tag ini bisa kita pakai untuk membuat suatu bagian tertentu yang terpisah dengan bagian yang lainnya.  Atau sebagai bentuk susunan layout. Sifatnya bisa dikatakan untuk menciptakan suatu ruang. Misal, body itu ibaratkan sekolah. Maka kita perlu DIV untuk memetakan dimana lokasi Kelas 4C, dimana lokasi 6A, seberapa luas Lapangan Upacara, posisi WC sebelah mana. Masih ingat pembahas kemarin tentang section? Iyaa hampir sama seperti DIV ini.



Rumus untuk membuat suatu elemen tag:
1
2
3
<namatag   atribut1='value1'   atribut2='value2'   atribut3='value3'  >
....
</namatag>
Mau pakai atribut apa bisa disesuaikan sendiri. Gak dipaksakan juga, mau pakai tiga atribut, bisa dua atau satu. Maksudnya atribut ini apaan? Makanya kemarin saya suruh Anda mampir di tulisan Macam-macam Atribut HTML.

Bisa gak langsung ditutup pada tag pembuka? Iyaa bisa juga sih. Jadinya akan seperti ini:
<div class='separator' style='text-align:center'  />
Bedanya ini dia gak punya isi di dalamnya. Kita bisa pakai untuk keperluan menciptakan ruang kosong, jarak tertentu (seperti spasi/enter), atau bentuk tetap.

Lalu gimana kalau di dalam suatu tag DIV ada tag DIV lagi?
Iyaa gak papah. Istilahnya itu Elemen Induk (Parent) dan Elemen Anak (Child). Di dalam Anak mau buat lagi, iya terserah. Jadi template Anda nanti akan memiliki garis keturunan yang banyak. Ada Nenek, Kakek, Mamak, Uwak, Bapak, Anak, Cucu, Cicit. Hehe..

Bentuknya misalkan seperti ini:
1
2
3
4
5
6
7
8
9
10
11
<div id='uwakbudi' class='rumah'>
    <div id='sibejo' class='kamar'>
     ....
    </div>
    <div id='sipuput' class='dapur'>
        <div id='sidedek'>
         ....
        </div>
        <div class='kompor'/>
    </div>
</div>
Dari sana bisa kita lihat parent-nya adalah uwakbudi maka child-nya adalah sibejo dan sipuput. Lalu sidedek berarti child milik sipuput. Terus kompor gimana? Iyaa sama tingkatnya dengan sidedek. Pengaruhnya apa sih ini? Nanti kalau kita sudah masuk ke pembahasan CSS baru keliatan jelas. Letak dan susunan serta penggunaan atribut sangat berpengaruh pada tampilan. Misalkan, class dapur kita kasih cat dindingnya warna Hitam Pekat (biar gak cepat kotor! hehe). Maka dampaknya adalah elemen child dibawahnya akan sama-sama kecipratan warna hitam juga. Tapi kalau kita cat dinding child langsung, maka parent gak akan berpengaruh apa-apa.

Penggunaan lainnya bisa untuk menciptakan ruang atau tata letak. Prinsipnya adalah setiap elemen tag yang ditulis diatas, secara default akan muncul dibagian atas. Gimana kalau mau buat letaknya kiri dan kanan? Nah, sama kayak nulis juga. Yang tampil di kiri adalah elemen tag yang urutannya kita tulis diatas. Maka, kalau kita mau buat bagian content di sebelah kiri dan sidebar di sebelah kanan tahu sendiri kan gimana urutan penulisan HTML nya? Tapi sampai disini karna belum menggunakan style tampilannya masih berupa baris biasa saja. Kalau tidak ada tulisan di dalam div sibejo maka iyaa tidak akan muncul apa-apa.

Oh yaa, kenapa penulisan struktur elemen HTML itu mesti ada yang menjorok ke dalam ada yang tidak? Sebenarnya tidak ada keharusan untuk cara penulisan ini. Kebanyakan tutorial hanya ingin mempermudah pembaca dalam hal memahami setiap baris kode yang ditulis. Kalau Anda sudah mahir, ada baiknya malah menggunakan satu baris saja untuk setiap elemen. Misal, contoh diatas bisa aja kita tulis begini:
1
2
3
4
<div id='uwakbudi' class='rumah'>
<div id='sibejo' class='kamar'> .... </div>
<div id='sipuput' class='dapur'><div id='sidedek'> .... </div><div class='kompor'/></div>
</div>

Dalam penulisan HTML, fungsi tombol enter maupun tab pada keyboard sama sekali tidak ada artinya. Untuk membuat baris paragrap baru, kita bisa menutup paragrap pertama :
<p> paragrap satu </p>
Lalu lanjutkan dengan paragrap baru dibawahnya. Atau dengan cara menambah tag br seperti ini :
<p> paragrap satu <br/> paragrap dua </p>

Berdasarkan yang sudah Anda pelajari di episode pengenalan HTML dasar sebelumnya, kita bisa menggunakan berbagai macam pilihan Atribut beserta Value-nya pada sebuah Tag tertentu. Untuk apakah atribut ini digunakan? Intinya supaya nanti kita lebih mudah melakukan pengaturan tampilan, untuk memanggil suatu tag tersebut atau bisa dikatakan sebagai alamat. Dan Atribut juga berfungsi sebagai identitas atau nama agar lebih mudah dikenal oleh bahasa web. Misal tag img, kita pasanglah atribut alt untuk menyatakan bahwa gambar satu ini adalah contoh-gambar-template. Tanpa atribut alt mana bisa robot crawler mengetahui itu gambar apa atau foto siapa. Begitu juga tag lainnya.

Apakah ada aturan untuk value yang digunakan? Sebagian ada yang sudah ditetapkan dan beberapa ada yang bisa kita tentukan sendiri. Contoh atribut yang umum dipakai dan bisa disesuaikan sendiri adalah atribut:  id , class , href , title , alt , src , dll.
Khusus untuk atribut ID walaupun value nya bisa kita tentukan, perlu diingat bahwa tidak boleh ada dua ID yang sama dalam satu template. Berarti kita harus buat ID yang unik dan berbeda-beda sama seperti nomor KTP kan? Kecuali jika menggunakan tag conditional seperti pembahasan kemarin.

pertemuan 9

Metode untuk memanggil / menggunakan CSS itu sendiri.

Inline Styles

Inline styles ini maksudnya kalian memakai CSS langsung pada tag HTMLnya. Untuk memasukkan CSSnya kalian butuh atribut “style”. Biar gak pada bingung ini contohnya.

<html>
  <head>
    <title>Belajar CSS</title>
  </head>
  <body>
    <p style=”color:#000000″>Contoh</p>
  </body>
</html>



Nah jadi outpunya akan menghasilnya tulisan “Contoh” dengan warna hitam, iya color:#000000 itu untuk mengubah tulisan jadi warna hitam.

Internal Styles

Internal styles yaitu memakai CSS masih di dalam file HTML namun tidak langsung pada tagnya seperti Inline Styles, melainkan kita buat beberapa baris kode CSS dan kemudian kita panggil. Contohnya simplenya seperti ini

<html>
  <head>
    <title>Belajar CSS</title>
    <style> p{color:#000000″} </style>
  </head>
  <body>
    <p>Contoh</p>
  </body>
</html>
Kode itu sama menghasilkan tulisan “Contoh” dengan warna hitam. Hanya penulisannya saja berbeda dimana kode CSSnya dibedakan tempatnya dan di apit tag <style>

External Styles

External Style dimana kita membuat file yang berisi kode CSS dan file berisi kode HTML terpisah,  jadinya ada 2 file. Contohnya seperti ini

Pertama buat file CSS, misalnya kita beri nama style.css

p{color:#000000″}
Dan yang kedua kita buat file HTML, dimana diberi nama latihan.html

<html>
  <head>
    <title>Belajar CSS</title>
    <link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
  </head>
  <body>
    <p>Contoh</p>
  </body>
</html>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”screen” /> itu digunakan untuk memanggil file CSS yang akan digunakan. Dan output yang dihasilkan sebenarnya sama juga dengan yang di atas yaitu tulisan “Contoh” dengan warna hitam.

Mungkin kalian akan mengambil kesimpulan mendingan pakai cara yang pertama lebih pendek dan simple sekali. Iya cara yang pertama yaitu Inline Style memang simple dan kode yang kita buat akan menjadi lebih pendek, namun akan lain halnya jika anda akan membuat banyak paragraf / tulisan dengan warna hitam, apakah setiap tag <p> anda akan menulis “style:color#000000″ tentu itu akan menjadi boros dan tidak sesuai dengan perkiraan semula.

Setelah kesimpulan diatas mungkin kalian akan berkesimpulan memakai cara kedua yaitu Internal Style karena gak usah repot – repot untuk membuat 2 file, karena toh juga 1 file saja sudah bisa untuk membuat semua paragraf menjadi berwarna hitam. Tidak juga sih, bagaimana jika ternyata anda membuat paragraf yang sama di file HTML lain. Biar lebih jelas, jadi ceritanya kalian buat 2 file HTML, dimana dikedua file tersebut kalian ingin membuat paragraf berwarna hitam. Ini tentu juga akan menjadi pemborosan karena di setiap file HTML anda akan membuat <style>.

Berarti cara ketiga yaitu External Style yang bagus dong ?. Tidak juga sebenarnya ketiga cara tersebut tidak ada yang bagus maupun jelek. Ini tergantung kebutuhan saja, kalau misalnya kalian membuat style untuk satu tag saja misalnya kalian hanya ingin membuat 1 paragraf di seluruh web anda dengan warna merah, tentu cara kedua (Internal Styles) dan cara ketiga (External Styles) akan menjadi kurang efektif. Begitu juga ketika anda hanya akan membuat paragraf di 1 file HTML dari seluruh website anda berwarna merah tentu cara kedua (Internal Styles) akan menjadi lebih efektif. Dan ketika anda akan membuat seluruh paragraf dalam website anda menjadi merah maka cara ketiga (Eksternal Styles) akan lebih baik digunakan.

pertemuan 8

Cara peletakan CSS:

External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:


Penempatan CSS dalam HTML
Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type = “text/css”>
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Eksternal CSS


file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style=”background-color:#999999; text-align:center;”>Inline CSS</div>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css. Di dalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:

a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

pertemuan 7

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah kode untuk mengatur bagaimana elemen HTML ditampilkan dalam suatu halaman website. Elemen HTML dimaksud di sini adalah tag-tag HTML misalnya, tag <body>, , <table>, <div>
 tag tag atau kode HTML lainnya yang digunakan dalam mendesain HTML.
Di Mana dan Bagaimana Menulis Kode CSS??



Di mana kita bisa menulis kode-kode CSS? sama halnya seperti HTML, kita menulis kode CSS di teks editor seperti notepad atau bisa langsung di aplikasi pembuat website seperti MS Frontpage atau Dreamweaver.

Kode CSS biasanya di tulis di file yang sama dengan file tempat kode-kode HTML kita, yang bisa saja ber-ekstensi .html, .php. .asp

Contoh, file : index.html, kalian ketik kode di bawah di Notepad, lalu save as index.html. Jangan lupa save as type: All File (*.*)

<html>
<head>
<style>
p{font-size:17pt;}
</style>
</head>
<body>
Ini adalah paragraf yang diformat menggunakan CSS
<br />

<div style="border: red 1px solid;">
Ini juga di atur menggunakan CSS, di mana kode CSS langsung ditulis di tag atau elemen HTML
</div>
</body>
</html>

Jika kita lihat kode di atas:
Kode CSS bisa ditulis di antara tag <style> dan <style>
Kode CSS juga bisa ditulis langsung di dalam element HTML yang ingin atur formatnya <div style="border:red 1px solid">

Output dari kode di atas adalah:

Belajar CSS

Kode CSS bisa juga di tulis di file terpisah, dengan menyimpannya ber-ekstensi .css

Contoh: ketiklah kode di bawah di notepad lalu simpan dengan nama gaya.css

p{font-size:17pt;}

Lalu bagaimana cara menyatukan file css di atas ke dalam kode HTML kita, cukup menulis kode berikut di dalam kode HTML kita:

<link rel="stylesheet" type="text/css" href="highlight.css">

Syntax CSS

Setelah kalian tahu di mana dan bagaimana cara menulis kode CSS, sekarang kita mulai belajar kode CSS. Aturan sintaks penulisan kode CSS adalah sebagai berikut:

selector {property: value}

Selector: adalah tag atau element HTML yang ingin diatur gaya atau formatnya, misalnya p, table, body, div dan lainnya
Property: adalah kode CSS untuk mengatur format element HTML. Misalnya font-size, border, background-color, dan lainnya.
Value: adalah nilai dari property CSS di atas, misalnya nilai font-size kita set 17pt
Lebih Lanjut dengan Selector CSS

Jika kita lihat sintaks CSS di atas, selector adalah tag atau elemen HTML yang akan di atur. Ada macam-macam cara memilih selector:

    Selector Normal
    Yaitu, kamu langsung menulis tag HTML apa yang akan diatur format CSS nya.
    Contoh:

    body {color: black}

    p {font-family: "sans serif"}

    p
    {
    text-align: center;
    color: black;
    font-family: arial
    }

    Selector Grouping
    Anda bisa menggroup-kan elemen-elemen HTML yang akan diformat CSS nya, mungkin karena formatnya sama. Contoh:

    h1,h2,h3,h4
    {
    color: blue;
    }

    Class Selector
    Biasanya kita ingin mengatur suatu paragraf atau div dengan format yang berbeda-beda, maka kita bisa buat kelas-kelas. Contoh:

    <html>
    <head>
    <style>
    a.menu{color:black;text-decoration:none}
    a.judul{color:blue;font-size:15pt}
    </style>
    </div>
</table>
</body>
    <body>
    <center>
    <a class="menu" href="http://www.blogger.com/index.php">Home</a> |
    <a class="menu" href="http://www.blogger.com/teknologi.php">Teknologi</a> |
    <a class="menu" href="http://www.blogger.com/ekonomi.php">Ekonomi</a>

    <a class="judul" href="http://www.blogger.com/artikel1.html">Ini adalah judul artikel</a>

    </center>
</body>
   

    Pada contoh di atas terlihat kita memilih selector a untuk tag <a href="http://www.blogger.com/blogger.g?blogID=1733603682017083721">, lalu kita buat kelas-kelas dengan cara memberi titik (.) diikuti nama kelas.

    Jika anda membuat kelas, jangan lupa di tag HTML ditambahkan properti class="nama kelas"
    
    ID Selector
    Selain menggunakan kelas, kita juga bisa menggunakan id selector, caranya: kode atau tag HTML yang akan diatur CSSnya kita kasih id, yaitu dengan menambahkan properti id="nama-id" pada tag HTMLnya.
    Contoh:

    <html>
    <head>
    <style>
    #biru {color:blue}
    #hijau {color:green}
    </style>
    </head>
    <body>
    <div id="biru">
Tulisan ini diformat berwarna biru
    </div>
<div id="hijau">
Tulisan ini difromat berwarna hijau
    </div>
</body>
    </html>

Property CSS
Setelah kita mengetahui bagaimana cara memilih elemen atau tag HTML mana yang akan diformat CSS, saatnya kita mengatur format dari HTML. Property CSS adalah kode css untuk mengatur format atau gaya dari elemen HTML yang ingin ditampilkan di halaman website kita.