-->
/

CSS (Cascading Style Sheet)

Add Comment Edit

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL IV
“CSS (Cascading Style Sheet)”
Diajukan untuk memenuhi salah satu Mata Kuliah Praktikum Pemrograman Web 1
Dosen Pengampu : Rio Andriyat Krisdiawan, S.Kom., M.Kom.





Disusun Oleh
Reza Adhicahyasmara
20160910092
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018





KATA PENGANTAR

 Puji syukur penulis ucapkan atas kehadirat Allah SWT, karena rahmat dan karunia-Nya penulis diberi kesempatan untuk menyelesaikan Laporan Praktikum Pemrograman Web 1. Shalawat dan salam kita hanturkan kepada junjungan besar Nabi Muhammad SAW beserta keluarganya, sahabatnya, beserta pengikutnya hingga akhir zaman.

Penulis menyusun laporan ini dengan tema CSS (Cascading Style Sheet). Laporan ini menjelaskan tentang CSS yang merupakan bahasa pemrograman yang mengontrol sebuah tampilan halaman web. Dan CSS dapat melengkapi fitur yang tidak ada pada HTML.

Tidak lupa juga saya ucapkan terima kasih kepada kedua orang tua kami masing-masing dan terima kasih kepada dosen Pemrograman Web 1 yaitu Rio Andriyat Krisdiawan S.Kom., M.Kom. yang telah membimbing penulis dalam menyusun laporan.

Penulis menyadari bahwa dalam laporan ini masih jauh dari kata sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya laporan ini.


Kuningan, 25 Maret 2018
                                                                                                                                         

                                                                                                                Penulis.





DAFTAR ISI

Kata Pengantar
Daftar Isi

BAB I PENDAHULUAN
1.1 Maksud dan Tujuan
1.2 Landasan Teori

BAB II PEMBAHASAN
2.1 Post Test
2.2 Tugas

BAB III PENUTUP
3.1 Kesimpulan

DAFTAR PUSTAKA





BAB I
PENDAHULUAN

1.1 Maksud dan Tujuan
  1. Mampu memahami struktur dasar, atribut, dan properti CSS.
  2. Mampu memahami CSS internal, inline, dan external
  3. Mampu memahami konsep class dan id CSS serta membuat dan memanggil class dan id CSS.


1.2 Landasan Teori

CSS (Cascading Style Sheet)
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Bentuk umum CSS

  
<style type="text/css">
   script css
</style>

Aturan penulisan CSS

  
selector {property_1: value_1; ...; property_key-n: value_ke-n}
H1{color:red;}

Atau

  
H1{color:blue; size:40;}

Contoh
Jika di HTML kita menformatkan paragraf dengan <p align="right"> maka dengan CSS menjadi p{text-align: right;}


3 Cara memasang CSS pada dokumen HTML 

  1. External style sheet (file CSS berada dari file HTML) 
  2. Internal style sheet (kode CSS dipasang didalam tah Head HTML) 
  3. Inline style sheet (kode CSS langsung di pasang di tag HTML(tidak di rekomendasikan)

Jenis-jenis selector di dalam CSS.
Setelah mengetahui apa itu selector, property dan value. Terdapat beberapa jenis-jenis selector yang terdapat pada CSS. Pada CSS terdapat beragam jenis selector. Berikut beberapa jenis selector yang paling banyak digunakan untuk mendesain sebuah halaman website.
  • Universal Selector
  • Element Type Selector
  • Class Selector
  • ID Selector
  • Atribute Selector
Universal Selector.
Yang pertama Universal Selector berfungsi untuk mempengaruhi seluruh tag sehingga hanya ada satu selector universal selector di dalam CSS. Universal Selector ini ditulis dengan menggunakan tanda bintang “*”. Selector ini bertujuan untuk mempengaruhi semua tag yang ada. 
  
* {
    color: blue;
    background-color: red;
}


Kode CSS tersebut digunakan untuk membuat seluruh tag HTML berwarna biru dengan backround berwarna merah.

Element Type Selector.
Tag selector Element digunakan untuk menunjuk pada selector yang berbentuk tag didalam HTML. Setiap Tag di dalam HTML dapat digunakan sebagai selector CSS.

h1 {
    text-align: center;
}
P {
    color: red
}

Kode CSS di atas untuk membuat tag h1 berada di tengah dan tag paragraph berwarna merah.

Class Selector
Ini adalah selector yang paling sering digunakan. Class Selector ini hanya mempengaruhi tag yang memiliki atribut class yang nilainya dapat ditentukkan. Contohnya:

.wrapper {
    width: 100%;
    background-color: white;
}
.untukbanner{
    background: white;
    color: black;
}



Didalam penulisan Class Selector ini harus selalu diawali dengan tanda titik di awal.

ID selector
Pada selector ini mirip dengan jenis class selector hanya saja dalam penulisan di tag html kita menggunakan atribut ID yang berisi nilai yang ditentukan. Untuk nilai atribut ID tidak boleh sama dengan yang lainnya. Di dalam kode CSS di awal ditulis dengan tanda pagah “#”.

  
#wrapper {
    width: 100%;
    background-color: white;
}

