pengenalan dasar css

Pengenalan Dasar CSS

Disini kita akan Belajar Coding Dasar CSS. Ini adalah tutorial seri kedua dari Tutorial Belajar CSS Dari Dasar

Di Tutorial seri kedua ini kita akan berkenalan dengan Selector, dan selanjut nya yaitu cara menggunakan CSS untuk mempercantik tampilan sebuah web yang di buat dengan HTML.

Sebelum lanjut ke materi Coding Dasar CSS anda harus sudah mengenal terlebih dahulu bahasa dasar untuk membuat website yaitu html, bagi yang belum, bisa mempelajari nya di sini Belajar HTML

Syntax / Coding Dasar CSS

Di sini kita akan berkenalan dahulu dengan Coding Dasar CSS, setelah anda paham materi selanjutnya adalah cara menggunakan CSS di html.

Ada beberapa aturan untuk menulis coding atau code program CSS diantaranya :

  • Selector : Selector Adalah Html Tag atau html element yang akan di berikan style oleh css.
  • Property : Property adalah attribut dari html tag.
  • Value : Value adalah nilai yang di berikan kepada Property.

Contoh Coding CSS nya seperti ini :

h1 {

color : blue;

}

pada contoh coding dasar css di atas untuk memberi warna biru dapat kita analisa :

  • h1 : adalah selector nya.
  • color : adalah property nya.
  • blue : adalah value nya.

Selain menggunakan html tag sebagai selector css juga menyediakan beberapa tipe selector lain diantaranya :

 

Selector CSS ID

Selector ini menggunakan attribut ID yang di berikan pada html tag, contoh coding nya :

Coding pada HTML



<div id='header'></div>


Coding pada CSS


#header {

color:blue;

}

mari kita bedah koding nya, pada koding html terdapat tag div yang biasanya digunakan untuk membuat layout dasar sebuah website.

pada html tag div tersebut di berikan attribut id yang berisi nilai header

Untuk memberi sentuhan CSS pada selector tersebut, kita bisa menggunakan CSS Selector ID dengan aturan :

  • Menggunakan tanda pagar # di awal sebagai penanda bahwa akan menggunakan ID Selector
  • Setelah Tanda Pagar di ikuti oleh nama dari attribut ID yang kita berikan di tag html.

 

Selector CSS Class

Selector ini mirip dengan Selector ID hanya perbedaan nya attribut yang di gunakan di html nya adalah class

contoh coding nya :

coding html



<div class='siderbar'></div>


coding css

.sidebar {

color:red;

}

terlihat bahwa perbedaan nya adalah untuk Selector CSS class menggunakan . (titik) di awal sebelum nama selector nya.

 

Selector CSS Universal

Selector ini menggunakan tanda bintang * dan style css dari selector ini di aplikasikan atau berdampak pada seluruh element dalam website.

contoh coding :

* {
font-family: Arial, Helvetica, sans-serif;
}

coding css di atas akan merubah tampilan font website.

 

Group Selector CSS

Selector ini bisa anda gunakan untuk beberapa html tag sekaligus, contoh coding :


h1, h2 {

color:blue;

}

coding css di atas akan memberikan style css pada 2 tag html, anda bisa menggunakan lebih dari 2 tag html pada Group Selector CSS. Pada Group Selector CSS ini setiap html element yang akan di berikan style CSS dipisahkan oleh koma ,

anda juga bisa menggunakan group selector css untuk Selector ID, contoh coding :


#header, #sidebar {

color:blue;

}

 

Selector CSS Turunan

Selector ini memberikan style untuk html elemen turunan nya, contoh coding :

coding html


<body>


<h1>Ini Judul</h1>


</body>

coding css


body h1 {

color red;

}

dari contoh coding di atas terlihat bahwa elemen html h1 adalah turunan dari elemen html body.

dan kita memberikan style css pada elemen html h1 yang menjadi turunan dari elemen html body.

 

Saya rasa materi saat ini cukup untuk mengenal coding dasar css, di seri tutorial belajar css selanjutnya kita akan belajar cara menyisipkan coding css ke dalam html.

Tutorial Selanjutnya :

Cara Menggunakan CSS Di HTML

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *