Untuk kita yang masih pemula, mari kita bersama - sama pelajari teknik - teknik dasar merubah tampilan css ini, teknik dasar untuk merubah font yang ada pada web atau blogs kita, scriptnya masih kita taruh di index atau halaman utama web yang kita punya.
langkah -langkah nya
1. jalankan web editor (misalnya :notepad atau dreamweaver)
2. Ketik script untuk halama utama web kita (script dasar html);
<html>
<head>
<title> Belajar CSS</tilte>
<style type="text/css">
</style>
</head>
<body></body>
</html>
save as dengan ekstensi html( misal:index.html)
3. Tambahkan script antara tag <style type="text/css"> </style> dan script antara <body></body>
a. Syntax script sederhana berbagai tulisan
| <style type="text/css"> </style> | <body></body> | Tampilan |
| .hurufbesar { text-transform: uppercase; } | <p class="hurufbesar">Belajar</p> | belajar |
| .hurufkecil { text-transform: lowercase; } | <p class="hurufkecil">Belajar</p> | Belajar |
| .hurufmiring { font-style: italic; | <p class="hurufmiring">Belajar</p> | Belajar |
| .huruftebal { font-weight: bolder; } | <p class="huruftebal">Belajar</p> | Belajar |
| .garisbawah { text-decoration: underline; } | <p class="garisbawah">Belajar</p> | Belajar |
| .pakaiwarna { color: #FF0000; } | <p class="pakaiwarna">Belajar</p> | Belajar |
| .tambahbackground { color: #FF0000; background-color: #009900; } | <p class="pakaibackground">Belajar</p> | Belajar |
| .tambahborder { color: #FF0000; background-color: #009900; border: thin solid #000000; } | <p class="pakaiborder">Belajar</p> | Belajar |
b. syntax sederhana untuk tulisan <h1> sampai dengan <h6>
| <style type="text/css"> </style> | <body></body> |
| h1 {color: #0000FF;} | <h1>Belajar</h1> |
| h2 {color: #0000FF;} | <h2>Belajar</h2> |
| h3 {color: #0000FF;} | <h3>Belajar</h3> |
| h4 {color: #0000FF;} | <h4>Belajar</h4> |
| h5 {color: #0000FF;} | <h5>Belajar</h5> |
| h6 {color: #0000FF;} | <h6>Belajar</h6> |
Atau Bisa juga di tulis semuanya sekaligus
| h1,h2,h3,h4,h5,h6 { color: #0000FF; } |
![[Valid Atom 1.0]](valid-atom.png "Validate my Atom 1.0 feed")
{ 1 komentar... Views All / Post Comment! }
artikelnya sangat membantu kak.
CSS
Posting Komentar