PWPB | Pertemuan 9
Memahami Cara Kerja CSS (Cascading Style Sheet)
1. Pengertian CSS
CSS adalah salah satu dokumen untuk membuat website yang berguna untuk mengatur gaya atau mengubah gaya tampilan website agar lebih menarik.
2. Manfaat CSS
a. Dokumen HTML lebih mudah untuk diberi gaya.
b. Ukuran file menjadi lebih kecil.
c. Dapat digabungkan menggunakan Javascript.
d. Website jauh lebih menarik
3. Bagian-bagian CSS
a. Selector
selector dalam CSS yaitu tag,class, dan id pada HTML.
b. Property
property dalam CSS yaitu jenis gaya apa yang akan digunakan.
c. Value
value dalam CSS yaitu nilai atau style apa yang akan mengisi property.
4. Jenis - Jenis Pengkodingan CSS
a. Inline
Jenis ini menulis kodingan CSS nya yaitu di masing masing tag dalam dokumen HTML yang sama.
b. Embedded
Jenis ini menulis kodingan CSS nya dengan cara membuka tag <style> dalam dokumen HYML yang sama.
c. External
Jenis ini menulis kodingan CSS nya dengan cara membuat file css sendiri diluar file HTML yang nantinya akan dipanggil di dalam file HTML.
5. Contoh Kodingan HTML dengan CSS
A. Inline.css
Kodingan Inline CSS yaitu penulisan dengan cara menulis gaya atau style ke dalam masing masing tag dalam HTML yang sama dengan cara membuka attribute "style" di dalam tag HTML nya. Bisa juga dengan cara membuka tag tag yang bisa mengubah gaya seperti tag <font>.
Contoh Kodingan Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p align="center" style="color:purple; font-family:impact; font-size:24px; text-shadow:12px 2px 5px cyan;">Hello World, Ini Adalah Contoh Penggunaan Inline CSS</p>
</body>
</html>
Hasil Kodingan di atas
B. Embedded With Class dan ID
Penulisan Kodingan Embedded yaitu dengan cara menuliskan CSS nya ke dalam tag <style> dalam file HTML yang sama. Biasanya penulisan CSS juga menggunakan class dan id agar lebih simple pengaturan gayanya. Cara menggunakan class dan id dengan cara menambahkan attribut class dan id di dalam tag HTML nya yang nanti dipanggil di dalam CSS untuk mengatur gaya atau style. Penulisan class nantinya dalam CSS nya ditulis diawali dengan titik (.) lalu nama class. Penulisan ID nantinya dalam CSS nya ditulis diawali dengan tagar (#) lalu nama ID.
Contoh Kodingan Embedded CSS
1. EmbeddedWithClassAndId1.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
#id {
background-color: greenyellow;
border: 2px solid black;
padding: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.kotak {
text-shadow: 5px 5px 5px blue;
width: 150px;
}
#sunda {
background-color: aquamarine;
border: dashed;
padding: 5px;
font-family: 'Courier New', Courier, monospace;
}
#en {
background-color: blueviolet;
border: double;
padding: 3px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<center>
<div id="id" class="kotak">Terima Kasih</div><br>
<div id="sunda" class="kotak">Hatur Nuhun</div><br>
<div id="en" class="kotak">Thank You</div>
</center>
</body>
</html>
Hasil Kodingan di atas
2. EmbeddedWithClassAndId2.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
input#tombol {
color: aqua;
background: grey;
border: 2px outset blueviolet;
border-radius: 20px;
font-size: 14px;
font: bold;
margin-left: 100px;
}
.label {
padding: 5px;
border: 2px solid blueviolet;
border-radius: 20px;
color: aqua;
background:grey;
size: 12px;
}
.input {
border: 3px solid blueviolet;
border-radius: 20px;
background: grey;
padding: 5px;
color: aqua;
}
</style>
</head>
<body>
<form action="" name="login">
<p>
<label for="username" class="label">Username</label>
<input type="text" class="input">
</p>
<p>
<label for="password" class="label">Password</label>
<input type="password" class="input">
</p>
<p>
<input type="submit" id="tombol" value="login">
</p>
</form>
</body>
</html>
Hasil Kodingan di atas
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
body,p {
color: fuchsia;
}
h1 {
color: coral;
}
p.ex {
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<h1>ini adalah heading 1</h1>
<p>ini dalah paragraph, ditulis dengan warna fuchsia. Default text-color didefiniskan pada body selector.</p>
<p class="ex">ini adalah paragraph with class="ex". Dan warna teks biru</p>
</body>
</html>
Hasil Kodingan di atas
Contoh kodingan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
p {
text-align: center;
text-indent: 2cm;
}
p#kanan {
text-align: right;
color: chartreuse;
}
p.besar {
text-transform: uppercase;
}
p.kecil {
text-transform: lowercase;
}
p.kapital {
text-transform: capitalize;
}
</style>
</head>
<body>
<p>Dengan text indent.
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemogramman web, baik secara server sidea-scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript).
</p>
<p id="kanan">
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemogramman web, baik secara server sidea-scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript).
</p>
<p class="besar">Pengubahan menjadi huruf Besar (kapital)</p>
<p class="kecil">PENGUBAHAN MENJADI HURUF KECIL</p>
<p class="kapital">huruf kapital pada setiap awal kata</p>
</body>
</html>
Hasil Kodingan di atas
C. Eksternal CSS
Penulisan Jenis ini dengan cara menuliskan CSS nya di file khusus CSS jadi berbeda dengan file HTMl nya yang nanti dipanggil menggunakan tag <link>
Contoh Kodingan Eksternal CSS
1. EksternalWithClassAndId.html (file HTML nya)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="ExternalWithClassDanId.css">
</head>
<body>
<center>
<div id="id" class="kotak">Terima Kasih</div><br>
<div id="jp" class="kotak">Arigato Gozaimash</div><br>
<div id="en" class="kotak">Thank You</div>
</center>
</body>
</html>
EksternalWithClassAndId.css (file CSS nya)
.kotak {
border: solid;
padding: 5px;
}
#id {
width: 400px;
height: 100px;
float: left;
background-color: papayawhip;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#jp {
width: 400px;
height: 100px;
float: left;
background-color: thistle;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#en {
width: 400px;
height: 100px;
float: left;
background-color: lightcyan;
font-family: Arial, Helvetica, sans-serif;
}
Hasil Kodingan di atas
2. FormatCharacterSpacing.html (file HTML nya)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="FormatCharacterSpacing.css">
</head>
<body>
<p>Pengaturan Pada Huruf</p>
<h4>ini adalah Header 4</h4>
</body>
</html>
FormatCharacterSpacing.css (file CSS nya)
p {
letter-spacing: 0.5cm;
color: darkslateblue;
}
h4 {
letter-spacing: -1px;
color: coral;
}
Hasil Kodingan di atas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="TextDecoAndSpacing.css">
</head>
<body>
<em>bentuk overline</em>
<h2>pada h2 in line through</h2>
<h3>ini h3, ini garis bawah</h3>
<p>
<a href="http//:twitter.com">
klink disini, sekarang link tanpa warna biru dan garis bawah
</a>
</p>
<p class="duasenti">
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh penerapan dari style tersebut : Bila listing kode di atas dijalankan akan menghasilkan tampilan seperti berikut.
</p>
<p class="limapiksel">
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
</p>
</body>
</html>
TextDecoAndaSpacing.css (file CSS nya)
em {
text-decoration: none;
color: salmon;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
a {
text-decoration: none;
color: lawngreen;
}
p.duasenti {
word-spacing: 2cm;
}
p.limapiksel {
word-spacing: 5px;
}
Hasil Kodingan di atas
Pada Praktikum Ini kita menggunakan penulisan CSS untuk menambahkan gaya pada webiste menggunakan materi materi yang sudah dipelajari di atas.
Kodingan Praktikum
File HTML nya
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="Praktikum.css">
</head>
<body background="../img/bgblack.jpg">
<div class="judul">
<center>
<img src="../img/logoave.png" width="30%" alt="">
</center>
</div>
<div class="container">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<div class="slide_konten" id="satu">
<div class="isi">
<img src="../img/ca.png" width="37%" alt=""><br>
<h1>Captain America</h1>
<p>Captain America adalah sosok pahlawan super fiktif dari Marvel Comics. Memiliki musuh besar bernama Red Skull dan Baron Zemo, Rogers adalah tentara AS yang tidak memiliki kemampuan sama sekali. Berkat bantuan Dr. Joshef Reinstein dengan serum super soldiernya. Pahlawan yg lahir pada tahun 1920 ini menjadi pahlawan perang Amerika Serikat saat menghadapi sekutu NAZI yang dipimpin oleh Adolf Hitler. Dibuat oleh komikus Joe Simon dan Jack Kirby, karakter pertama kali muncul di Captain America Comics # 1 (cover Maret 1941) dari Timely Comics, pendahulu dari Marvel Comics.
Captain America memakai kostum yang dikenakan bendera bermotif bendera Amerika Serikat, dan dipersenjatai dengan perisai hampir tidak bisa dihancurkan saat ia melempar pada musuh. Karakter ini biasanya digambarkan sebagai alter ego dari Steve Rogers, seorang pemuda lemah yang ditingkatkan ke puncak kesempurnaan manusia oleh serum eksperimental untuk membantu upaya pemerintah Amerika Serikat dalam Perang Dunia II. Menjelang akhir perang, ia terjebak dalam es dan selamat dalam animasi ditangguhkan sampai dia dihidupkan kembali pada hari ini. Meskipun Captain America sering berjuang untuk mempertahankan cita-citanya sebagai seorang pria yang keluar dari waktunya dengan realitas modern, ia tetap menjadi tokoh yang sangat dihormati di masyarakat yang meliputi menjadi pemimpin lama dari Avengers.</p>
<h2>Skills</h2>
<h3>Kekuatan || 85%</h3>
<div class="bar">
<div class="progress" style="width: 85%"></div>
</div>
<h3>Pertahanan || 90%</h3>
<div class="bar">
<div class="progress" style="width: 90%"></div>
</div>
<h3>Kecepatan || 70%</h3>
<div class="bar">
<div class="progress" style="width: 70%"></div>
</div>
<h3>Kecerdasan || 80%</h3>
<div class="bar">
<div class="progress" style="width:80%"></div>
</div>
</div>
<label class="prev" for="i5"><span>‹</span></label>
<label class="next" for="i2"><span>›</span></label>
</div>
<div class="slide_konten" id="dua">
<div class="isi">
<img src="../img/thor.png" width="37%" alt=""><br>
<h1>Thor</h1>
<p>Thor adalah sebuah pahlawan super fiksi yang muncul dalam buku-buku komik Amerika yang diterbitkan oleh Marvel Comics. Karakter tersebut, yang berdasarkan pada dewa mitologi Norse dengan nama yang sama, adalah dewa petir dan memegang sebuah palu, yang memberikannya kemampuan terbang dan mengendalikan cuaca.<br>
Thor adalah pejuang tangan-ke-tangan yang luar biasa, dan terampil dalam pertempuran bersenjata, yang mahir dalam penggunaan palu perang, pedang, kapak dan gada. Thor memiliki dua item yang membantu dia dalam pertempuran: Belt terpesona Kekuatan, dan senjata yang dibuatnya sendiri, palu Mjolnir yang mistis. Item pertama kekuatan ganda dan daya tahan Thor sedangkan yang kedua digunakan untuk mengontrol kemampuan cuaca nya; penerbangan; proyeksi energi dan penyerapan; perjalanan dimensi; manipulasi materi dan yang paling kuat dari serangan nya, God Blast (yang menyentuh kekuatan hidup Thor),[ledakan Thermo, dan Anti-Force (yang melawan kekuatan lain). Menggunakan Mjolnir dengan melemparkan ke arah yang diinginkan dan kemudian berpegang pada pegangan berbahan kulit, Thor dapat terbang pada kecepatan supersonik di atmosfer Bumi dan perjalanan lebih cepat dari cahaya dalam ruang.
</p>
<h2>Skills</h2>
<h3>Kekuatan || 95%</h3>
<div class="bar">
<div class="progress" style="width: 95%"></div>
</div>
<h3>Pertahanan || 80%</h3>
<div class="bar">
<div class="progress" style="width: 80%"></div>
</div>
<h3>Kecepatan || 85%</h3>
<div class="bar">
<div class="progress" style="width: 85%"></div>
</div>
<h3>Kecerdasan || 75%</h3>
<div class="bar">
<div class="progress" style="width:75%"></div>
</div>
</div>
<label class="prev" for="i1"><span>‹</span></label>
<label class="next" for="i3"><span>›</span></label>
</div>
<div class="slide_konten" id="tiga">
<div class="isi">
<img src="../img/ironman.png" width="23%" style="margin-right: 117px; margin-left:130px;" alt=""><br>
<h1>Iron Man</h1>
<p>Iron Man (Anthony Edward "Tony" Stark) adalah pahlawan super fiksi yang muncul dalam buku komik Amerika yang diterbitkan oleh Marvel Comics, serta media yang terkait. Karakter diciptakan oleh penulis dan editor Stan Lee, yang dikembangkan oleh penulis skenario Larry Lieber, dan dirancang oleh seniman Don Heck dan Jack Kirby. Dia membuat penampilan pertamanya di Tales of Suspense #39 (cover tertanggal bulan Maret 1963).
Sepanjang sebagian besar sejarah publikasi karakter, Iron Man telah menjadi anggota pendiri tim superhero Avengers dan telah tampil dalam beberapa inkarnasi dari berbagai seri buku komik sendiri. Iron Man telah diadaptasi untuk beberapa acara TV animasi dan film. Karakter ini diperankan oleh Robert Downey Jr. dalam hidup film aksi Iron Man (2008), yang merupakan box office. Downey, yang menerima banyak pujian untuk penampilannya, mengulangi peran dalam cameo di The Incredible Hulk (2008), dua sekuel Iron Man Iron Man 2 (2010) dan Iron Man 3 (2013), The Avengers (2012), Avengers: Age of Ultron (2015), dan Captain America: Civil War (2016), dan akan melakukannya lagi di Spider-Man: Homecoming (2017) serta Avengers: Infinity War (2018) dan sekuelnya Avengers: Endgame (2019) di Marvel Cinematic Universe.
</p>
<h2>Skills</h2>
<h3>Kekuatan || 85%</h3>
<div class="bar">
<div class="progress" style="width: 85%"></div>
</div>
<h3>Pertahanan || 83%</h3>
<div class="bar">
<div class="progress" style="width: 83%"></div>
</div>
<h3>Kecepatan || 87%</h3>
<div class="bar">
<div class="progress" style="width: 87%"></div>
</div>
<h3>Kecerdasan || 95%</h3>
<div class="bar">
<div class="progress" style="width:95%"></div>
</div>
</div>
<label class="prev" for="i2"><span>‹</span></label>
<label class="next" for="i1"><span>›</span></label>
</div>
<div id="nav_slide">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
</div>
</div>
</body>
</html>
File CSS nya
.judul {
margin-top: -100px;
margin-bottom: -130px;
}
#i1, #i2, #i3{
display: none;
}
.container{
margin: 0 auto;
margin-top: 20px;
position: relative;
width: 90%;
height: 80px;
padding-bottom: 38%;
user-select: none;
background-color: #1c1c1c;
border: solid 10px #616161;
border-radius:30px ;
}
.container .slide_konten{
position: absolute;
width: 100%;;
height: 100%;
background-image: url(../img/bgaveg.jpg);
background-size: cover;
border-radius: 20px;
}
.prev, .next{
width: 8%;
height: inherit;
position: absolute;
top:0;
background-color: rgba(88, 88, 88,.2);
color:white;
z-index: 99;
transition: .45s;
cursor: pointer;
text-align: center;
}
.next {
right:0;
}
.prev {
left:0;
}
.isi {
width: 95%;
height: 95%;
background-color: grey;
opacity: 0.7;
margin-left: 47px;
margin-top: 23px;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container .slide_konten .isi img {
float: left;
opacity: 1;
}
.container .slide_konten .isi p {
margin-right: 50px;
}
.container .slide_konten .isi .bar {
margin-left:640px;
background-color: #cde1f8;
width: 56%;
height: 10px;
}
.container .slide_konten .isi .bar .progress {
height: 10px;
background-color: #0078ff;
}
label span{
position: relative;
font-size: 100pt;
top: 30%;
transform: translateY(-30%);
}
.prev:hover, .next:hover{
transition: .2s;
background-color: rgba(88, 88, 89,.8);
color: #ffffff;
}
.container #nav_slide{
width: 100%;
bottom: 12%;
height: 11px;
position: absolute;
text-align: center;
z-index: 99;
cursor: default;
}
#nav_slide .dots{
top: -5px;
width: 18px;
height: 18px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
transition: .4s;
}
#nav_slide .dots:hover {
cursor: pointer;
background-color: lightgray;
transition: .25s;
}
.slide_konten{z-index: -1;}
#i1:checked ~ #satu ,#i2:checked ~ #dua ,#i3:checked ~ #tiga {
z-index: 9;
animation: scroll 0.5s ease-in-out;
}
#i1:checked ~ #nav_slide #dot1,
#i2:checked ~ #nav_slide #dot2,
#i3:checked ~ #nav_slide #dot3{
background-color: grey;
}
@keyframes scroll{
0%{ opacity:.4;}
100%{opacity:1;}
}
Hasil Kodingan di atas
0 Comments