Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Firman Wahyudhie Cascading STYLE SHEET
2
CSS DASAR Tentang CSS Kegunaan CSS Aturan Penulisan CSS Background
CSS Font CSS Teks CSS Border Margin Contoh Layout Web menggunakan CSS
3
Tentang 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 Memisahkan presentastion sebuah dokumen dari content document itu sendiri. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web Mempercepat proses rendering/pembacaan HTML
4
Cara Penulisan CSS Inline style sheet Penulisan didalam elemen HTML
Misalnya : <P STYLE =“FONT-SIZE:12pt; FONTFAMILIY: COURIER;FONT-VARIANT: NORMAL; COLOR: NAVY;”> <H1 STYLE=”color:red; font-size:18pt”> <BODY STYLE=“FONT-SIZE:X-LARGE”>
7
Embedded Style 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>
10
External File CSS Sama seperti embedded style tetapi dibuat pada file terpisah dengan ekstension .css Sebuah dokumen bisa menggunakan lebih dari satu file CSS Di-import (dipanggil) pada bagian HEAD Ada dua cara: 1. <link rel="stylesheet"type="text/css” href="style.css" /> 2. "style.css";</style>
14
Komentar dalam CSS 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 */ Contoh: H1 { color:blue;} /* H1 elements akan menjadi biru */ Tags.H1.color = “blue”; /* H1 menjadi biru */
15
Aturan Penulisan CSS Selector Terdiri dari tag,class,ID Declaration
Mendeskripsikan property dan value h1{ color:brown; } Keterangan : Selector : H1 Properti : Color Value : brown
17
Macam-macam selector Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector Class Diawal penulisan menggunakan tanda titik,
18
Contoh 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;
19
ID Diawali dengan tanda #, dapat digunakan
untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan dengan ID berbeda. Contoh #judul{ font: bold 150% Arial,sans-serif; color: #ffffff; margin: 0px; padding: 0px; }
22
Background pada CSS Background-color Body{ Background-color : green; }
Background-Image Background-image : url(gambar1.jpg); } Background-attachment Body { Background-attachment : scroll; } Background-Repeat Background-repeat : repeat; Background-image : url(image/gambar1.jpg); } Background-position Background-repeat : no-repeat; Background-image : ur l(image/gambar1.jpg); Background-position : bottom center;}
23
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;
24
CSS Font Property Font Font-family P {
Font-family : Arial,Helvetica; } Font-size (satuan em,pt,px,mm,cm,%) Font-size : 24em; } Font-style (nilai : oblique,italic,normal) Font-style : oblique; } Font-variant (nilai : normal,small-caps) Font-family : Arial,Helvetica; } Font-weight (nilai :normal,bold,bolder,lighter, ) Font-weight : bolder; }
25
CSS Teks Property teks 1. color P {color :red; }
2. teks-align (nilai left,right,center,justify) P { Text-align :justify; } 3. text-decoration (nilai : none,underline,overline,line-through,blink) P {Text-decoration :overline; } 4. text-transform (nilai : none,capitalize,uppercase,lowercase) P {Text-transform : capitalize; } 5. Letter-spacing P {letter-spacing : 20px; } 6. Teks-indent P {Text-indent : 50px; }
26
CSS List Property list 1. List-style-type (nilai : disc,circle,square,lowerroman, upper-roman,none,lower-alpha,upper-alpha) Ul {List-style-type : disc ; } 2. List-style-image (nilai : url,none) Ul {List-style-image : url(gambar1.jpg) ; } 3. List-style-position (nilai : inside,outside) Ul {List-style-position : inside; }
27
CSS Border Property Border 1. border-style (nilai :
none,dotted,dashed,solid,double,groove,ridge,inset,outset) .b1 {Border-style-type : groove ; } 2. border-bottom-style (nilai : .b1 {Border-bottom-style : groove ; } 3. border-bottom-width () .b1 {border-bottom-width :10px; } 4. border-bottom-color () .b1 {border-bottom-color :red; }
28
Margin Margin : pengaturan batas
atas,bawah,kanan,kiri pada halaman web Body { Margin-top : 4cm; Margin-right : 3cm; Margin-bottom :3cm; Margin-left : 4cm; }
29
Padding 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; }
30
Span & DIV style dapat digunakan dengan memakai tag
kontainer <SPAN> dan <DIV> Digunakan secara inline Tag ini biasanya berfungsi untuk mengoverride style yang sudah ada sebelumnya
31
Contoh DIV <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>
Presentasi serupa
