Selasa, 27 November 2012

Pengertian CSS



CSS
Pengertian CSS
CSS atau Cascading Style Sheets adalah bahasa pemrograman untuk mengatur tampilan suatu website. CSS merupakan script yang telah embedded dengan HTML.
Manfaat dari CSS:
  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript.
  5. Digunakan dalam hampir semua web browser.

Atribut ID
Aturan penamaan ID:
  1. Dapat mengandung huruf, angka, atau karakter garis bawah,
  2. Karakter pertama harus berupa huruf atau karakter garis bawah,
  3. Diawali dengan tanda #,
  4. Jangan memberi nama id sama dengan value,
  5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.

contoh :

<html>
<head>
<style type = "text/css">
#header {
width:900px;   
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
    <div id="headerLeft">Header Left</div>
    <div id="headerRight">Header Right</div>
</div>
</body>
</html>


Penempatan CSS dalam HTML

  1. Internal CSS

    Metode penulisan kode CSS langsung dalam file HTML. contoh:
    <html>
    <head>
    <style type = "text/css">
    .header {
    width:900px;   
    height:50px;
    border: 1px solid #640404;
    }
    .headerLeft {
    width:400px;
    background-color:#CCCCCC;
    height:50px;
    float:left;
    text-align:center;
    }
    .headerRight {
    width:450px;
    background-color:#999999;
    height:50px;
    float:right;
    text-align:center;
    }
    </style>
    </head>
    <body>

    </body>
    </html>
  2. Eksternal CSS

    file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
    <html>
    <head>
    <link rel=”stylesheet” type=”text/css” href=”public.css”/>
    </head>
    <body>

    </body>
    </html>
  3. Inline CSS

    Penulisan kode CSS dalam tag HTML. contoh:
    <html>
    <head>
    </head>
    <div style="background-color:#999999; text-align:center;">Inline CSS</div>
    </body>
    </html>

More

Tidak ada komentar:

Poskan Komentar