Resume Desain Web (pertemuan 9)
Cascading Style Sheet (CSS)
CSS Syntax
Ada tiga cara untuk menggunakan style pada halaman web. Penggunaan cara-cara tersebut tergantung kebutuhan halaman web. Tiga cara tersebut adalah :
1. Linking.
yaitu menggunakan style sheet dengan cara membuat suatu link pada file dimana style tersebut berada.
2. Embedding.
yaitu dengan meletakkan definisi style sheet di bagian atas sebelum dokumen sebelum bagian <body> .
3. Import.
yaitu mengimport file yang berisi Style Sheet
Contoh embeded:
<html>
<head>
<title>Langsung</title>
<style type="text/css">
#header{background-color:navy; border:1px solid blue; width:50%;}
margin-left:auto; margin-right:auto; text-align:center;
font-family:arial; color:white; padding-top: 17px; padding-bottom: 17px;}
hr{color:red;}
</style>
</head>
<body>
<div id="header">
Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
</div>
<hr />
</html>Contoh Linking :
<html>
<head>
<title>Coba Style Sheets</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
</div>
<hr />
</body>
</html> contoh import :
<head>
<title>Langsung</title>
<style type="text/css">
@import url(http://localhost/cs/css/style.css);
</style>
</head>
<body>
<div id="header">
Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
</div>
<hr />
</body>
CSS ID and CSS Class
CSS ID and CSS Class
Secara garis besar css id dideklarasikan menggunakan karakter “#” (Pagar) sedangkan css class dideklarasikan menggunakan karakter “.” (Titik)
CSS ID merujuk sebagai style specifik single user atau unique element atau bahasa paling gampang hanya boleh sekali digunakan..CSS Class adalah kebalikan dari CSS id, jadi CSS class dapat digunakan beberapa kali dan bukan element unique melainkan group element CSS ID
The ID Selector
a. The id selector is used to specify a style for a single, unique element.
b. The id selector uses the id attribute of the HTML element, and is defined with a "#".
c. The style rule below will be applied to the element with id="para1":
Contoh :
#para1{
text-align:center;
color:red;
}
CSS Class
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. Contoh :
.center {text-align:center;} 
Langganan:
Posting Komentar (Atom)
