Sabtu, 31 Mei 2014

CSS

06.06  Unknown  No comments



I. KONSEP CSS
Apa itu CSS :
-          Feature untuk membuat dynamic HTML.
-          Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
-          Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru)
-          Support ke semua browser.
Aturan penulisan :
-          Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
-          Nama property bersifat case sensitive.
color : green;
property : color
value : green
Rumus :
Selector {Declaration}
Declaration dijabarkan kembali menjadi :
Selector {Property : Value}
Contoh :
<html>
<head>
<title> Pengaturan Margin </title>
<style=”text/css”>
body {margin-top:1cm;margin-right:2cm;margin-bottom:1cm;margin-left:2cm;}
</style>
</head>
<body>
Pengtauran margin halaman.
(1 cm, 2 cm, 1 cm, 2 cm)
</body>
</html>

Aturan penuliasan CSS :
1.       Inline style sheets.
2.       Embedded style sheets / Internal style sheets.
3.      External style sheets.

·         Contoh Inline Style :
<html>
<head>
<title> Inline Style Sheets </title>
</head>
<body>
<p style=”color:blue”;> CSS </p>
<p> Saya sedang belajar format Inline Style Sheet dalam CSS </p>
</body>
</html>

·         Contoh Embedded Style Sheet :
<html>
<head>
<title> Embedded Style Sheets </title>
<style>
H2{color:yellow;}
p{font-family:Arial;font-size:14pt;}
</style>
</head>
<body>
<h2> Saya siswa kelas X RPL 3 </h2>
<p> Saya sedang belajar format Embedded Style Sheet dalam CSS </p>
</body>
</html>

·         Contoh External Style Sheets :
File berextensi .html :
<html>
<head>
<title> External Style Sheets </title>
<link rel=”stylesheet” type=”text/css” href=”(namafile).css”>
</head>
<body>
<H2> CSS </H2>
</body>
</html>

File berextensi .css:
H2{color:grey;}

p{font-size:14 pt;}


A.     Istilah –Istilah Dalam CSS
1.       Class Selector
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya 2 tipe paragraf, paragraf pertama menggunakan align-left & yang paragraf 1 lagi menggunakan align-center. Contoh penggunaan atribut class didalam HTML :
<p class=”left”> Paragraf ini rata kiri </p>
<p class=”center”> Paragraf ini rata tengah </p>

Maka penulisan pada file CSS-nya menjadi :

.left{text-align:left}
.center{text-align:center}

Posted in:

0 komentar:

Posting Komentar