Zanial Mazalisa, S.Kom.,M.M http://blog.binadarma.ac.id/nayel   CSS adalah suatu bahasa yang digunakan untuk mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna, dan semua.

Download Report

Transcript Zanial Mazalisa, S.Kom.,M.M http://blog.binadarma.ac.id/nayel   CSS adalah suatu bahasa yang digunakan untuk mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna, dan semua. 

Zanial Mazalisa, S.Kom.,M.M
http://blog.binadarma.ac.id/nayel


CSS adalah suatu bahasa yang digunakan untuk
mengatur tampilan suatu website, baik tata letaknya,
jenis huruf, warna, dan semua yang berhubungan
dengan tampilan.
Pada umumnya, CSS tu digunakan untuk menformat
halaman web yang ditulis dengan HTML
3 Cara Implementasi CSS
 Inline Style
 Internal Style Sheet atau Embed Style
 External Style Sheet



Menjadi atribut dalam tag HTML
Atributnya adalah style
Cara pendefinisiannya adalah
style=“property-1 :nilai ; property-2:nilai;….property-n:nilai”
Contoh ;
<html>
<head>
<title>Test CSS Inline Style 1</title>
</head>
<body style="color:blue; background-color:yellow">
<p style="text-align:center;text-transform:uppercase;
color:red;font-weight:bold">Pemrograman</p>Web
</body>
</html>
<html>
<head>
<title>Test CSS Inline Style 2</title>
</head>
<body>
Bergaris
<a href="http://www.google.com">Google</a><br>
<a href="http://www.google.com" style="text-decoration:none">Google</a>
</body>
</html>
Tdk
Bergaris



Style yang diletakkan dalam tag HEAD
Cara pendefinisiannya adalah;
<style type=“text/css”>
…
…
</style>
Contoh;
<html>
<head>
<style type="text/css">
h1 {background-color:Blue;}
p {background-color:red;}
</style>
</head>
<body>
<h1>Header berlatar belakang</h1>
<p>Paragraph dengan latar belakang</p>
</html>
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman", Times, serif}
p.sansserif{font-family:Arial, Helvetica, sans-serif}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>



Style CSS yang berada terpisah pada sebuah file .css
Dipanggil dari dalam dokument HTML
Format penulisan memanggil file .css
< link rel="StyleSheet" href="namafile.css" type="text/css">

Contoh;

File .css nama file = paragraf_warna.css
p {color: red;}
body {background-color: yellow;}

File HTML
<html>
<head>
<title>title/judul halaman website anda</title>
<link rel="StyleSheet" href="paragraf_warna.css" type="text/css">
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
</body>
</html>