Transcript
CSS DASAR CSS DASAR CSS DASAR CSS DASAR
� Tentang CSS
� Kegunaan CSS
� Aturan Penulisan
� CSS Background
� CSS Font
� CSS Teks
� CSS Border
� Margin
� Contoh Layout Web menggunakan CSS
CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Keuntungan menggunakan CSS Keuntungan menggunakan CSS Keuntungan menggunakan CSS Keuntungan menggunakan CSS
· Memisahkan presentastionpresentastionpresentastionpresentastion sebuah dokumen dari contentcontentcontentcontent document itu sendiri.
· Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
· Mempercepat proses rendering/pembacaan HTML
� Inline style sheet Penulisan didalam elemen HTML
� Misalnya :<P STYLE =“FONT-SIZE:12pt; FONT-
FAMILIY:COURIER;FONT-VARIANT: NORMAL;
COLOR: NAVY;”>
<H1 STYLE=”color:red; font-size:18pt”>
<BODY STYLE=“FONT-SIZE:X-LARGE”>
� Style dipisah dan dikumpulkan pada bagian HEAD
� Contoh:<head><style>body {color:#ffffff; background:black;font-family:Verdana, Arial;font-size:12px;
}p { line-height:20px; }h1{ color:brown; } </style></head>
� Sama seperti embedded style tetapi dibuat pada file terpisahfile terpisahfile terpisahfile terpisah dengan ekstension .css.css.css.css
� Sebuah dokumen bisa menggunakan lebih dari satu file CSS
� Di-import (dipanggil) pada bagian HEADHEADHEADHEAD
� Ada dua cara:
1. <link rel="stylesheet"type="text/css”href="style.cssstyle.cssstyle.cssstyle.css" />
2. <style>@import "style.cssstyle.cssstyle.cssstyle.css";</style
� Comments biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya,
� Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:/* isi Comments *//* isi Comments *//* isi Comments *//* isi Comments */
Contoh:
H1 { color:blue;} H1 { color:blue;} H1 { color:blue;} H1 { color:blue;} /* H1 elements akan menjadi biru *//* H1 elements akan menjadi biru *//* H1 elements akan menjadi biru *//* H1 elements akan menjadi biru */
Tags.H1.color = Tags.H1.color = Tags.H1.color = Tags.H1.color = ““““blueblueblueblue””””; ; ; ; /* H1 menjadi biru *//* H1 menjadi biru *//* H1 menjadi biru *//* H1 menjadi biru */
�
Selector Selector Selector Selector
Terdiri dari tag,class,ID
Declaration Declaration Declaration Declaration
Mendeskripsikan property dan value
h1{ color:brown; }
Keterangan :
Selector : H1 Properti : Color Value : brown
Tag/Elemen Tag/Elemen Tag/Elemen Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
Class Class Class Class
Diawal penulisan menggunakan tanda titik,
body {color:#ffffff; background:black;font-family:Verdana, Arial;font-size:12px;}p { line-height:20px; }h1{ color:brown; }.isiteks{font: bold 120% Arial,sans-serif;color: #334d55;margin: 0px;padding: 0px;}
� Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda.
� Contoh#judul{font: bold 150% Arial,sans-serif;color: #ffffff;margin: 0px;padding: 0px;}
� BackgroundBackgroundBackgroundBackground----colorcolorcolorcolorBody{Background-color : green; }
� BackgroundBackgroundBackgroundBackground----ImageImageImageImageBody{Background-color : green; } Background-image : url(gambar1.jpg); }
� BackgroundBackgroundBackgroundBackground----attachment attachment attachment attachment Body { Background-attachment : scroll; }
� BackgroundBackgroundBackgroundBackground----Repeat Repeat Repeat Repeat Body { Background-repeat : repeat; Background-image : url(image/gambar1.jpg); }
� BackgroundBackgroundBackgroundBackground----positionpositionpositionpositionBody {
Background-repeat : no-repeat; Background-image : ur l(image/gambar1.jpg); Background-position : bottom center;}
body {color:#ffffff; background:black;font-family:Verdana, Arial;font-size:12px;}p { line-height:20px; }h1{ color:brown; }.isiteks{font: bold 120% Arial,sans-serif;color: #334d55;margin: 0px;padding: 0px;
}#judul{font: bold 150% Arial,sans-serif;color: #ffffff;margin: 0px;padding: 0px;
}
Property Font � Font-family P { Font-family : Arial,Helvetica; }
� Font-size (satuan em,pt,px,mm,cm,%) P { Font-size : 24em; }
� Font-style (nilai : oblique,italic,normal) P { Font-style : oblique; }
� Font-variant (nilai : normal,small-caps) P {
Font-family : Arial,Helvetica; }
� Font-weight (nilai :normal,bold,bolder,lighter,100-900) P { Font-weight : bolder; }
Property teks Property teks Property teks Property teks 1. color 1. color 1. color 1. color
P {
color :red; }
2. teks2. teks2. teks2. teks----align (nilai left,right,center,justify) align (nilai left,right,center,justify) align (nilai left,right,center,justify) align (nilai left,right,center,justify)
P {
Text-align :justify; }
3. texttexttexttext----decoration (nilai : none,underline,overline,linedecoration (nilai : none,underline,overline,linedecoration (nilai : none,underline,overline,linedecoration (nilai : none,underline,overline,line----through,blink) through,blink) through,blink) through,blink)
P {
Text-decoration :overline; }
4. text4. text4. text4. text----transform (nilai : none,capitalize,uppercase,lowercase) transform (nilai : none,capitalize,uppercase,lowercase) transform (nilai : none,capitalize,uppercase,lowercase) transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize; }
5. Letter5. Letter5. Letter5. Letter----spacing spacing spacing spacing
P {
letter-spacing : 20px; }
6. Teks6. Teks6. Teks6. Teks----indent indent indent indent
P {
Text-indent : 50px; }
Property list Property list Property list Property list
1. List1. List1. List1. List----stylestylestylestyle----type (nilai : disc,circle,square,lowertype (nilai : disc,circle,square,lowertype (nilai : disc,circle,square,lowertype (nilai : disc,circle,square,lower----roman,upperroman,upperroman,upperroman,upper----roman,none,lowerroman,none,lowerroman,none,lowerroman,none,lower----alpha,upperalpha,upperalpha,upperalpha,upper----alphaalphaalphaalpha)
Ul {
List-style-type : disc ; }
2. List2. List2. List2. List----stylestylestylestyle----image (nilai : url,none) image (nilai : url,none) image (nilai : url,none) image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ; }
3. List3. List3. List3. List----stylestylestylestyle----position (nilai : inside,outside) position (nilai : inside,outside) position (nilai : inside,outside) position (nilai : inside,outside)
Ul {
List-style-position : inside; }
Property Border Property Border Property Border Property Border
1. border1. border1. border1. border----style (nilai : style (nilai : style (nilai : style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) .b1 {
Border-style-type : groove ; } 2. border2. border2. border2. border----bottombottombottombottom----style (nilai : style (nilai : style (nilai : style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) none,dotted,dashed,solid,double,groove,ridge,inset,outset) .b1 {
Border-bottom-style : groove ; } 3. border3. border3. border3. border----bottombottombottombottom----width () width () width () width () .b1 {
border-bottom-width :10px; } 4. border4. border4. border4. border----bottombottombottombottom----color () color () color () color () .b1 {
border-bottom-color :red; }
� Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
� Padding : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
Pd css .kotak { Padding-top : 25px; Padding-right : 25px; Padding-bottom : 25px; Padding-left: 25px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
� style dapat digunakan dengan memakai tag kontainer <SPAN> dan <DIV>
� Digunakan secara inline
� Tag ini biasanya berfungsi untuk meng-override style yang sudah ada sebelumnya
<div id="atas">
<h1>Welcome to My Web</h1>
</div>
<div id="left">
<p>Navigate:</p>
<p><a href="index.html">Home</a><br />
<a href="news.html">News</a><br />
<a href="about.html">About Us</a><br />
<a href="contact.html">Get in Touch</a></p>
</div>
top related