CSS Bagian 3

Background color,

ada beberapa cara untuk membuat background color yaitu: color names misalnya warna merah (Red) dan Hex Color Codes misalnya merah dengan code (#de1205), RGB / RGBa misalnya rgb(0, 0, 0); /* black */ dan  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */ dan yang terakhir dengan HSL / HSLa.

Hue is a degree on the color wheel (from 0 to 360).
Saturation is a percentage between 0% and 100%.
Lightness is also a percentage between 0% and 100%.

hsl(120, 100%, 50%); /* green */

contoh dalam tag html.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: blue;
}

div {
  background-color: lightblue;
}

p {
  background-color: #98FB98;
}
</style>
</head>
<body>

<h1>Politeknik Manufaktur Negeri Bangka Belitung</h1>
<div>
Jurusan Teknik Elektro dan Informatika
<p>Program Studi Teknologi Rekayasa Perangkat Lunak.</p>
Sungailiat Bangka Belitung
</div>

</body>
</html>

 Interaction with background-image: background-image: url(trpl.png);

CSS Padding: Space antara konten dengan element. ada 4 properties Padding yaitu: Top, Right, left, Bottom.

Four values:

<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"> </div>

Three values:

<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>

Two values:

<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>

One value:

<style>
.myDiv {
padding: 25px; /* top/bottom/left/right */
}
</style>
<div class="myDiv"></div>

Contoh Penggunaan Padding

<!DOCTYPE html>
<html>
<head>
<style>
#coba1 {
  border: 1px solid black;
  background:url(polmanbabel.png);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding:15px 20px 25px 125px;
}

#coba2 {
  border: 1px solid black;
  background:url(polmanbabel.png);
  background-repeat: no-repeat;
  padding:15px;
}

</style>
</head>
<body>

<p>Sejarah Singkat</p>
<div id="coba1">
  <h2>Sejarah Singkat Polman Babel</h2>
  <p>Politeknik Manufaktur Negeri Bangka Belitung [POLMAN BABEL] bermula dari Politeknik Manufaktur Timah yang didirikan pada tahun 1994 oleh PT. Timah Tbk. melalui Yayasan Polman Timah dengan asistensi dari Politeknik Manufaktur Bandung.</p>
</div>

<p>Sejarah Singkat</p>
<div id="coba2">
  <h2>Sejarah Singkat Polman Babel</h2>
  <p>Politeknik Manufaktur Negeri Bangka Belitung [POLMAN BABEL] bermula dari Politeknik Manufaktur Timah yang didirikan pada tahun 1994 oleh PT. Timah Tbk. melalui Yayasan Polman Timah dengan asistensi dari Politeknik Manufaktur Bandung.</p>
</div>

</body>
</html>

 

Adapun tugasnya mengerjakan ebook  pada Part II: Styling with CSS. tugasnya mencoba dan merangkum hasil dari ebook yang sudah dikerjakan kemudian di resume/rangkum ke dalam bentuk laporan sesuai dengan chapternya. untuk link download ebook dapat di download disini.  kemudian setelah dirangkum oleh masing2 individu dibuat presentasi ppt secara berkelompok.

1 kelompok terdiri dari 2 – 3 orang, silahkan didiskusikan di kelas. untuk pembagian materi presentasi silahkan diatur oleh ketua kelas sesuai dengan hasil kesepakatan bersama dengan masing-masing kelompok. tugas individu  yang terdiri dari source code dan laporan diupload di folder CSS -> folder masing2 mahasiswa ->  minggu 9.

Daftar Hadir jangan lupa diisi, dikasih keterangan pada pembahasan :” Styling with CSS” (Pembelajaran online) dan studi kasus secara kreatif.