Cara Menambahkan CSS pada HTML
Posted by SkyLight Animation on Selasa, 05 September 2017
Cara mendeklarasikan atau Menyisipkan CSS pada HTML
Terdapat 3 cara untuk mendeklarasikan atau menuliskan suatu css pada HTML :
Contoh Internal CSS :
Hasil dari Source code Internal CSS :
1. Inline CSS
Inline CSS adalah CSS yang ditulis atau didekalarasikan sebaris dengan tag nya atau css tersebut dideklarasikan sebagai atribut style="" pada suatu tag atau element tertentu.
Contoh source code Inline CSS :
Seperti pada contoh di atas :
Atribut style mempunyai value berupa color:red;
Hasil source code Inline CSS di atas :
Contoh source code Inline CSS :
<p style="color:red;">contoh paragraf dengan teks berwarna merah</p>
Seperti pada contoh di atas :
Atribut style mempunyai value berupa color:red;
Hasil source code Inline CSS di atas :
contoh paragraf dengan teks berwarna merah
2. Internal CSS
Internal CSS adalah CSS yang dideklarasikan pada HTML dengan menggunakan tag berikut. CSS internal ini dapat dibaca apabila diletakkan dimanapun asal berada dalam 1 file HTML, namun pada umumnya internal CSS ditulis atau dideklarasikan di dalam <head> tag untuk mempermudah dalam pencarian dan peletakan.
Berikut ini adalah tag dimana di dalamnya anda dapat menuliskan CSS :
<style type="text/css">
...
</style>
...
</style>
Contoh Internal CSS :
<!DOCTYPE html>
<html>
<head>
<title>Sinau IT</title>
<style type="text/css">
/* deklarasi CSS pada tag <p>*/
p{
color: red;
}
/* deklarasi CSS pada class dengan nama myClass <p>*/
.myClass{
color: blue;
}
/* deklarasi CSS pada id dengana nama myId <p>*/
#myId{
color: green;
}
</style>
</head>
<body>
<p> isi paragraf </p>
<div class="myClass"> isi myClass </div>
<div id="myId"> isi myId </div>
</body>
</html>
<html>
<head>
<title>Sinau IT</title>
<style type="text/css">
/* deklarasi CSS pada tag <p>*/
p{
color: red;
}
/* deklarasi CSS pada class dengan nama myClass <p>*/
.myClass{
color: blue;
}
/* deklarasi CSS pada id dengana nama myId <p>*/
#myId{
color: green;
}
</style>
</head>
<body>
<p> isi paragraf </p>
<div class="myClass"> isi myClass </div>
<div id="myId"> isi myId </div>
</body>
</html>
Hasil dari Source code Internal CSS :
isi paragraf
isi myClass
isi myId
3. External CSS
External CSS atau CSS Eksternal adalah CSS yang ditulis atau dideklarasikan di dalam file dengan extensi .css. Penulisan External CSS sama masing-masing tag, class, dan id sama dengan internal CSS, hanya saja terpisah dangan file HTML nya. Oleh sebab itu supaya Browser dapat membaca css tersebut, maka letak dan nama file CSS tersebut harus di deklarasikan pada HTML nya dengan source code berikut ini :
<link rel="stylesheet" type="text/css" href="link dimana anda menyimpan file css">
dengan menggunakan External CSS dapat dijadikan sebagai framework CSS.
Cara Menyisipkan CSS External pada suatu file HTML
HTML Source Code :
<!DOCTYPE html>
<html> <head> <title>Sinau IT</title> </head> <body> <div class="header"> <h1 class="head-title">SINAU IT</h1> <h2>Tutorials, Computer, Linux, Website</h2> </div> <div class="content"> <p align="center"> <i>Karena Belajar itu tidak harus selalu menjadi siswa...</i><br> <b>SINAU IT</b> adalah blog yang kami gunakan sebagai sarana berbagi Ilmu dan Tutorial tentang IT. </p> </div> </body> </html> |
CSS Source Code :
.header {
text-align: center; color: white; padding: 20px; margin: 10px; background: #73ace6; border: #aeccea solid 2px; } .head-title{ text-shadow: 3px 1px 0px #aeccea; } h2{ font-family: monospace; color: #c6e5ff; font-weight: normal; } .content{ background: #ead546; padding: 20px; border: solid 2px #eae190; margin: 10px; font-family: monospace; } |
||||
|
|
||||
Berikut ini adalah hasil dari index.html pada web browser sebelum di tambahkan External CSS : click untuk melihat hasil HTML |
 |
||||
Tambahkan source code berikut ini di dalam tag <head>
CSS Source Code :
<link rel="stylesheet" type="text/css" href="style.css">
href="style.css"
digunakan sebagai atribut yang berfungsi untuk memanggil file css pada suatu link yang dituils pada value atribut tersebut. karena file Style.css berada di dalam folder yang sama dengan file index.html, maka value atributnya dapat ditulis sebagai
href="style.css"
href="./style.css"
.
Hasil HTML yang telah ditambahkan External CSS :
|
Sumber : Mega Aspada Computer
~Semoga Bermanfaat~
0 komentar:
Please leave some comments