Penulisan CSS

Penulisan CSS
Script atau kode CSS harus ditulis dalam tag <style> kode CSS </style>.
Penulisan kode CSS disisipakan dalam dokumen HTML dalam elemen tag <head> kode CSS </head>, seperti terlihat pada contoh dibawah ini:

<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
</style>
</head>
<body>
<p>Isi Halaman Disini</p>
</body>
</html>

Ada tiga cara penulisan kode CSS dalam HTML, yaitu :

1. Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>

2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>

2. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>

Iklan

7 pemikiran pada “Penulisan CSS

  1. ubaid

    mas tolong diberitahu lebih detail tentang pembuatan web dgn menggunakan css. dan tolong diberi seditik contoh programnya. terima kasih banyak

  2. Sebetulnya, pembuatan layout web dengan css dapat menggantikan fungsi layout dengan tabel.

    Contoh:
    Kita akan menggunakan 2 kolom

    body {
    margin:0px 0px 0px 0px;
    }

    #leftcontent {
    float:left;
    width:67%;
    background:#fff;
    border-right:2px solid #000;
    border-bottom:2px solid #000;
    margin-right:15px;
    padding-bottom:20px;
    }

    #rightcontent {
    }

    p,h1,pre {
    margin:0px 30px 10px 30px;
    }

    h1 {
    font-size:14px;
    padding-top:10px;
    }

    #rightcontent p {
    font-size:10px;
    margin-left:0px;
    }

    CSS 2 Kolom
    leftcontent
    #main {
    float:left;
    width:67%;
    background:#fff;
    border-right:2px solid #000;
    border-bottom:2px solid #000;
    margin-right:15px;
    padding-bottom:20px;
    }
    Ini Adalah kolom kiri

    rightcontent

    Kolom Kanan

  3. Sebelumnya mohon ma’af..
    Sedikit tambahan penulisan css ialah selector {property: value;}

    kita juga dapat menambahkan beberapa property yang tentunya juga diikuti dengan nilai value

    dari contoh yang anda berikan, anda memakai ID selector yang diawali dengan #(kres). Dimana style ID tadi tidak akan berfungsi jika tidak ditamhkan properti div atau span. . .
    Qu gak ngerti dengan contoh yang anda berikan, sedangkan saya sangat ingin share, mhon direplay ke emailku. . .
    (intheam.why@gmail.com)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s