Seperti janji saya sebelumnya kita akan membahas lebih lanjut tentang CSS..
nah ada beberapa aturan dalam penulisan css atau syntax css..
dan ini hanya di bagi 3 yaitu:
selector{property:value;}
selector ini merupakan tag html yang akan di definisikan seperti tag body,h1,p,dan sebagainya.
dan property adalah attribut yang akan di rubah.sedangkan value adalah definisi dari attribut tersebut.
selector ini dapat di beri attribut lebih dari 1 dan harus berada dalam tanda kurawal {},dan akhir dari value harus selalu di tutup dengan
tanda titik koma(;).
contoh:
selector{
property:value;
property:value;
property:value;
}
dan semua property dalam tanda kurawal {} akan berlaku pada selector.
contoh
body{
color:red;
background:grey;
font-family:arial;
}
body merupakan sebuah selector yang kemudian di beri attribut berupa property dalam tanda kurung kurawal yaitu color,background,dan font-family
dan kemudian property ini di definisikan oleh value yaitu red,grey, dan arial.
Dalam css ini juga kita dapat mengelompokan selector yang akan di beri attribut sama,yaitu dengan memisahkannya dengan tanda
koma(,).
contoh:
h1,h2,h3,h4,h5,h6,body,p
{color:black;
background:grey;
text-decoration:underline;
}
Seperti semua script css ini pun di lengkapi dengan fasilitas komentaryaitu dengan tanda /* dan di akhiri
dengan tanda */,atau tanda <! dan di akhiri tanda >
selector dalam css tidak hanya melulu hanya tag yang tersedia dalam HTML yang mana hal ini akan membuat tampilan nampak baku dan
monoton,oleh karena itu css menyediakan beberapa selector untuk mendefinisikan lebih detail tampilan dari html,
dan dapat di panggil kapan saja di saat kita butuhkan.
adapun selector di bagi menjadi beberapa bagian yaitu:
a.selector bebas
selector bebas ini bentuk selector dapat kita buat sendiri sesuai yang kita inginkan,dengan syarat penggunaan
property dan value tetap berupa keyword property dan value yang di sediakan css.
contoh:
gbawah{
text-decoration:underline;}
disini selector kita kita buat dengan gbawah dengan property text-decoration dengan value underline.
dan di gunakan dengan cara memberi tag <gbawah> dan di tutup dengan tag</gbawah> pada teks atau bagian yang ingin
kita beri efek css yang di definisikan oleh selector gbawah.
contoh penggunaan:
<!DOCTYPE html>
<html>
<head>
<title>selector bebas</title>
<style type="text/css>
gbawah{
text-decoration:underline;
}
</head>
<body>
<h2>penggunaan selector bebas</h2>
<gbawah>kalimat ini telah di beri efek css,dengan selector gbawah</gbawah>
</body>
</html>
b.selector dengan class
selector dengan class ini juga hanya berlaku ketika kita butuhkan saja.dengan penggunaan kata pada class
sesuai dengan yang kita inginkan.
adapun pendeklarasian class adalah dengan memberi tanda titik sebe;um nama selector..
contoh class
.teksDiTengah{
text-align:center;}
.teksDiTengah ini merupakan sebuah class dan di beri property dan value,adapun cara pemanggilannya adalah sebagai berikut.
contoh penggunaan.
<!DOCTYPE html>
<html>
<head>
<title>penggunaan class</title>
<style type="text/css">
.teksDiTengah{
text-align:center;
}
</style>
</head>
<body>
<h2 class="teksDiTengah">Teks ini akan tercetak di center</h2>
<p class="teksDiTengah">paragraf ini akan tercetak dengan teks align di tengah karena
telah di beri efek css pada class .teksDiTengah</p>
</body>
</html>
c.selector dengan id.
sama seperti kedua selector di atas,selector dengan id pun hanya berfungsi di saat kita panggil,dan
selector dengan id ini di awali dengan tanda (#) dengan penggunaan kata terserah pada kita selama tidak mengandung
spasi dan menggunakan karakter yang di bolehkan dalam penulisan selector pada css.
contoh penulisan:
#format-tulisan{
color:white;
background:green;
text-decoration:underline;
}
#format-tulisan ini merupakan sebuah id dan di beri property color,background,dan text-decoration.adapun cara pemanggilanya
adalah sama seperti pemanggilan class,yaitu menambahkan id="selector id" pada tag yang kita maksud.
contoh:
<div id="format-tulisan">tulisan ini di beri efek pada id format-tulisan</div>
<div> ini merupakan sebuah tag html yang sejenis dengan tag <p> atau paragraf.
contoh penggunaan:
<!DOCTYPE html>
<html>
<head>
<title>cara penggunaan id</title>
<style type="text/css>
#format-tulisan{
color:white;
background:green;
text-decoration:underline;
}
</style>
</head>
<body>
<h2>penggunaan id</h2>
<div id="format-tulisan">
tulisan ini telah di beri efek css pada id format-tulisan,
tulisan ini telah di beri efek css pada id format-tulisan,
tulisan ini telah di beri efek css pada id format-tulisan,
tulisan ini telah di beri efek css pada id format-tulisan.
</div>
</body>
</html>
css ini tidak hanya di gunakan untuk pemformatan tulisan saja,tapi juga mendefinisikan tata-letak/pemetaan content.
pemberian margin,dan padding,bahkan luas area dan beberapa definisi lainnya.disini kita dapat memberikan selector sebuah class.
dimana selector ini bisa berupa tag html,atau pun selector id,dimana pada selector id.kita bisa tambahkan attribut pemetaan
dan pada class kita beri attribut untuk format tampilan.
contoh.
#selector{
property:value;
property:value;
property:value;
property:value;
}
.class{
property:value;
property:value;
property:value;
property:value;
}
dan cara pemanggilannya adalah :
<tag id="selector" class="class">..teks di dalam efec id dan class</tag>
Hebatnya lagi kita dapat mencampur selector id dengan class sesuai kebutuhan,pemberian class juga dapat di
berikan pada id atau pun tag supaya lebih spesifik yaitu dengan cara.
#selector.class
dan dapat di berikan pada tag dengan cara:
tag.class
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
penggunaan class dan id</title>
<style>
body {
background-color: #666666;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
color: #000000;
background-color: #CCCCCC;
height: 200px;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 10px;
}
#description {
position:absolute;
left:14px;
top:133px;
width:1000px;
height:30px;
z-index:1;
margin-right: auto;
margin-left: auto;
}
#content-box {
position:absolute;
top:403px;
width:1000px;
height:auto;
z-index:5;
padding: 10px;
background-color: #FFFFFF;
left: 8px;}
#banner-w1 {
position:absolute;
top:300px;
width:280px;
height:auto;
z-index:2;
background-color: #CCCCCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#banner-w3 {
position:absolute;
top:300px;
width:280px;
height:auto;
z-index:3;
background-color: #CCCCCC;
left: 730px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#banner-w2 {
position:absolute;
left:319px;
top:300px;
width:380px;
height:auto;
z-index:4;
background-color: #CCCCCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
.format-teks{
color:white;
font-family:comic sans ms;
text-align:justify;
text-decoration:blink;
}
h2,h3,h4,p{
color:green;
font-family:arial;
text-align:center;
text-decoration:underline;
}
p.italic{
color:red;
text-align:justify;
font-family:comic sans ms;
text-decoration:none;
}
</style>
</head>
<body>
<div id="header">Ini adalah header</div>
<div id="description">ini adalah deskripsi</div>
<div id="banner-w1" class="format-teks">
<h2> ini adalah heading</h2>
ini adalah tulisan yang di beri efek pada class format-teks dengan pemetaan oleh id banner-w1
<p>dan ini adalah tulisan yang di beri efek css pada tag p</p>
<p class="italic">dan ini adalah tulisan yang di beri efek css pada class italic pada tag p</p>
</div>
<div id="banner-w2">
<h2>ini heading h2</h2>
<h3>ini heading h3</h3>
<h4>ini heading h4</h4>
ini tulisan pada id banner-w2 tanpa efek class format-teks
<p>ini efek pada p</p>
<p class="italic">ini tulisan pada tag p dengan class italic</p>
</div>
<div id="banner-w3" class="format-teks">
<h2>ini adalah heading h2</h2>
tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,
tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,
tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,
tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,
tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,tulisan ini menggunakan efek class format-teks,
</div>
</body>
</html>
selamat mencoba...:D
untuk beberapa property standar dalam css,akan kita bahas dalam postingan selanjutnya...
makasih infonya, jadi tambah ilmu nich ane
BalasHapussama-sama gan :D
Hapus