Objektif
¡ CSS Syntax
¡ CSS Id
¡ CSS Class
¡ CSS Formating
Cascading Style Sheets (CSS)
CSS dihadirkan para designer web untuk mengoptimalkan kemampuannya dalam merancang halaman web.
CSS memungkinkan para designer untuk mengatur format dan layout halaman secara lebih efisien.
CSS 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 :
- Linking.
- Embedding.
- Import.
Css Linking yaitu menggunakan style sheet dengan cara membuat suatu link pada file dimana style tersebut berada.
CSS Embedding yaitu dengan meletakkan definisi style sheet di bagian atas sebelum dokumen sebelum bagian <body>
CSS Import yaitu mengimport file yang berisi Style Sheet
Contoh Sintax CSS Embedding:
<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>
Contoh CSS 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
Sedangkan isi dari file style.css adalah :
#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;
}
Contoh CSS 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>
Sedangkan isi dari file style.css adalah :
#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;
}
CSS ID and CSS Class
Untuk mensetting style untuk html element, CSS menyediakan beberapa pilihan yang biasa disebut ID dan 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
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
• 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 berikut ini contoh dari css formating :
| Property | Description | Values |
| Color | Sets the color of a text | Color |
| Text-align | Aligns the text in an element | Left, right, center, justify |
| Text-decoration | Adds decoration to text | None, underline, overline, line-through, blink |
| Float | Specifies whether or not a box should float | Left, right, none, inherit |
| Position | Specifies the type of positioning for an element | Absolute, fixed, relative, static, inherit |
| DLL | ||
