Assalamualaikum Wr. Wb
Wah lama ya kita tidak jumpa, gak kangen gitu sama mimin eaa... ngomong ngomong kalian dirumah pada nyate gak nih,kalo gitu mimin mau minta hehe.. Oke tak usah basa basi langsung saja kita ke pembahasan hari ini yaitu Css, min apa itu css? oke mimin akan jawab tapi sabar dulu ya, kali ini kita akan membahas jeng jeng:> Pengertian dan fungsi Css
> Manfaat Css
> Anatomi Css
> Properti Css
> Pengkodingan Css
> Part Bonus
Oke langsung sadja kita ke pembahasan pertama ya gengs yaitu:
1. Pengertian dan fungsi Css
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.
Fungsi nya:
Tujuan utama dari CSS dikembangakan ialah agar dapat membedakan konten dari dokumen dan dari tampilan dokumen. Maka dari itu, pembuatan dalam pemrograman ulang web pun akan lebih mudah dilakukan. Hal-hal yang terlibat dalam desain web itu adalah warna, ukuran dan formatting. Dengan adanya CSS ini, konten dan desain web akan tampak mudah saat dibedakan, jadi memungkinkan juga untuk melakukan pengulangan pada tampilan-tampilan tertentu pada suatu web, sehingga akan sangat memudahkan dalam hal membuat halaman web yang banyak, dimana pada akhirnya bisa menghemat waktu dalam pembuatan web.
Fungsi utama dari css ialah mendesain, merancang, merubah, dan juga membentuk halaman pada wesite ataupun blog dan isi dari halaman website itu ialah tag-tag html, logikanya css itu bisa mengubah tag-tag html yang sederhana sehingga bisa menjadi lebih fungsional dan juga menarik.
2. Manfaat Css
1.Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
2.Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
3.Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
4.Dapat berkolaborasi dengan JavaScript
Dapat digunakan dalam hampir semua jenis web browser.3. Anatomi Css
4. Properti Css
Pengaturan warna pada teks/color
CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut :
1.nilai HEX à misalnya, "#ff0000"
2.nilai RGB à misalnya, "rgb(255,0,0)"
3.nama dari warna tersebut à misalnya "red“
4.Menggunakan Color in CSS à Misalnya, “Thistle, GoldenRod, Salmon”
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut :
selector {color:nilai warna;}
4. Pengkodingan Css
> Inline Css
Inline CSS digunakan untuk tag HTML tertentu. Atribut
Contoh halaman HTML dengan inline CSS adalah seperti berikut:
<style> digunakan untuk memberikan style ke tag HTML tertentu. Cara ini kurang direkomendasikan, karena setiap tag HTML malah harus diberikan style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, pada saat Anda tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja.Contoh halaman HTML dengan inline CSS adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh penggunaan Inline</title>
<link rel="stylesheet" href="">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p align="center" style="color:Teal; font-family: impact; font-size: 24px; text-shadow: 12px 2px 5px fuchsia; ">
Hello Word, ini adalah contoh penggunaan inline!
</p>
</body>
</html>
<html>
<head>
<title>Contoh penggunaan Inline</title>
<link rel="stylesheet" href="">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p align="center" style="color:Teal; font-family: impact; font-size: 24px; text-shadow: 12px 2px 5px fuchsia; ">
Hello Word, ini adalah contoh penggunaan inline!
</p>
</body>
</html>
Hasilnya akan jadi seperti ini ya:
Kita bisa menempelkan kode CSS di antara tag <head> & </head>. penulisan CSS dengan cara ini awalnya diawali dengan tag <style></style>.
> Selector Id
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
> Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.”
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Embedded, Selector Class san ID</title>
<style type="text/css">
#BhsIndo{
background-color: ghost;
border: solid;
padding: 5px;
font-family: Raleway;
}
.kotak{
text-shadow: 5px 5px 5px yellow;
}
#BasaSunda{
background-color: salmon;
border: dashed;
padding: 5px;
font-family: consolas;
}
#English{
background-color: goldenrod;
border: double;
padding:3px;
font-family: impact;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<div id="BhsIndo" class="kotak"> Selamat Pagi!</div>
<div id="BasaSunda"> Wilujeung Enjing!</div>
<div id="English" class="kotak">Good Morning!</div>
</body>
</html>
<html>
<head>
<title>Contoh Embedded, Selector Class san ID</title>
<style type="text/css">
#BhsIndo{
background-color: ghost;
border: solid;
padding: 5px;
font-family: Raleway;
}
.kotak{
text-shadow: 5px 5px 5px yellow;
}
#BasaSunda{
background-color: salmon;
border: dashed;
padding: 5px;
font-family: consolas;
}
#English{
background-color: goldenrod;
border: double;
padding:3px;
font-family: impact;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<div id="BhsIndo" class="kotak"> Selamat Pagi!</div>
<div id="BasaSunda"> Wilujeung Enjing!</div>
<div id="English" class="kotak">Good Morning!</div>
</body>
</html>
Hasilnya akan jadi:
Contoh lagi:
<!DOCTYPE html>
<html>
<head>
<title>Embeded css atau Internal</title>
<style type="text/css">
input#tombol{
color: aqua;
background: salmon;
border: 2px outset #bbd16d;
font-size: 14px;
font:bold;
}
.username{
color: blue;
background: aqua;
size: 12px;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p><form name="LOGIN">
<label for="username" class="username">Username</label>
<input type="text"></input></p>
<p><label for="password">Password</label>
<input type="password"></input></p>
<p><input id="tombol" type="submit" value="login">
</p></form>
</body>
</html>
<html>
<head>
<title>Embeded css atau Internal</title>
<style type="text/css">
input#tombol{
color: aqua;
background: salmon;
border: 2px outset #bbd16d;
font-size: 14px;
font:bold;
}
.username{
color: blue;
background: aqua;
size: 12px;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p><form name="LOGIN">
<label for="username" class="username">Username</label>
<input type="text"></input></p>
<p><label for="password">Password</label>
<input type="password"></input></p>
<p><input id="tombol" type="submit" value="login">
</p></form>
</body>
</html>
Hasilnya akan jadi:
> Eksternal with class and id
Salah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian
<head> pada halaman:
<!DOCTYPE html>
<html>
<head>
<title>External css</title>
<link rel="stylesheet" href="external.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<div id="BhsIndo" class="kotak">Selamat siang!</div>
<div id="japanese" class="kotak">Konnichiwa</div>
<div id="english">Good afternoon</div>
</body>
</html>
<html>
<head>
<title>External css</title>
<link rel="stylesheet" href="external.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<div id="BhsIndo" class="kotak">Selamat siang!</div>
<div id="japanese" class="kotak">Konnichiwa</div>
<div id="english">Good afternoon</div>
</body>
</html>
Dan ini link css nya:
.kotak{
border: solid;
padding: 5px;
}
#BhsIndo{
width: 400px;
height: 100px;
float: left;
background-color: papayawhip;
font-family: consolas;
}
#japanese{
width: 400px;
height: 100px;
float: left;
background-color: thistle;
font-family: impact;
}
#english{
width: 400px;
height: 100px;
float: left;
background-color: lightcyan;
font-family: arial;
}
border: solid;
padding: 5px;
}
#BhsIndo{
width: 400px;
height: 100px;
float: left;
background-color: papayawhip;
font-family: consolas;
}
#japanese{
width: 400px;
height: 100px;
float: left;
background-color: thistle;
font-family: impact;
}
#english{
width: 400px;
height: 100px;
float: left;
background-color: lightcyan;
font-family: arial;
}
Nah penasaran ya gengs ini dia hasilnya:
Ini dia contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Embed CSS macam2 Heading</title>
<style type="text/css">
body,p{
color: fuchsia;
}
h1{
color: coral;
}
p.ex{
color: rgb(0,0,225);
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<h1>Ini heading</h1>
<p>Ini adalah paragraph, ditulis dengan warna fuchsia. Default text color didefinisikan pada body selector.</p>
<p class="ex">Ini adalah paragraph with class="ex. Dan warna teks biru.</p>
</body>
</html>
<html>
<head>
<title>Embed CSS macam2 Heading</title>
<style type="text/css">
body,p{
color: fuchsia;
}
h1{
color: coral;
}
p.ex{
color: rgb(0,0,225);
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<h1>Ini heading</h1>
<p>Ini adalah paragraph, ditulis dengan warna fuchsia. Default text color didefinisikan pada body selector.</p>
<p class="ex">Ini adalah paragraph with class="ex. Dan warna teks biru.</p>
</body>
</html>
Hasilnya:
Ini dia contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Ext CSS, format paragraf</title>
<link rel="stylesheet" href="karakter.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p>Pengaturan spasi pada huruf</p>
<h4>Ini adalah header 4</h4>
</body>
</html>
<html>
<head>
<title>Ext CSS, format paragraf</title>
<link rel="stylesheet" href="karakter.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p>Pengaturan spasi pada huruf</p>
<h4>Ini adalah header 4</h4>
</body>
</html>
Ini dia file css nya:
p{
letter-spacing: 0,5cm;
color: darkseagreen;
}
h4{
letter-spacing: -2px;
color: coral;
}
letter-spacing: 0,5cm;
color: darkseagreen;
}
h4{
letter-spacing: -2px;
color: coral;
}
Hasilnya akan jadi:
Ini dia contohnya:
<!DOCTYPE html>
<html>
<head>
<title> Teks dekorasi pada css</title>
<link rel="stylesheet" href="dekorasi.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<em>Bentuk Overline</em>
<h2>Pada h2 ini line through</h2>
<h3>ini h3, ini daris bawah</h3>
<p><a href="http://twitter.com">
Klik disini gengs :)
</a></p>
<p class="duasenti">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolorum,</p>
<p class="limapiksel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolorum,</p>
</body>
</html>
<html>
<head>
<title> Teks dekorasi pada css</title>
<link rel="stylesheet" href="dekorasi.css" type="text/css">
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<em>Bentuk Overline</em>
<h2>Pada h2 ini line through</h2>
<h3>ini h3, ini daris bawah</h3>
<p><a href="http://twitter.com">
Klik disini gengs :)
</a></p>
<p class="duasenti">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolorum,</p>
<p class="limapiksel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolorum,</p>
</body>
</html>
Dan ini file css nya:
em{
text-decoration: overline;
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;
}
text-decoration: overline;
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;
}
Hasilnya akan jadi:
> Embalign
Ini contohnya gengs:
<!DOCTYPE html>
<html>
<head>
<title>Format text</title>
<style type="text/css">
p{
text-indent: 2cm;
text-align: justify;
}
p#kanan{
text-align: right; color: blue;
}
p.besar{
text-transform:uppercase;
}
p.kapital{
text-transform: capitalize;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate impedit veritatis excepturi, veniam inventore tempora natus</p>
<p id="kanan">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nihil voluptatum nemo, sit voluptas modi enim assumenda.</p>
<p class="besar">Ini huruf kapital</p>
<p class="kecil">Ini huruf kecil</p>
<p class="kapital">Huruf kapital awal kata</p>
</body>
</html>
<html>
<head>
<title>Format text</title>
<style type="text/css">
p{
text-indent: 2cm;
text-align: justify;
}
p#kanan{
text-align: right; color: blue;
}
p.besar{
text-transform:uppercase;
}
p.kapital{
text-transform: capitalize;
}
</style>
</head>
<body>
<h3>Annisarhy||X-RPL1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate impedit veritatis excepturi, veniam inventore tempora natus</p>
<p id="kanan">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nihil voluptatum nemo, sit voluptas modi enim assumenda.</p>
<p class="besar">Ini huruf kapital</p>
<p class="kecil">Ini huruf kecil</p>
<p class="kapital">Huruf kapital awal kata</p>
</body>
</html>
Hasilnya gengs:
5. Part Bonus
Disini mimin membuat karya dengan menggunakan css nih,disini kebanyakan mimin memakai properti margin untuk mengatur letak letak dari teks, maupun border ini dia hasil karya mimin:
<!DOCTYPE html>
<html>
<head>
<title>Artikel</title>
<link rel="stylesheet" href="artikel.css" type="text/css">
</head>
<body>
<p class="judul"><img class="menu" src="bahan/menus.png">Homina Tech
<img class="search" src="bahan/secing.png"></p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Gallery</a></li>
<li><a href="#home">About</a></li>
<li><a href="#news">Trick</a></li>
<li><a href="#home">Sign in</a></li>
<li><a href="#news">More Info</a></li>
</ul>
<h1>Kemeriahan Asian Games 2018</h1>
<p class="hari"><i>Sabtu, 25 Agustus 2018 <br>By: Annisarahayu | 18.00</p></i><br>
<img class="op" src="bahan/opening.jpg">
<img class="cab" src="bahan/cabor.jpg">
<img class="sea" src="bahan/asiangames.png">
<p class="isi"> Tanggal 18 Agustus 2018 Asian Games 2018 resmi dibuka, dan opening ceremony Asian Games 2018 diadakan di stadion Gelora Bung Karno (GBK) Jakarta. Upacara pembukaan berlangsung sangat meriah, para atlet dari negara-negara peserta Asian Games pun melakukan parade perkenalan.<br>Beberapa artis Indonesia juga tampil memeriahkan acara pembukaan Asian Games 2018 ini lho. Tentu saja mereka merasa bangga bisa tampil di acara ini, dan sudah mempersiapkan diri dengan sebaik-baiknya. Tampil di atas pentas Asian Games 2018 dan disaksikan oleh ratusan juta orang di Asia, penampilan para artis ini sangat memukau.<br>Inilah deretan artis yang turut serta tampil mengisi acara Asian Games 2018 di stadion Gelora Bung Karno pada 18 Agustus 2018 kemarin.<br>1. Rossa <br>2. Via Vallen <br>3. Raisa <br>4. Fatin Shidqia <br>5. Anggun.C.Sasmi <br>6. Wizzy Williana <br>7. GAC (Gamaliel Audrey Cantika) <br>8. Ariel Noah, Rian D'masiv, Sheryl Sheinafia, dan Cakra Khan <br>9. Rinni Wulandari <br>10. Putri Ayu <br> Perolehan medali terkini: <br><br><b>Medali emas - 10</b><br><br>Khoiful Mukhib (downhill)<br>Tiara Andini Prastika (downhill)<br>Eko Yuli Irawan (angkat berat)<br>Defia Rosmaniar (taekwondo)<br>Lindswell Kwok (wushu)<br>Tim putra ketepatan mendarat (paralayang)<br>Jafro Megaranto (paralayang)<br>Aries Susanti Rahayu (panjang tebing)<br>
</p>
<p class="copyright">Create by: Annisarhy ♥</p>
</body>
</html>
<html>
<head>
<title>Artikel</title>
<link rel="stylesheet" href="artikel.css" type="text/css">
</head>
<body>
<p class="judul"><img class="menu" src="bahan/menus.png">Homina Tech
<img class="search" src="bahan/secing.png"></p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Gallery</a></li>
<li><a href="#home">About</a></li>
<li><a href="#news">Trick</a></li>
<li><a href="#home">Sign in</a></li>
<li><a href="#news">More Info</a></li>
</ul>
<h1>Kemeriahan Asian Games 2018</h1>
<p class="hari"><i>Sabtu, 25 Agustus 2018 <br>By: Annisarahayu | 18.00</p></i><br>
<img class="op" src="bahan/opening.jpg">
<img class="cab" src="bahan/cabor.jpg">
<img class="sea" src="bahan/asiangames.png">
<p class="isi"> Tanggal 18 Agustus 2018 Asian Games 2018 resmi dibuka, dan opening ceremony Asian Games 2018 diadakan di stadion Gelora Bung Karno (GBK) Jakarta. Upacara pembukaan berlangsung sangat meriah, para atlet dari negara-negara peserta Asian Games pun melakukan parade perkenalan.<br>Beberapa artis Indonesia juga tampil memeriahkan acara pembukaan Asian Games 2018 ini lho. Tentu saja mereka merasa bangga bisa tampil di acara ini, dan sudah mempersiapkan diri dengan sebaik-baiknya. Tampil di atas pentas Asian Games 2018 dan disaksikan oleh ratusan juta orang di Asia, penampilan para artis ini sangat memukau.<br>Inilah deretan artis yang turut serta tampil mengisi acara Asian Games 2018 di stadion Gelora Bung Karno pada 18 Agustus 2018 kemarin.<br>1. Rossa <br>2. Via Vallen <br>3. Raisa <br>4. Fatin Shidqia <br>5. Anggun.C.Sasmi <br>6. Wizzy Williana <br>7. GAC (Gamaliel Audrey Cantika) <br>8. Ariel Noah, Rian D'masiv, Sheryl Sheinafia, dan Cakra Khan <br>9. Rinni Wulandari <br>10. Putri Ayu <br> Perolehan medali terkini: <br><br><b>Medali emas - 10</b><br><br>Khoiful Mukhib (downhill)<br>Tiara Andini Prastika (downhill)<br>Eko Yuli Irawan (angkat berat)<br>Defia Rosmaniar (taekwondo)<br>Lindswell Kwok (wushu)<br>Tim putra ketepatan mendarat (paralayang)<br>Jafro Megaranto (paralayang)<br>Aries Susanti Rahayu (panjang tebing)<br>
</p>
<p class="copyright">Create by: Annisarhy ♥</p>
</body>
</html>
Ini dia file Css nya:
body {
margin-bottom: 100px;
margin-right: 80px;
margin-left: 80px;
border-style: solid;
}
img.menu {
width: 45px;
height: 45px;
padding-right: 360px;
padding-left: 20px;
}
img.search {
padding-left: 260px;
}
p.judul {
margin-top: 15px;
margin-bottom: 15px;
font-family: ArtBrush;
letter-spacing: 3px;
font-size: 60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
font-family: tw cen mt;
font-size: 20px;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: green;
}
h1 {
font-family: tw cen mt;
text-align: center;
font-size: 40px;
}
p.hari {
font-family: sans-serif;
font-size: 15px;
text-align: left;
margin-left: 150px;
color: grey;
}
img.op {
width: 550px;
height: 300px;
margin-left: 150px;
align-content: left;
}
img.cab {
width: 300px;
height: 300px;
align-content: right;
margin-left: 30px;
}
img.sea {
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 150px;
}
p.isi {
font-family: tw cen mt;
font-size: 20px;
margin-left: 40px;
}
p.copyright {
font-size: 20px;
font-family: tw cen mt;
text-align: center;
}
margin-bottom: 100px;
margin-right: 80px;
margin-left: 80px;
border-style: solid;
}
img.menu {
width: 45px;
height: 45px;
padding-right: 360px;
padding-left: 20px;
}
img.search {
padding-left: 260px;
}
p.judul {
margin-top: 15px;
margin-bottom: 15px;
font-family: ArtBrush;
letter-spacing: 3px;
font-size: 60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
font-family: tw cen mt;
font-size: 20px;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: green;
}
h1 {
font-family: tw cen mt;
text-align: center;
font-size: 40px;
}
p.hari {
font-family: sans-serif;
font-size: 15px;
text-align: left;
margin-left: 150px;
color: grey;
}
img.op {
width: 550px;
height: 300px;
margin-left: 150px;
align-content: left;
}
img.cab {
width: 300px;
height: 300px;
align-content: right;
margin-left: 30px;
}
img.sea {
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 150px;
}
p.isi {
font-family: tw cen mt;
font-size: 20px;
margin-left: 40px;
}
p.copyright {
font-size: 20px;
font-family: tw cen mt;
text-align: center;
}
Hasilnya penasaran, ini dia:
Jangan lupa untuk selalu memotivasi diri sendiri
0 Komentar