Cascading
Style
Sheets
(CSS)
memungkinkan para designer untuk mengatur format dan layout halaman secara lebih efisien.
dapat diletakkan pada bagian atas dokumen HTML atau pada file tersendiri.
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 />
</body>
</html>
Terdapat dalam head suatu html dan dipanggil dalam body.
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>
Nb :Perhatikan Syntax <link href>, file css berada di folder css dengan nama file style.css isi dari syntax style.css sama seperti syntax pada embeded.
Contoh Import :
<html>
<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>
</html>
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 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 Class lebih digunakan untuk format style tulisan, sedangkan ID untuk melayout bagian-bagian utama template seperti header, sidebar atau kolom footer.
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;
}
{
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.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Contoh :
.center {text-align:center;}
CSS Formating
CSS menyediakan fungsi untuk memformat tampilan di halaman web
