Pemrograman Berbasis Web 3 - CSS
-
Upload
melaanndininatadiredja -
Category
Documents
-
view
244 -
download
0
Transcript of Pemrograman Berbasis Web 3 - CSS
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 1/18
Pemrograman Berbasis WPert
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 2/18
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 3/18
Apa itu CSS
• Cascading Style Sheet•
Ekstensi file *.css• Versi terakhir adalah CSS 3
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 4/18
Pengaksesan CSS
InlineInternal
Eksternal
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 5/18
Inline
<div style=“color: red;” >Merah</div>
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 6/18
Internal
<html>
<head>
<style type=“text/ css ”>
h1 { color: red; }
</style>
</head><body>
<h1>Merah</h1>
</body>
</html>
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 7/18
Eksternal
Index.html<html>
<head>
<link href =“Style.css” rel=“stylesheet ”type=“text/ css” />
</head>
<body>
<h1>Merah</h1>
</body>
</html>
Style.cssh1
{
color: red;}
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 8/18
Warna apa yang muncul ?
Index.html<html>
<head>
<link href =“Style.css” rel=“stylesheet ” type=“text/ css” />
<style type=“text/ css”>
h1 { color: blue; }</style>
</head>
<body>
<h1 style=“color: green”> Warna</h1>
</body>
</html>
Style.cssh1
{
color: red;}
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 9/18
Prioritas Pengaksesan CSS
• Inline
1
• Eksternal
2• Internal
3
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 10/18
Yang dapat dikenai CSS
ELEMENT CLASS
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 11/18
Element
<html>
<head>
<style type=“text/ css”>
h1 { color: red; }
</style>
</head><body>
<h1>Merah</h1>
</body>
</html>
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 12/18
Class
<html>
<head>
<style type=“text/ css”>
.merah { color: red; }
</style>
</head><body>
<div class=“ merah ”>Merah</div>
</body>
</html>
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 13/18
Id
<html>
<head>
<style type=“text/ css”>
#merah { color: red; }
</style>
</head><body>
<div id=“merah ”>Merah</div>
</body>
</html>
Program Diploma IPB -Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 14/18
Warna apa yang muncul ?
Index.html<html>
<head>
<link href =“Style.css” rel=“stylesheet ” type=“text/ css”/>
</head>
<body>
<div id=“warna ” class=“warna ”>Warna</div>
</body>
</html>
Style.cssdiv { color: red; }
.warna { color: green; }
#warna { color: blue; }
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 15/18
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 16/18
Kesamaan Style
Index.html<html>
<head>
<link href =“Style.css” rel=“stylesheet ” type=“text/ css” />
</head>
<body>
<div>Merah</div>
<div id=“abang ”>Merah</div>
<div class=“merah ”>Merah</div>
</body>
</html>
Style.cssdiv, .merah, #abang
{
color: red;}
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 17/18
Kedalaman Style
Index.html<html>
<head>
<link href =“Style.css” rel=“stylesheet ” type=“text/ css” />
</head>
<body>
<div id=“green”>
<div class=“red”>Warna</div>
</div>
</body>
</html>
Style.css#green { color: green; }
.red { color: red; }
#green .red { color: yellow; }
Program Diploma IPB - Aditya Wicaksono, S.Komp
8/11/2019 Pemrograman Berbasis Web 3 - CSS
http://slidepdf.com/reader/full/pemrograman-berbasis-web-3-css 18/18
Terim
Program Diploma IPB - Aditya Wicaksono, S.Komp