Metode metode penulisan di css
Di Posting Oleh : wandi
Kategori : css
Berjumpa lagi sama jutsu coding . Jadi kali ini saya akan share menyenai metode metode penulisan di css . Di css ada 3 penulisan , yaitu embedded style sheet , inline style sheet , dan yang terakhir adalah external style sheet . Baik saya akan jelaskan dan kasih contoh pada masing masing metode css .
Mau liat atau download source code aplikasi premium bisa disini.
Di Posting Oleh : wandi
Kategori : css
Berjumpa lagi sama jutsu coding . Jadi kali ini saya akan share menyenai metode metode penulisan di css . Di css ada 3 penulisan , yaitu embedded style sheet , inline style sheet , dan yang terakhir adalah external style sheet . Baik saya akan jelaskan dan kasih contoh pada masing masing metode css .
1. inline style sheet
Yang pertama yang saya akan bahas adalah inline style sheet . Jadi inline style sheet ini yang langsung pada tah htmlnya . Jadi kita gunakan dengan atribut style . Contoh penulisan css dengan inline style sheet .
<!doctype HTML>
<html>
<head>
<title>inline style sheet</title>
</head>
<body>
<a href="#"style="font-size:20px;color:red;">ini adalah contoh inline style sheet</a>
</body>
</html>
<!doctype HTML>
<html>
<head>
<title>embedded style sheet</title>
<style>
a{
font-size:30px;
color:green;
background-color:blue;
}
</style>
</head>
<body>
<a href="#">ini adalah contoh embedded style sheet</a>
</body>
</html>
<!doctype HTML>
<html>
<head>
<title>inline style sheet</title>
</head>
<body>
<a href="#"style="font-size:20px;color:red;">ini adalah contoh inline style sheet</a>
</body>
</html>
2. embedded style sheet
Jadi emmbedded style sheet ini , ditulis langsung di bagian tag <head> dan menggunakan tag <style> untuk menulis css . Contoh penulisan css dengan embedded style sheet .<!doctype HTML>
<html>
<head>
<title>embedded style sheet</title>
<style>
a{
font-size:30px;
color:green;
background-color:blue;
}
</style>
</head>
<body>
<a href="#">ini adalah contoh embedded style sheet</a>
</body>
</html>
3. external style sheet
External style sheet ini jadi kita menggunakan 2 buah file yang pertama adalah html dan yang kedua adalah css . Jadi dengan external style sheet ini script kita akan menjadi lebih rapih , karena file yang satu di khusus kan untuk html saja dan yang kedua untuk css saja . Karena filenya terpisah antara html dan css jadi kita hubungakan menggunakan tag <link> atau bisa juga di import menggunakan @ import . Biar gak pusing langsung saja coba contoh mengguankan external style sheet .
petama kita buat dulu file css , simpan dengan nama style.css.
a{
font-weight:bold;
font-family:arial;
background-color:yellow;
color:pink;
}
lalu kita buat file html , simpan dengan nama css.html
<!doctype HTML>
<html>
<head>
<title>external style sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">ini adalah contoh external style sheet</a>
</body>
</html>
Selain menghubungkan dengan cara
<link rel="stylesheet" type="text/css" href="style.css">
bisa juga dengan
<style type="text/css">
@import "style.css";
</style>
Itu dia ketiga cara untuk penulisan css . Semoga menambah wawasan dan juga bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya .
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar