Latihan CSS
CSS (CASCADING STYLE SHEET) CSS DASAR • Tentang CSS • Kegunaan CSS • Aturan Penulisan • CSS Background • CSS Font • CSS Teks • CSS Border • Margin • Contoh Layout Web menggunakan CSS
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 CSS • Memisahkan presentastion sebuah dokumen dari content document itu sendiri. • Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web • Mempercepat proses rendering/pembacaan HTML.
Cara penulisan CSS Inline style sheet Penulisan didalam elemen HTML
Embedded Style Sheet Penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>
Linked Style Sheet Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
Terdiri dari tag,class,ID Declaration Aturan penulisan CSS Selector Terdiri dari tag,class,ID Declaration Mendeskripsikan property dan value Contoh H1 { Color : #0000FF } Keterangan : Selector : H1 Properti : Color Value : #0000FF
Macam – Macam Selector Tag/Elemen Setiap tag yang ada pada HTML bisa dijadikan selector Class Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
ID Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda
CSS Background Property background 1. Background-color Contoh: Body { Background-color : green; } 2. Background-Image Background-image : url(gambar1.jpg); 3. Background-attachment Background-attachment : scroll; 4. Background-Repeat Body { Background-repeat : repeat; Background-image : url(image/gambar1.jpg); } 5. Background-position Background-repeat : no-repeat; Background-position : bottom center
CSS Font Property Font 1. Font-family P { Font-family : Arial,Helvetica; } 2. Font-size (satuan em,pt,px,mm,cm,%) Font-size : 24em; 3. Font-style (nilai : oblique,italic,normal) Font-style : oblique; 4. Font-variant (nilai : normal,small-caps) 5. Font-weight (nilai :normal,bold,bolder,lighter,100-900) Font-weight : bolder;
CSS Teks Property teks 1. color P { color :red; } 2. teks-align (nilai left,right,center,justify) Text-align :justify; 3. text-decoration (nilai : none,underline,overline,line-through,blink) Text-decoration :overline; 4. text-transform (nilai : none,capitalize,uppercase,lowercase) Text-transform : capitalize; 5. Letter-spacing letter-spacing : 20px; 6. Teks-indent P { Text-indent : 50px;}
CSS List Property list 1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha) Ul { List-style-type : disc ; } 2. List-style-image (nilai : url,none) List-style-image : url(gambar1.jpg) ; 3. List-style-position (nilai : inside,outside) List-style-position : inside;
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 : none,dotted,dashed,solid,double,groove,ridge,inset,outset) Border-bottom-style : groove ; 3. border-bottom-width () border-bottom-width :10px; 4. border-bottom-color () border-bottom-color :red;
Margin dan Padding Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web Body { Margin-top : 4cm; Margin-right : 3cm; Margin-bottom :3cm; Margin-left : 4cm; } Margin : 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;
Pada file HTML <html> <head> <link rel=”stylesheet” type=”text/css” href=”cssku.css”> </style> </head> <body> <p class=kotak > teks1 <p> </body> </html>
Latihan Membuat layout halaman web menggunakan CSS File cssku.css #header { position:static; height:90px; width:800px; background-color:#666666; padding-top:4%; padding-right:2% padding-bottom:2%; padding-left:4%; line-height:0.5px; left:50px; right:50px; } .judul1 { font-family:verdana,helvetica,sans-serif; font-size:1em; color:#ffffff; letter-spacing:1em; } .judul2 { font-family:verdana,helvetica,sans-serif; font-size:1.5em; color:#ffff00; text-decoration:line-underline; .judul3 { letter-spacing:0.25em;
#nav_left{ background-color:#999999; height:40px; width:170px; line-height:0.1; padding:0.5em; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#ffffff; } #nav_left_link { font-size:10px; background-color:#666666; height:415px; border-bottom-color:#ffffff; } #nav_left_menu_caption { background-color:#666666; height:20px; width:170px; line-height:0.1; padding:0.5em; border-bottom-width:1px; border-bottom-style:solid; border-bottom-width:#ffffff; .menu_caption { font-family:verdana,arial,helvetica,sans-serif; font-size:1em; color:#ffff00; text-align:center; vertical-align:middle;
#stylelink a:link, #stylelink a:visited { display:block; border-top:1px solid #ffffff; border-bottom:1px solid #cccccc; background-color:#666666; font-weight:bold; color:#ffff00; width:100px; padding-top:3px; padding-right:0px; padding-bottom:3px; padding-left:10px; text-decoration:none; } #stylelink a:hover { border-top:1px solid #cccccc; background-color:#0000hh; background-image:none; font-weight:bold; text-decoration:none; color:#ffffff; } #bawah{ background-color:#999999; height:30px; width:800px; padding-right:2em; padding-left:4em; padding-top:1em; padding-bottom:1em;} .copyright_bawah{ font-family:verdana,arial,helvetica,sans-serif; font-size:10px;
.isi { font-family:verdana,arial,helvetica,sans-serif; font-size:1.2em; color:#666666; line-height:2em; text-align:justify; vertical-align:none; } body { background-color:#cccccc; margin:auto; padding:0.2em; p { font-size:10px; color:#ffffff; text-align:center; width:800px; } #box_isi { position : absolute; height:auto; width:615px; left:204px; top:100px; padding:1em; border-left-width:1px; border-left-style:dotted; border-left-color:#666666; border-right-width:1px; border-right-style:dotted; border-right-color:#666666;}
Thanks