PXA

Apa itu CSS

Admin / 08-08-2020

CSS adalah kumpulan text buat memberikan style interaktif dan menarik ke dalam HTML sehingga tampak seperti web yang menarik.CSS sendiri terdiri dari 3 jenis yaitu eksternal,internal, dan inline.

  • Eskternal

    biasanya CSS terletak pada head HTML dan cara pemanggilannya cukup sederhana yaitu : <link rel="stylesheet" href="style.css"> dengan kode tersebut anda berhak memanggil css dari luar.

  • Internal

    biasanya CSS terletak di dalam head bukan berupa link tapi seperti berikut : <style>body{background: #ff0}</style> dengan kode tersebut anda sudah bisa melakukan styling pada HTML dengan CSS

  • Inline

    biasanya CSS terletak pada tag HTML seperti berikut : <p style="color:#ff0">coba CSS </p> dengan code tersebut Anda sudah mengubah text menjadi merah.


Jika ingin memberikan sebuah animation CSS sudah menyediakan tag @keyframes

contoh sederhananya begini:

 	
body{background: #ff0;animation: myfirst 2s linear 2s infinite alternate;} 

@keyframes myfirst {
  0%   {background-color:red;}  
  50%  {background-color:green;}  
  100% {background-color:blue;}
}

Pada contoh diatas kita sudah menambahkan css animation pada coding kita.selama 2 detik background body kita akan berubah sesuai yang kita set di @keyframes


Jika kita ingin membangun website yang responsive di mobile,tablet,desktop kita memerlukan sesuai tag CSS yang bernama media queries.

Untuk memasukkan media queries sangat mudah , Anda hanya perlu memasukkan coding berikut di dalam <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

lalu dalam tag <style> akan ditambahkan :


	@media screen and (max-width:993px){
	 p{
	  font-size:10px;
	}
}

Pada contoh diatas kita sudah menambahkan css media query pada coding kita.Pada viewport 993px kita sudah berhasil mengubah font-size tag <p> menjadi 10px.

Bagaimana kawan tentang CSSnya , menyenangkan bukan belajar bahasa pemograman web.

Leave a Reply

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

Masih Bingung,
Punya Pertanyaan