CSS 2: PENGUNAAN CSS PADA PROGRAM HTML

bila

 

Apa itu CSS?

CSS (Cascading Style Sheet) merupakan sebuah standar pembuatan dan pemakaian style untuk dokumen yang terstruktur,CSS bukan sebuah bahasa pemograman, tetapi CSS biasanya dipakai untuk memformat bagian halaman web dengan bahasa XHTML atau HTML.
Keuntungan menggunakan CSS adalah:
  1. Mempersingkat dan mempermudah pembuatan serta pemeliharaan suatu dokumen web
  2. Mempercepat proses pembacaan HTML
  3. Memisahkan presentasi suatu dokumen dari konten dokumen itu sendiri.
Tag-Tag HTML didalam CSS dinamakan atribut dan selection  yang nantinya dapat dimasukkan kedalam declaration.

Cara penulisan CSS

  • Inline

Penulisan ini dilakukan dengan cara memasukkan kode langsung di dalam elemen HTML, dimana nilai properti CSS dihubungkan dengan sebuah tanda":", dan tanda";" sebagai pembatas antara atribut-atribut yang ada. 

<html>
    <head>
        <title>penggunaan inline style sheet</title>
    </head>
    <body>
        <p style=" color: black; font-size: medium; ">INI INLINE</p>
    </body>
</html>


  • Internal

Internal Style Sheet atau Embedded Style Sheet merupakan penulisan CSS didalam dokumen HTML menggunakan tag <style></style>.Tag ini harus berada didalam <head> tag pada halaman HTML. Simplenya Internal Style sheet digunakan untuk memisahkan code CSS dari tag HTML tetapi masih di halaman yang sama.
berikut ini adalah contoh penulisan Internal Style Sheet

Kode Pembuatan:
<html>
    <head>
        <title>Penggunaan Internal style sheet</title>
        <style type="text/css">
            h1{
                font-family:Helvetica;
                color:#677;
            }
            p{
                font-family: Arial;
                color: #677;
            }
        </style>
    </head>
    <body>
        <h1>Teks Internal CSS</h1>
        <p>internal style sheet</p>
    </body>
</html>



Hasilnya akan seperti ini















  • Eksternal
Eksternal CSS merupakan kode CSS yang di tulis terpisah pada kode HTML dimana halamannya berbeda atau terpisah. Untuk memasukkan berkas CSS dari berkas external kita dapat menggunakan tag <link>. Berikut contoh penulisannya

Kode Pembuatan
<html>
    <head>
        <title>Eksternal style sheet</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h4>Mencoba external css</h4>
    </body>
</html>

Aturan Penulisan CSS

Pada CSS ttribut dan nilai atribut dikenal sebagai property dan nilai property. Aturan Penulisan CSS yang akan saya jelaskan adalah selector. Selector merupakan rangkaian yang berfungsi untuk memilih suatu elemen yang akan di beri gaya, selector sendiri terdiri dari tag,class dan ID. Pada kesempatan kali ini saya akan menjelaskan selector class dan ID saja .

  • Selector Class
Menggunakan elemen class pada CSS dapat memudahkan kita untuk mengelompokkan elemen-elemen dan menerapkan aturan CSS didalamanya. Penulisan class biasanya diawali dengan tanda titik. berikut contohnya

Kode Pembuatan:

<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css"></link>
        <title>latihan: class CSS</title>
    </head>
    <body>
        <p class="Isiteks">Mengisi teks</p>
    </body>
</html>


  • Selector ID
Selector ID ini biasanya digunakan untuk mendefinisikan header, content, dan footer pada desain web. Selector ID selalu diawali dengan menggunakan tanda #. Langsung saja saya akan menjelaskan cara menggunakan selector ID ini. Pertama-tama saya akan membuat style.css terlebih dahulu.

#judul1 {
    font-family: Arial, Helvetica;
    font-size: 18px;
    color: aquamarine;
}
#judul2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow';
    font-size: 20px;
    color: blue;
}

setelah itu barulah dibuat programnya
<html>
    <head>
        <link href="style2.css" rel="stylesheet" type="text/css"></link>
        <title>Latihan</title>
    </head>
    <body>
        <p id="judul1">INI ADALAH ID MENGGUNAKAN JUDUL 1</p>
        <p id="judul2">INI ADALAH ID MENGGUNAKAN JUDUL 2</p>
    </body>
</html>

sekian terimakasih

0 Komentar