Home » » belajar css (casade style sheet) dengan mudah di html #4

belajar css (casade style sheet) dengan mudah di html #4

Written By mediana saputra on Saturday, 26 January 2013 | 18:32



           Format font di dalam dkumen html berfungsi untuk membentuk sebuah karakter agar karakter yang di maksud berbeda dengan karakter-karakter lainnya di dalam sebuah dokumen html. Sedangkan css (cascade style sheet) merupakan feacture baru dari html 4.0 yang lebih praktis penggunaannya karena mengurangi dampak penggunaak font yang terlalu banyak dalam sebuah halaman web.
  • a.       Format font

Format font dalam sebuah dokumen html memiliki beberapa fungsi, yaitu :
-          Font face
-          Font size
-          Font color
  • b.      Casade style sheet (css)

Css dalam dokumen html terbagi atas tiga jenis, yaitu :
  • -          Style sheet internal

Style sheet internal adalah style sheet yang di definisikan di dalam dokumen html.
Sintaknya adalah sebagai berikut :
<html>
<head>
<title>style sheet internal</title>
</head>
<style[atribut]>…..isi style sheet…..</style>
<body>
……..isi body ……..
</body>
</html>
Contoh :
<html>
<head>
<title>style sheet internal</title>
</head>
<style type=”text/css”>
h1{ font-family:book antiqua;
font-size:12px;
text-align:center;
color:blue; }
p{font-family:arial;
font-size:12px;
text-align:justify;
color:black;
font-weight:bold;}
</style>
<body>
<h1>artikel tentang style sheet di MYCEKINFO.BLOGSPOT.COM</h1>
<p>di mycekinfo.blogspot.com telah tersedia artikel tentang style sheet,dan bahasa dari artikelnya mudah untuk di pahami</p>
</body>
</html>
  • -          Style sheet eksternal

style sheet eksternal adalah style sheet yang difinisikan secara terpisah di dalam file tersendiri. Pendefinisian style sheet eksternal yang terpisah harus di berikan extension css atau  “nama_file.css” dan tidak perlu di definisikan melalui tag html. Sedangkan untuk html yang digunakan untuk mengakses style sheet, harus di panggil melalui link.
Halaman style sheet eksternal :
h1{ font-family:book antiqua;
font-size:12px;
text-align:center;
color:blue; }
p{font-family:arial;
font-size:12px;
text-align:justify;
color:black;
font-weight:bold;}
simpan dengan nama style1.css .
contoh :
<html>
<head>
<title>style sheet eksternal</title>
</head>
<link rel=”stylesheet” href=”style1.css” type=”text/css”>
<body>
<h1>artikel tentang style sheet di MYCEKINFO.BLOGSPOT.COM</h1>
<p>di mycekinfo.blogspot.com telah tersedia artikel tentang style sheet,dan bahasa dari artikelnya mudah untuk di pahami</p>
</body>
</html>
  • -          Style sheet inline

Style sheet inline tidak di definisikan terpisah seperti style sheet internal dan style sheet eksternal. Style sheet inline langsung di definisikan pada tag body. Penggunaan style inline akan mengakibatkan semakin besarnya penggunaan byte.
Sintaknya adalah sebagai berikut :
<html>
<head>
<title>…..isi title…..</title>
</head>
<body>
<p style=”atribut”>…isi text…</p>
</body>
</html>
contoh :
<html>
<head>
<title>style sheet inline</title>
</head>
<body>
<h1 style=”font-family:book antiqua;font-size:12px;font-color:blue;text-align:center;”>
artikel tentang style sheet di MYCEKINFO.BLOGSPOT.COM</h1>
<p  style=”font-family:arial;font-size:12px;font-color:black;text-align:justipy;font-weight:bold;”>
di mycekinfo.blogspot.com telah tersedia artikel tentang style sheet,dan bahasa dari artikelnya mudah untuk di pahami</p>
</body>
</html>
  • -          Multiple style sheet

Multiple style sheet adalah style sheet yang dapat di gunakan secara bersama dalam pendefinisiannya, baik melalui style sheet internal atau pun style sheet eksternal. Hanya penggunaannya lebih dari satu, maka akan di definisikan secara umum.
Halaman style sheet eksternal :
h1{ font-family:book antiqua;
font-size:12px;
text-align:center;
color:blue; }
p{font-family:arial;
font-size:12px;
text-align:justify;
color:black;
font-weight:bold;}
simpan dengan nama style2.css
contoh :
<html>
<head>
<title>style sheet multiple</title>
</head>
<link rel=”stylesheet” href=”style2.css” type=”text/css”>
<style type=”text/css”>
h2{font-family:arial;
font-size:12px;
text-align:left;
color:red;
font-weight:bold;}
</style>
<body>
<h1>artikel tentang style sheet di MYCEKINFO.BLOGSPOT.COM</h1>
<p>di mycekinfo.blogspot.com telah tersedia artikel tentang style sheet,dan bahasa dari artikelnya mudah untuk di pahami</p>
<h2>warning : Semoga anda puas dengan artikel yang di postingkan, silahkan berkunjung kembali</h2>
</body>
</html>

Share this article :

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Turorial Grapich Design and Blog Design - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger