Memahami CSS (Cascading Style Sheet)

Agustus 21, 2019

Memahami CSS (Cascading Style Sheet)

PRAKTIKUM 9

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Yupp balik lagi di blog saya, kaliini kita akan mulai memasuki materi mengenai css atau Cascading Style Sheet. Agar mudah, kita dapat artikan bahwa css itu seperti salah satu dokumen atau atribut dalam website yang mengatur gaya tampilan website itu sendiri (style). beberapa properti pada css yang harus kita ketahui yaitu :

color : megatur warna dari text
direction : menentukan arah tulisan/text
letter-spacing : menambah ataupun mengurangi spasi antar karakter dalam teks
line-height : mengatur tinggi baris text
text-align : menentukan batas text secara horiz
text-decoration : menentukan dekorasi/hiasan pada text
text-indent : menentukan jarak inden dari baris pertama dalam text-box
text-shadow : menentukan efek bayangan pada text
text-tranform : mengatur huruf besar-huruf kecil dari teks
unicode-bidi : untuk mengest unicode
vertical align : menentukan batas teks secara vertikal
white space : menentukan penulisan white-space pada setiap elemen
word-spacing : menambah ataupun mengurangi spasi antar kata dalam teks

Manfaat dari CSS adalah sebagai berikut :

Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya denngan mengubah file CSS nya saja.
Dapat berkolaborasi dengan JavaScript
Dapat digunakan dalam hampir semua jenis web browser

Baik, untuk penerapan serta contoh pembelajaran bagi kita semua maka langsung saja kita masuk ke percobaan pertama. kita mulai dari yang paling mendasar gaess...

In line

<!DOCTYPE html>
<html>
<head>
 <title>in line css M.Fadlul Hafiizh XI-RPL 2</title>
</head>
<body>
 <p align="center" style="color: teal; font-family: impact; font-size: 24px; text-shadow: 12px 2px 5px fuchsia;">
Hello world, ini adalah contoh penggunaan inine!
 </p>
</body>
</html>

Hasil dari kodingan diatas :

Embedded With Class and ID 1

<!DOCTYPE html>
<html>
<head>
 <title>Emmbed css atau internal M.Fadlul Hafiizh</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: Golden Rod;
   border: double;
   padding: 3px
   font-family: impact;
  }
 </style>
</head>
<body>
 <div id="BhsIndo" class="kotak">
Selamat Pagi!</div>
<div id="BasaSunda">
Wilujeng Sumping!</div>
<div id="english" class="kotak">
good morning!</div>
</body>
</html>

Hasilnya seperti ini :

Embedded With Class and ID 2

<!DOCTYPE html>
<html>
<head>
 <title>Embedded css atau Internal M.Fadlul Hafiizh XI-RPL2</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>
 <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"></input>
 </p>
</form>
</body>
</html>

Hasilnya akan jadi seperti ini :

External With Class and ID

<!DOCTYPE html>
<html>
<head>
 <title>External css by M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="styleexternal.css">
</head>
<body>
 <div id="BhsIndo" class="kotak">
Selamat Siang!</div>
<div id="japanese" class="kotak">
Konnichiwa</div>
<div id="english">
Good Afternoon</div>
</body>
</html>

Digabungkan Dengan External CSS:

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

Hasil dari kodingan tersebut :

Jadi untuk external css ini, file css terpisah dari file html dan file css yang terpisah, harus dipanggil menggunakan tag <link>.

Embedded Heading Color

<!DOCTYPE html>
<html>
<head>
 <title>Embed CSS macam2 heading M.Fadlul Hafiizh XI-RPL 2</title>
<style type="text/css">
 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 adalah paragraph, ditulis dengan warna fuchsia.
Default text-color didefinisikan para body selector.</p>
<p class="ex">
ini adalah paragraph with class="ex". Dan warna teks biru.</p>
</body>
</html>

Hasilnya Jadi Seperti Ini :

Format Character Spacing

<!DOCTYPE html>
<html>
<head>
 <title>Ext css, format paragraf M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="ExtFormatKarakter.css">
</head>
<body>
 <p>
Pengaturan Spasi pada huruf</p>
<h4>
Ini adalah Header 4</h4>
</body>
</html>

CSSnya :

{
 letter-spacing: 0.5cm;
 color: darkseagreen;
}
h4{
 letter-spacing: -2px;
 color: coral;
}

Hasilnya menjadi seperti ini :

Text Deco and Spacing

<!DOCTYPE html>
<html>
<head>
 <title>Text Decoration pada css M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="ExtTextDecoAndSpacing.css">
</head>
<body>
<em>Bentuk overline</em>
<h2>
pada h2 ini line through</h2>
<h3>
ini h3, ini garis bawah</h3>
<p>
<a href="http://twitter.com">
 klik disini, sekarang 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 diatas dijalankan akan menghasilkan tampilan sebagai 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>

CSSnya :

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

Maka hasil yang ditampilkan seperti ini :

Embedded Indent Align Upper

<!DOCTYPE html>
<html>
<head>
 <title>Format Text M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  p{
   text-indent: 2cm;
   text-align: justify;
  }
  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 adalah menggunakan bahasa pemrograman web, baik secara server side 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, selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side
 </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>

