Penggunaan Kode CSS Dalam Tag-tag HTML

Penggunaan Kode CSS Dalam Tag-tag HTML ~ Ada 3 cara untuk menempatkan atau menerapkan kode CSS dalam tag-tag HTML;

1. Inline CSS 

Yaitu dengan menuliskan kode CSS langsung di dalam tag HTML yang bersangkutan. 

Contoh; 

<html> 
<head> 
<title>Mari Belajar CSS</title 
</head> 
<p style=”background:blue;color:red”> 

Mendesain website dengan CSS 

</p> 
</body> 
<html> 

2. Internal CSS 

Yaitu menempelkan kode CSS ke dalam tubuh dokumen HTML diantara tag <head>...</head>. Penulisan kode CSS dimulai dengan <style> dan diakhiri dengan </style> (<style>.....</style).

Contoh Aplikasi; 

<html> 
<head> 
<title>Mari Belajar CSS</title> 
<style type="text/css" media=screen> 
color:white; 
font-family:pristina; 
text-align: center; 
font-size:20px; 
h2 
color: red; 
font-family:candara; 
font-style:italic; 
body 
background:black; 
</style> 
</head> 
<body> 
<H2>Pengenalan CSS</H2> 

<p> 

CSS (Cascading Style Sheet) sangat bermanfaat sekali dalam mengatur design atau layout suatu halaman web. Dengan CSS kita bisa lebih mudah mengontrol tampilan halaman web tanpa harus mengontrol tiap baris elemen yang ingin di design yang mana jika menggunakan HTML itu harus kita lakukan. Kita bisa memisahkan style sheet atau format tampilan web yang kita inginkan dengan tampilan web itu sendiri, sehingga jika sewaktu-waktu kita ingin merubah tampilan web tersebut kita hanya perlu merubah style 
sheet atau format tampilannya atau mungkin mengedit design tampilan webnya.

</body> 
<html> 

Contoh Hasil Aplikasi;


3. Eksternal CSS 

Yaitu dengan membuat satu file CSS khusus secara terpisah ber-ext .css (contoh; style.css). 
Karena format style sheet dibuat dalam file yang berbeda dengan isi dokumen HTML nya maka kita harus membuat satu link yang akan menghubungkan style sheet(format tampilan) yang akan digunakan untuk mengontrol isi dokumen HTMLnya di bagian <HEAD></HEAD>. Format linknya adalah; 

<link href="style.css" rel="stylesheet" /> 

Contoh Aplikasi; 

I. Membuat file CSS dalam satu file khusus ber-ext . css dengan nama style.css 

color:red; 
font-family:trebuchet; 
text-align: center; 
font-size:20px; 
h1 
color: red; 
font-family:candara; 
font-style:italic; 
body 
background:green; 

II. Membuat dokumen HTML yang akan kita format dengan CSS dengan nama index.html 

<html> 
<head> 
<title>Mari Belajar CSS</title> 
<link href="style.css" rel="stylesheet" /> 
</head> 
<body> 
<H1>Pengantar CSS</H2> 
<p> 

CSS (Cascading Style Sheet) sangat bermanfaat sekali dalam mengatur design atau layout suatu halaman web. Dengan CSS kita bisa lebih mudah mengontrol tampilan halaman web tanpa harus mengontrol tiap baris elemen yang ingin di design yang mana jika menggunakan HTML itu harus kita lakukan. Kita bisa memisahkan style sheet atau format tampilan web yang kita inginkan dengan tampilan web itu sendiri, sehingga jika sewaktu-waktu kita ingin merubah tampilan web tersebut kita hanya perlu merubah style 
sheet atau format tampilannya atau mungkin mengedit design tampilan webnya. 

</body> 
<html> 

Catatan; simpan file style.css dan index.html dalam satu folder.

Hasil Contoh Aplikasi;


Demikian tutorial Penggunaan Kode CSS Dalam Tag-tag HTML.......
Semoga bermanfaat dan selamat berkarya.

" Hidup yang berarti adalah hidup yang berkarya dan untuk menciptakan sesuatu yang dinamakan mahakarya dibutuhkan proses, dimana proses adalah tahapan belajar dalam hidup, jadi guys.....jangan pernah lelah belajar dan selamat berkarya........"

Regards,

Author
Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
October 29, 2013 at 10:34 AM ×

css

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar
Thanks for your comment