Dhadiansyah Blog: Cara Memasang Script CSS Ke HTML

Oke sekarang kita belajar Cara Memasang Script CSS ke HTML, untuk pemasangan script CSS ke html ada 3 cara yaitu Inline CSS, Internal CSS dan External CSS. Tulisan ane yang sekarang bakalan ngebahas 3 cara tersebut sesuai yang ane pelajarin.

Inline CSS

Inline CSS merupakan cara penulisan kode CSS ke dalam tag HTML secara langsung. Untuk penulisan kode tersebut diawali dengan atribut "style" di dalam tag HTML yang bersangkutan dan kemudian diikuti dengan property dan value. Berikut contoh penggunaanya:

<html>
<head>
<title>Belajar Inline CSS</title>
</head>
<body>
<h1 style="text-align:center; color:blue;">Heading Inline CSS </h1>
<p style="text-align:center; color:blue;">Paragraph pertama Inline CSS.</p>
</body>
</html>

Internal CSS/Embedded CSS

Internal CSS merupakan metode penulisan script/kode CSS diantara tag <head>...</head>. Untuk penulisan kode CSS tersebut diawali dengan tag <style> dan diakhiri tag </style>. Contoh penggunaan seperti yang udah ane bikin di tulisan sebelumnya "Class dan Id CSS".

External CSS

External CSS merupakan cara penulisan script CSS yang terpisah dengan file HTML. Cara penulisan ini yang paling ane suka, soalnya pake cara ini cukup punya satu file CSS bisa digunakan untuk semua halaman website, tapi setiap halaman website tersebut harus nge-link ke file CSS yang kita buat. Untuk contoh pembuatan external CSS ada 2 langkah, yaitu:

1. Membuat file CSS
Langkah pertama yaitu membuat file CSS. Untuk cara pembuatan sama seperti membuat file HTML, bisa memakai notepad di sistem operasi microsoft windows atau gedit di sistem operasi ubuntu, namun untuk nama ekstensi/akhiran filenya bukan ".html" melainkan ".css". Berikut contoh script CSS:

{

text-align:center;

color:blue;

}

{

text-align:center;

color:red;

}

Simpan script yang telah dibuat tadi dengan nama "style.css" tanpa tanda kutip atau beri nama bebas namun harus berakhiran ".CSS".

2. Membuat file HTML
Langkah selanjutnya membuat file HTML. Untuk pembuatan file HTML sama seperti tulisan sebelumnya tentang Mengenal HTML dan Cara Menggunakan HTML, namun kita tambahkan baris script berikut <link rel="stylesheet" type="text/css" href="mystyle.css"> diantara tag <head> dan </head>. Berikut contoh penulisan dan hasilnya pada gambar di bawah:

<html>

<head>

<title>Belajar External CSS</title>

</head>

<body>

<h1>Heading External CSS</h1>

<p>Paragraph pertama external CSS.</p>

</body>

</html>

Ga berasa udah mau jam 12 siang, pantes perut udah keroncongan. Segini aja lah kita belajar Cara Memasang Script CSS Ke HTML. Saatnya makan siang dan ~~Salam semangat buat para cewek-cewek Sexy di luar sana.~~

Dhadiansyah Blog

Pages

Cara Memasang Script CSS Ke HTML

No comments:

Post a Comment