mengenal CSS part siji (1)
Ok malem semua ( jam di laptop saya menunjukkan waktu 9.35
), hari ini saya mau share sedikit tentang CSS ....
Ok pasti udah pada tau dong CSS itu apa , CSS adalah singkatan dari cascading style sheet yang dimana gunanya ada untuk mengubah tampilan website menjadi lebih indah dan menarik...
CSS terdiri dari 3 macam yaitu :
- CSS external = CSS yang ditaruh pada file terpisah sendiri
- CSS internal = CSS yang ada didalam file web itu sendiri
- CSS inline = CSS yang langsung di embed ke tag tujuan
- id : dimana merupakan entiti yang unik dimana hanya 1 object DOM / HTML tag yang berhak memilikinya. (ditandai tanda # pada css)
- class : dimana kayak class pada OO(object oriented) dimana bisa dipake pada semua DOM /HTML (ditandai tanda . pada css)
Teori yang diatas bisa dilanggar :D.. dimana pada tag html klo buat styling kita bisa kasih 2 id dan 2 - 2 nya pun akan ikut mengikuti CSS tersebut.. jadi sebenernya bisa dilanggar tapi jangan dilanggar ya :D.. karena akan berdampak bila kita menggunakan javascript
contoh code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>testing ya</title>
<style type="text/css">
/*id nya bisa dipake banyak kali :D*/
#blackBack{
color:white;
width:100px;
padding:10px;
height:100px;
background-color:black;
}
</style>
</head>
<body>
<p id="blackBack">Testing the result of blackBack ID 1</p>
<p id="blackBack">Testing the result of blackBack ID 2</p>
<!--script here :
why here ? i ran the script until body child object is ready
-->
<script>
var temp = document.getElementById("blackBack");
console.log(temp); /*klo mau lihat hasilnya di console ya :D*/
/*
^ hasilnya adalah Testing the result of blackBack ID 1, dimana javascript mengambil isi dari
id yang pertama, so pakailah css with the right direction
*/
</script>
</body>
</html>
note : lebih baik menggunakan class pada CSS karena bisa dipake banyak kali
Ok berikut contoh css internal :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>testing ya</title>
<style type="text/css">
/*css internal*/
.test{
display:block;
width:400px;
height:200px;
padding:20px;
margin:0 auto;
background-color:black;
color:white
}
</style>
</head>
<body>
<span class="test">
Testing the class internal gan :d
</span>
</body>
</html>
Contoh external css : dimana nantinya ada 2 file yaitu file html nya (static web) + .css nya
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>testing ya</title>
<!-- using this tag to connect the css gan-->
<link rel="stylesheet" href="testingGan.css"/>
</head>
<body>
<span class="test">
Testing the class internal gan :d
</span>
</body>
</html>
testingGan.css
@charset "utf-8";
/*css external*/
.test{
display:block;
width:400px;
height:200px;
padding:20px;
margin:0 auto;
background-color:black;
color:white
}
interal css : menggunakan attribute style , konsepnya sama kita styling didalam attribute tersebut
Note : lebih baik dihindari gan karena membuat tampilan tag menjadi berantakan, lebih baik gunakan internal sama external css aja
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>testing ya</title>
</head>
<body>
<span style="display:block;
width:400px;
height:200px;
padding:20px;
margin:0 auto;
background-color:black;
color:white;"
>
Testing the class internal gan :d
</span>
</body>
</html>
