CSS - WEB
NONCSS.HTML <html> <head> <title>Mode HTML saja</title> </head> <body bgcolor="#D7E7F3"> <font face="verdana" size=”2”> <p>Saya hanyalah sebuah situs tanpa adanya <b> <font color="red">Cascading Style Sheet(CSS) </font> </b></p> <p>Oleh karena saya merasa tubuh saya kurang efesien tanpa adanya <b><font color="red">Cascading Style Sheet(CSS) </font></b></p> <p>Saya harap pencipta saya menambahkan </b> pada tubuh saya. </p> </body> </html>
LATCSS01.HTML <html> <head> <title>Mode HTML saja</title> </head> <body bgcolor="#D7E7F3"> <font face="verdana" size=”2”> <p>Saya hanyalah sebuah situs tanpa adanya <b> <font color="red">Cascading Style Sheet(CSS) </font></b></p> <p>Oleh karena saya merasa tubuh saya kurang efesien tanpa adanya <b> <font color="red">Cascading Style Sheet(CSS)</font></b></p> <p>Saya harap pencipta saya menambahkan <b> <font color="red">Cascading Style Sheet(CSS)</font></b> pada tubuh saya.</p> </font> </body> </html>
LATCSS02.HTML <html> <head> <title>Mode HTML dan CSS</title> <style type="text/css"> body{background-color: white; font-family: verdana; font-size: 12px} b{color: red} x{font-style:italic; font-weight:bold; text-decoration:underline; color: blue; font-size:20px} p{text-transform:uppercase} </style> </head> <body> <p>Saya hanyalah sebuah situs tanpa adanya <b>Cascading Style Sheet(CSS)</b> <p>Oleh karena <x>saya</x> merasa tubuh saya kurang efesien tanpa adanya <b>Casscading Style Sheet(CSS)</b></p> <p>Saya harap pencipta <x>saya</x> menambahkan <b>Casscading Style Sheet</b> pada tubuh saya.</p> </body> </html>
LATCSS03.HTML <html> <head> <title>Contoh CSS ke dua</title> <style type="text/css"> body{font-family: verdana; font-size: 12px} b,i,u{color: blue; font-family: arial} </style> </head> <body> <p>menggabungkan atau mengelompokkan tag-tag HTML(selector)</p> <p><b>Ini huruf tebal</b></p> <p><i>Ini huruf italic</b></p> <p><u>Ini huruf underlinE</b></p> </body> </html>
LATCSS04.HTML <html> <head> <title>Contoh CSS ke tiga</title> <style type="text/css"> body{font-family: verdana; font-size: 12px} a{color: red; text-decoration: none} a:hover{color: green; background-color: yellow; font-weight: bolder} </style> </head> <body> <p>Berikut ini adalah contoh penggunaan CSS dengan link.</p> <p><a href="http://google.com">Mesin Pencari</a></p> <p><a href="http://mail.yahoo.com">Yahoo Mail</a></p> </body> </html>
LATCSS05.HTML <html> <head> <title>Contoh Inline Style CSS</title> </head> <body> <h2 style="background-color:black; color:white" > Text ini akan bewarna putih dan background warna hitam </h2> </body> </html>
LATCSS05B.HTML <html> <head> <style type="text/css"> h2 { background-color:black; color:white; } </style> </head> <body> <h2> Text ini akan bewarna putih dan background warna hitam </h2> </body> </html>
LATCSS05C.HTML <html> <head> <title>Contoh External Style CSS</title> <style> @import url(belajar.css); </style> </head> <body> <h2> Text ini akan bewarna putih dan background warna hitam </h2> </body> </html>
LATCSS05D.HTML BELAJAR.CSS <html> <head> <title>Contoh External Style CSS-2</title> <link rel="stylesheet" type="text/css" href="belajar.css"> </head> <body> <h2> Text ini akan bewarna putih dan background warna hitam </h2> </body> </html> BELAJAR.CSS h2 { background-color:black; color:white; }
LATCSS06.HTML <html> <head> <title>Belajar Penulisan CSS</title> <style type="text/css"> body { font-size: 14px; color: navy; } p { font-family: calibri, helvetica, sans-serif; } h1,h2 { text-decoration: underline; font-size: 23px; color: green; } </style> </head> <body> <h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1> <h2>Baris Judul Kedua</h2> <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p> <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p> <h2>Baris Judul ketiga</h2> </body> </html>