Rabu, 22 Agustus 2018

CSS
Pengertian CSS
31 August 2009 00:00
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>


Share |



copyright © 2004 - 2013 All Rights Reserved, Web Development