Atribut Selector
Selector terakhir ini adalah attribute yang khusus digunakan untuk mencari seluruh tag yang memiliki atribut tertentu. Dengan demikian kode CSS yang memanfaatkan attribute selector akan sangat selektif terhadap tag HTML karena sudah mengatur value dari sebuah property.
  
[type="password"]{
    border: 2px solid red;
    border-radius: 4px;
}
[type="text"]{
    background-color: white;
    color: black;
}







BAB II
PEMBAHASAN

2.1 Post Test dan Tugas


Post Test
Buat halaman website untuk menampilkan dengan CSS berupa tabel yang berisikan gambar berikut dengan deskripsi!

File HTML
  
<html>
 <head>
  <title>eksternal css</title>
  <link rel="stylesheet" type="text/css" href="Post Test.css">
 </head>
 <body>
 <table>
 <tr>
  <td><img src="ford.jpg"><p>FORD Fiesta</p></td>
  <td><img src="hyundai.jpg"><p>HYUNDAI i20 Coupe</p></td>
  <td><img src="volkswagen.jpg"><p>VOLKSWAGEN Polo</p></td>
 </tr>
 </table>
 </body>
</html>

File CSS
  
td{ 
 border: 3px solid #000;
}
table {
 border-spacing: 15px;
}

img {
 width: 300px;
 height: 150px;
 overflow: hidden;
 position: relative;
 margin-top: 20;
 margin-bottom: 0;
 margin-left: 20;
 margin-right: 20;
}

p {
 text-align: center;
 margin-bottom: 10;
}


Hasil tampilan



Tugas
Buat design website dengan menggunakan CSS dengan menampilkan menu bar horizontal!

File HTML 

<html>
 <head>
  <title>Tugas</title>
  <link rel="stylesheet" type="text/css" href="Tugas.css">
 </head>
 <body>
 <h1 class="text">UNIVERSITAS KUNINGAN</h1>
 <h2 class="text">FAKULTAS ILMU KOMPUTER</h2>
 <hr size="3" color="blue">
 <ul class="float">
  <li><a href="#">HOME</a></li>
  <li><a href="#">NEWS</a></li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">ABOUT</a></li>
 </ul>
 </body>
</html>

File CSS

.text{text-align:center; font-family:times roman; color:red;}


.float li{
 background-color: black;
 float: left;
 list-style: none;
 padding-bottom: 2px;
 padding-top: 2px;
}

.float li a{
 border-left: 1px solid rgba(0, 0, 0, 0.2);
 border-right: 10px solid rgba(255, 255, 255, 0.1);
 color: white;
 font-variant: small-caps;
 text-decoration: none;
 padding: 5px 25px;
}

.float li a:hover{
 background: blue;

}

Hasil tampilan








BAB III
PENUTUP

3.1 Kesimpulan

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.










DFTAR PUSTAKA
 

Berlangganan update artikel terbaru via email:

0 Response to "CSS (Cascading Style Sheet)"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel