inf104: web design dasar pemrograman web dengan...
TRANSCRIPT
Pendahuluan Definisi
• Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk
memperindah halaman website (situs), dengan CSS kita dapat dengan
mudah mengubah keseluruhan warna dan tampilan yang ada disitus kita
sekaligus memformat ulang situs kita.
• CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk
digunakan diweb browser.
Keuntungan CCS
• Dapat di-update dengan cepat dan mudah, karena kita cukup
mendefinisikan sebuah style-sheet global yang berisi aturan-aturan
CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen
HTML pada halaman situs kita.
• User yang berbedadapat mempunyai style-sheet yang berbeda pula. • Ukuran dan kompleksitas document code dapat diperkecil.
CSS Secara Umum ada tiga bagian yaitu
• Selector (elemen yang akan didefinisikan)
• Properti (atribut yang akan diubah)
• Value (Nilai)
Bentuk Umum :
Selector{property: value}
Perintah CSS terdiriatas 2 komponen, yakni Selector & Declaration.
– Selector berfungsi untuk memberitahu browser bahwa pada elemen mana rule CSS diterapkan.
– Selector dapat berupa elemen HTML, selector class atau selector id.
– Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value.
Struktur Dasar CSS
External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
• <link, merupakan tag pembuka diakhiri dengan tanda “>”
• rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
• type=“text/css”, file yang dipanggil berupa css
• href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>
Struktur CSS
Lihat Tutorial CSS
https://www.w3schools.com/css/default.asp
Contoh-Contoh
Save: Prak_CSS02.html
<html>
<head>
<style type = “text/css”>
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-
color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-
color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>
Contoh-Contoh
Save: Prak_CSS03.html
<html>
<head>
<title>121411091-SYAIFUL</title>
<style>
</style>
</head>
<body>
<div id="batas">
<div id="head">
<center><h1>City Gallery</h1></center>
</div>
<div id="sideleft">
<ul id="hv">LONDON</ul>
<ul id="hv">PARIS</ul>
<ul id="hv">TOKYO</ul>
</div>
<div id="content">
<h2>LONDON</h2>
<p>London is the capital city of England.
If is the most populous city in the United
Kingdom, with a metropolitan area of over
13 million inhabitants.</p>
<p>Standing on the River Thames,
London has been a major settlement for
two millennia, its history going back to its
founding by the Romans, who named it
Londinium.</p>
</div>
<div id="foot">
<center><strong><u>LONDON</u></str
ong></center>
</div>
</div>
</body>
</html>