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



Apa itu CSS

• Cascading Style Sheet•

Ekstensi file *.css• Versi terakhir adalah CSS 3

Program Diploma IPB -Aditya Wicaksono, S.Komp



Pengaksesan CSS

InlineInternal

Eksternal




Inline

<div style=“color: red;” >Merah</div>




Internal

<html>

<head>

<style type=“text/ css ”>

h1 { color: red; }

</style>

</head><body>

<h1>Merah</h1>

</body>

</html>




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;}




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;}




Prioritas Pengaksesan CSS

• Inline

1

• Eksternal

2• Internal

3




Yang dapat dikenai CSS

ELEMENT CLASS




Element

<html>

<head>


h1 { color: red; }

</style>

</head><body>

<h1>Merah</h1>

</body>

</html>




Class

<html>

<head>


.merah { color: red; }

</style>

</head><body>

<div class=“ merah ”>Merah</div>

</body>

</html>




Id

<html>

<head>


#merah { color: red; }

</style>

</head><body>

<div id=“merah ”>Merah</div>

</body>

</html>




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; }




Kesamaan Style

Index.html<html>

<head>


</head>

<body>

<div>Merah</div>

<div id=“abang ”>Merah</div>

<div class=“merah ”>Merah</div>

</body>

</html>

Style.cssdiv, .merah, #abang

{

color: red;}




Kedalaman Style

Index.html<html>

<head>


</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; }




Terim


pemrograman berbasis web 3 - css

Documents