Hasilnya :

Tugas Praktikum

Jadi ini adalah tugas saya untuk membuat sebuah halaman web yang menggunakan css sebagai styling utama. dan inilah kodingan beserta hasilnya :

<!DOCTYPE html>
<html>
<head>
 <title>Tugas Praktikum M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  body{
   background-color: #3a8db7;
  }

  h1{
   text-align: center;
   font-family: Segoe script bold;
   margin-top: 150px;
   font-size: 50px ;
   color: #053a54;
  }
  p{
   text-align: justify;
   margin-left: 120px;
   margin-right: 120px;
   font-family: segoe print;
   color: #0c4968;
   font-size: 14px;
  }
  p.tanggalnama{
   text-align: right;
   margin: 1px 120px;
   font-family: segoe print;
   font-size: 15px;
   color: #e5e5f3;
  }
 </style>
</head>
<body>
 <h1>
Keberhasilan Karna Tindakan</h1>
<br><br><br>


 <p class="tanggalnama">
21 agustus 2019
 <p class="tanggalnama">
Muhammad Fadlul Hafiizh<br><br>

 <p>
Ini cerita kecil dibalik kesuksesan Columbus yang menemukan benua Amerika. Setelah penemuan yang fenomenal itu, Columbus menjadi sangat terkenal dan diagung-agungkan oleh Raja dan seluruh rakyat. Columbus pun diangkat menjadi bangsawan kehormatan kerajaan. Kepopuleran Columbus itu membuat beberapa orang menjadi iri kepadanya.</p>
<p>
Suatu hari, Columbus mengadakan perjamuan makan. Dalam perjamuan makan itu dia menceritakan semua kisah yang dihadapi dalam pencarian benua tersebut. Semua tamu undangan terpukau dan mengakui kehebatan penemu benua baru tersebut.</p>
<p>
Namun beberapa orang yang iri dengan sinis berkata, "apa hebatnya dia?? dia cuma kebetulan berlayar dan kebetulan saja menemukan benua baru. Siapa saja juga bisa melakukan itu." Mendengar hal tersebut, Columbus kemudian menantang para orang iri tersebut. "Mari kita bertanding untuk membuktikan yang lebih baik. siapa yang bisa membuat telur rebus itu berdiri diatas meja makan ini maka dialah yang terbaik, semua gelar dan kekayaanku akan kuserahkan padanya." Orang-orang iri tersebut menerima tantangan Columbus.</p>
<p>
Kemudian mereka mulai berusaha untuk membuat telur rebus itu berdiri diatas meja, namun karena telur adalah bendayang berbentuk elips (hampir bulat) maka cukup mustahil untuk bisa berdiri. Setiap dicoba didirikan telur-telur itu langusung saja menggelinding jatuh. Akhirnya merekapun menyerah.
 <p>
Kini tiba giliran Columbus. Columbus memegang telur rebus itu diatas meja dengan posisi berdiri sambil dipegangi, kemudian dengan tangan yang satunya Columbus menekan ujung atas telur rebus itu ke meja sehingga ujung bawah telur menjadi remuk dan memipih (tidak lonjong lagi) sehingga telur tersebut bisa berdiri tegak diatas meja.</p>
<p>
Melihat hal tersebut, orang-orang yang iri dengan sinis berkata "Ahh... Kalau caranya seperti itu, kami juga bisa membuat telur rebus itu berdiri."</p>
<p>
Dengan bijak dan tersenyum Columbus berkata "Kalau begitu kenapa kamu tidak melakukannya?"</p>
<p>
Kesimpulan :</p>
<p>
Kesuksesan dan keberhasilan berasal dari gagasan dan suatu tindakan nyata. Columbus dan beberapa orang dimasa itu mempunyai gagasan atau teori tentang bumi yang bulat, teori itu tentu saja bertentangan dengan kepercayaan dunia pada waktu itu yang mempercayai bahwa bumi itu datar seperti piring. Ketika Columbus mengutarakan niatnya untuk melakukan ekspedisi lautnya, banyak orang termasuk keluarganya yang menganggap ia gila. Namun Columbus tetap gigih pada pendiriannya. Sehingga pada akhirnya sejarah mencatanya sebagai salah satu penemu benua dan palaut andal.
 <p>
seringkali kita menemukan orang atau bahkan diri kita juga mengalaminya,yaitu kita memiliki gagasan/ide/konsep, namun terlalu takut untuk mewujudkannya dalam sebuah aksi nyata, akhirnya ide itu hanya menjadi semu. ketakutan atas kegagalan, penilaian miring orang lain, penderitaan dan sebagainya membuat kita terhalang untuk menemukan kesuksesan. Ketakutan ini pula yang membuat kita terkadang merasairi dengan keberhasilan orang lain. 



</body>
</html>

Yaaps jadi itulah yang bisa saya posting kaliini semoga bermanfaat, maaf atas segala kekurangannya karena saya juga masih dalam tahapan belajar:v

Cari Blog Ini

Tutor Gesit

Memahami CSS (Cascading Style Sheet)

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script