/**/

Read     Yuk sob, kita belajar dan mengenal CSS.

Yuk sob, kita belajar dan mengenal CSS.

CSS
Hirzi Widyan Putra

Halo sob, kali ini saya akan bahas mengenai CSS Sudah pernah dengar? atau baru kali ini dengar kata CSS? Apa itu? Seperti apa? dan Fungsinya untuk apa? Mari disimak sob.

CSS atau kepanjangan dari (Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Atau secara singkatnya dengan menggunakan CSS ini sobat akan dengan mudah mengubah secara keseluruhan warna, gaya tulisan, dan tampilan di website yg sobat inginkan.

Untuk belajar css ini sobat perlu kesabaran dan logika juga loh, tidak perlu terburu-buru. Dimulai saja dengan merubah warna background, merubah gaya tulisan, ukuran tulisan, dan mencoba properti-properti CSS.

Syntax CSS

Syntax CSS Terdapat 2 blok penulisan yaitu selector dan declaration block.

Selector adalah elemen HTML yang akan kita atur style nya.

  • Dengan CSS Selector memungkinkan sobat untuk memilih dan memanipulasi elemen HTML.
  • CSS Selector digunakan untuk "menemukan" (atau menyorot) elemen HTML berdasarkan id, class, type, atribut dan banyak lagi.

Sedangkan Declaration block merupakan isi dari property dan nilai dari CSS yang mengatur atau mengendalikan selector, diawali dengan tanda kurawal buka '{' dan diakhiri dengan tanda kurawal tutup '}'.

  • property dan value, ini merupakan 2 hal yang tidak bisa dipisahkan, dan sama - sama dituliskan di dalam declaration block. property, merupakan suatu attribut yang nilainya akan dirubah, sedangkan value merupakan nilai dari property tersebut.
  • Pemberian nilai dari property digunakan titik dua ( : ) dan akhir dari property digunakan titik koma ( ; )

Penempatan koding CSS

Ada 3 cara penempatan syntax css sob,

  • Internal CSS, menuliskan secara langsung koding CSS kedalam file HTML.

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>CSS 1</title>
<style type="text/css">
p {color: blue;}
h1 {color: yellow;}
body {background-color: black;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Hasilnya : 


  • External CSS, membuat file CSS tersendiri dengan eksistensi / tipe file *.css sebagai contoh misal saya membuat file CSS dengan nama file contoh.css dan saya simpan dengan format .css , File CSS ini terpisah dari file Html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. Maka hasilnya browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS yang telah kita buat.

Contoh :

HTML nya :

<!DOCTYPE html>
<html>
<head>
<title>CSS 2</title>
<link rel="stylesheet" type="text/css" href="contoh.css"/>
</head>
<body>

<h1>Contoh CSS External</h1>
<p>Gilacoding.com</p>

</body>
</html>

CSS nya :

body {
	background-color:black;
}
h1 {
	color:pink;
}
p {
	color:cyan;
}

Hasilnya :

  • Inline CSS, menuliskan secara langsung koding CSS kedalam tag HTML.

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>CSS 3</title>
</head>
<body style="background-color:black;">

<h1 style="color:green;">Contoh CSS External</h1>
<p style="color:white;">Gilacoding.com</p>

</body>
</html>

 Hasilnya :

Selector CLASS dan ID

  • Selector ID, merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman dan juga menentukan style nya. Jadi selector ID ini tidak bisa dipanggil lebih dari satu. Jika ada dua, maka hanya bekerja pada bagian pertama saja. selector ini juga bisa untuk me link pada section dalam satu halaman, misalnya kalau sobat nge klik menu dengan selector id="home" , maka sobat akan dibawa ke section home pada satu halaman. Bisa dengan effect scroll ataupun fade tergantung dari pembuatnya. selector ID dituliskan dengan awalan pagar atau sharp atau kres "#" seperti itu. Untuk HTML nya menggunakan id="IDnyaapa". 

Oke sekarang contoh : 

Pada CSS nya :

#content {
    background-color: black;
    color: pink;
    font-size: 20px;
}

Pada HTML nya :

Contoh dengan id
<div id="content">Contoh dengan ID</div>
  • Selector Class, juga digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot " . " pada css dan class="classnyaApa" pada HTML. oh iya, dalam satu element juga bisa dipanggil untuk beberapa class, spasi sebagai pemisah. Misal class="class1 class2".

Contoh :

CSS :

.content {
	width: 300px;
	height: 100px;
}
 
.content-blue {
	background-color: blue; 
	font-weight: bold;
}

HTML :

Contoh dengan Class
<div class="content content-blue">Contoh dengan Class</div>

Cara membuat Komentar pada CSS

Komentar digunakan untuk menjelaskan kode sobat, dan dapat membantu anda ketika sobat ingin mengeditnya lagi di kemudian hari. Komentar akan diabaikan oleh browser, jadi sobat tidak usah khawatir akan mengganggu koding CSS yang lain.

Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar CSS juga bisa di tulis melalui beberapa baris.

Contoh :

/*Ini adalah Contoh Komentar*/
p {
color:red; /*merubah warna text jadi merah https://gilacoding.com/*/
text-align:center;
}
/*Ini adalah komentar dengan
ini juga komentar tapi 2 baris*/

Oke sekian dulu sob belajar CSS dasar nya, gimana? udah mulai memahami? kalau belum silahkan dibaca ulang dan dipraktekkan yaa dan jika ada yang ingin ditanya kan silahkan berkomentar dibawah ini.

Selamat bereksperimen sekreatif mungkin sob, ohya untuk properti-properti css nya dipost selanjutnya ya. Semangat!

Terimakasih

Next Post 
Top