Belajar CSS Dasar Lanjutan Mudah Dipahami

belajar css dasar

SeniKoding.com - Sekarang mari kita bahas mengenai CSS Dasar, melanjutkan artikel sebelumnya yaitu Belajar CSS Dasar Mudah Di Pahami.
Kalau sebelumnya membahas perihal cara memanggil file CSS yang benar, sekarang dilanjut Belajar CSS Dasar lanjutan seperti, Class CSS, Class Selector, ID Selector dan masih banyak lagi. Ayo langsung saja.

Belajar CSS Dasar atau Pemula


Class dalam CSS digunakan untuk membuat berbagai macam Variasi suatu Tag HTML
. Sebagai contoh, bila ingin menggunakan tiga warna untuk Heading H1, kita dapat mendefinisikannya dalam tiga Class juga, hal ini dinamakan Class Selector.
Selengkapnya tentang Class CSS akan dikupas lebih banyak berikut ini:

1. Class Selector


Class Selector digunakan untuk menentukan sekelompok Elemen atau banyak Elemen untuk suatu kode CSS.

Cara Penulisan Class Selector di HTML:
<div class='nama-class'> ... Kode HTML ..</div>
Cara penulisan Class Selector di CSS:
.nama-class {property:value;}
Cara penulisan Class Selector dengan Tag HTML di CSS:
Taghtml.nama-class {property:value;}

Contoh kode HTMLdan Class Selector:

<!DOCTYPE html>
<html>
  <head>
  <title>Latihan CSS</title>
  <style>
     p {color:red;}
     p.html {color:blue;}
     .css {color:yellow;}

  </style>
  </head>
  <body>
     <p>Latihan CSS</p>
     <p class='html'> Contoh paragraf latihan HTML </p>
     <div class='css'> Contoh paragraf latihan CSS </div>
  </body>
</html>

Jangan lupa ada tanda titik "." pada setiap awal nama Class di kode CSS. Setelah Class Selector ada juga ID Selector.

2. ID Selector


ID Selector digunakan untuk memformat sebuah Elemen CSS yang mana akan muncul satu kali dalam suatu halaman Website. Jika pada Class Selector adalah banyak elemen, untuk ID Selector hanya satu elemen. Misalnya untuk memberi format CSS pada bagian Menu / Sidebar website. Bagian tersebut tidak dapat diberikan pada format CSS yang berulang ulang atau banyak, sehingga tepatnya menggunakan ID Selector.
Cara penulisannya:

Penulisan ID Selector di HTML:
<div id='ID Selector'>...Kode HTML </div>
Penulisan ID Selector di CSS:
#nama-ID Selector {property:value;}
Cara penulisan ID Selector dengan Tag HTML:
TagHTML#nama-ID Selector {property:value;}

Contoh kode HTML dan ID Selector:

<!DOCTYPE html>
<html>
  <head>
  <title>Latihan CSS</title>
  <style>
     h1 {color:red;}
     #paragraf {color:blue;}
  </style>
  </head>
  <body>
     <h1>Latihan CSS</h1>
     <div id='paragraf''> Contoh paragraf latihan HTML, Contoh paragraf latihan CSS, Contoh paragraf  latihan PHP
     </div>
  </body>
</html>

Perhatikan tanda Pagar "#" disetiap nama ID Selector. Jika pada Class Selector menggunakan tanda titik ".", untuk di ID Selector menggunakan tanda Pagar "#".

3. Komentar CSS


Komentar CSS adalah suatu kalimat sebagai penanda atau penekanan, tetapi kalimat tersebut tidak  di eksekusi sebagai kode CSS. Fungsinya yaitu untuk mempermudah bagian bagian yang ingin diberi keterangan pada bagian tertentu. Komentar dalam CSS juga tidak kalah penting, karena hadirnya komentar di dalam script CSS akan sangat membantu dalam pengkajian ulang, pengembangan kode dan lain lain.
Penulisannya ditandai dengan /* dan */.
Contoh:

h1 {color:red; font-size:20px;}   /* Ini adalah baris komentar */

4. Nesting CSS


Apa itu Nesting, Nesting adalah penulisan Selector didalam Selector.
Bila dokemen HTML yang dibuat memiliki struktur yang baik, maka tidak perlu repot repot membuat banyak Class dan ID.
Contoh:

#top {background-color: #ccc; padding: 1em;}
#top h1 {color:#ff0;}
#top p {color:red; font-weight:bold;}

Kode diatas berarti, jika ada Tag <h1> dan Tag <p> pada sebuah block dengan Id='top', maka ketentuan dalam kode CSS diatas akan berlaku. Namun jika Tag <h1> dan <p> tersebut berada diluar block dengan Id='top', maka ketentuan didalam kode CSS diatas tidak berlaku.
Seperti itu lah mengenai Nesting didalam CSS.

5. Pseudo Classes


Pseudo Class digunakan untuk menambahkan Efek Special pada Selector selector tertentu. Pada CSS, Pseudo Class bisa juga dikombinasikan dengan Class. Tidak semua Pseudo Class kompetibel dengan setiap Browser. Untuk lebih menjamin Pseudo Class berjalan dengan baik, pastikan kode <!DOCTYPE html> dimasukkan pada baris paling atas kode HTML.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Berikut macam macam dari Belajar CSS Selector Pseudo Class:

Selector :link adalah Link yang belum dikunjungi. Contohnya: a:link.
Selector :visited adalah Link yang sudah dikunjungi. Contoh: a:visited.
Selector :active adalah Link yang aktif. Contoh: a:active.
Selector :hover adalah Link yang dilewati pointer mouse. Contoh: a:hover.
Selector :focus adalah memilih elemen input yang mendapat focus. Contoh: input:focus.
Selector :first-letter adalah memilih huruf pertama dari setiap elemen yang dipilih. Contoh: p:first-letter.
Selector :first-line adalah memilih baris pertama dari setiap elemen yang dipilih. Contoh: p:first-line.
Selector :first-child adalah memilih setiap elemen yang dipilih, yang merupakan anak pertama dari parent nya. Contoh: p:first-child.
Selector :before adalah memasukkan konten sebelum elemen yang dipilih. Contoh: p:before.
Selector :after adalah memasukkan konten setelah elemen yang dipilih. Contoh: p:after.

6. Link


Link adalah suatu teks yang mempunyai alamat redirect atau tujuan ke halaman lain atau halaman itu sendiri. Selector selector yang dapat digunakan pada Link Anchor <A&gt adalah:
a:link, a:visited, a:hover, a:active dan lainya.

Kita dapat mengatur sebuah properti teks pada Class class A tersebut, termasuk color, font-size, font-weight, dan text-decoration. Sebagai contoh, untuk menentukan warna yang spesifik pada tipe link, maka kita dapat menspesifikasikan sebagai berikut:

a:link {color:red;}
a:visited {color:blue; text-decoration:none;}
a:hover {color:yellow;}
a:active {color:orange;}

Dengan menambahkan text-decoration:none, berarti kita menghilangkan garis bawah pada teks link.

Catatan:
1. a:hover harus berada setelah a:link dan a:visited pada CSS nya supaya kode berjalan semestinya.
2. a:active harus berada setelah a:hover.

Contoh:

<!DOCTYPE html> 
<html>
  <head>
  <title>Latihan CSS</title>
  <link rel='stylesheet' type='text/css' href='css/style.css'>
  </head>
  <body>
     <h1>Latihan CSS</h1>
     <a href='sutekom.blogspot.co.id' target='_blank'>Blog Seputar Komputer</a>
  </body>
</html>

Properti Anchor <a> diikuti dengan Href dan alamat link tujuan.

Sampai disini dulu artikel Belajar CSS Dasar Lanjutan ini, semoga bermanfaat. Dan nantikan artikel artikel menarik lainnya seputar Belajar CSS.

Jika bermanfaat bisa disebarkan atau share ke teman teman sekalian. Terima kasih :).

- Salam -

Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar CSS Dasar Lanjutan Mudah Dipahami"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -