CSS Lanjutan

Background

Background atau latar belakang pada halaman website sangat dibutuhkan untuk membuat halaman lebih menarik. Ada beberapa cara penggunaan background, yaitu warna dan gambar. Pada CSS Dasar - Nesting Selector telah dicontohkan penggunaan background warna, yaitu memberi property background-color: #f0f0f0; pada tag <div id="top">.

Untuk background gambar, Anda harus menyediakan file gambar terlebih dahulu dan simpan file gambar di dalam folder web Anda.

Berikut contoh penulisan kode CSS background gambar.

style.css

body {
    background-image: url('images/kampus-mdp.jpg');
}

Berikut file gambar kampus-mdp.jpg ditempatkan di dalam folder images.

Selanjutnya buat file background.html

background.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Kampus MDP</h2>
</body>
</html>

Hasil dari penulisan kode di atas sebagai berikut

Halaman background.html menampilkan gambar kampus-mdp.jpg secara berulang. Jika kita ingin menampilkan background gambar satu kali saja, tambahkan property background-repeat: no-repeat; pada file style.css.

Berikut perubahan kode CSS pada style.css

style.css

body {
    background-image: url('images/kampus-mdp.jpg');
    background-repeat: no-repeat;
}

Hasil dari penambahan property background-repeat: no-repeat; dapat dilihat pada gambar di bawah ini

Background gambar juga bisa diatur ukurannya dengan menambahkan property background-size: cover; pada file style.css.

style.css

body {
    background-image: url('images/kampus-mdp.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Hasil dari penambahan property background-size: cover; dapat dilihat pada gambar di bawah ini

Link

Implementasi style sheet memungkinkan mengubah tampilan link yang standar seperti mengubah warna link, menambahkan background warna, mengubah bentuk link menjadi tombol, dan mengubah bentuk link pada saat diklik.

Ada empat status yang dimiliki oleh link dan bisa dimanipulasi menggunakan CSS, yaitu:

a:link menunjukkan link yang belum dikunjungi
a:visited menunjukkan link yang telah dikunjungi
a:hover menunjukkan link ketika dilewati kursor
a:active menunjukkan link ketika diklik

Berikut ini contoh penggunaan CSS pada link:

style.css

body {
    margin: 20px; 
}

a:link {
    background-color: rgb(44, 38, 38);
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
}

a:visited {
    background-color: red;
    padding: 10px;
    border-radius: 10px;
    color: white;
}

a:hover {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    color: white;
}

a:active {
    background-color: black;
    padding: 10px;
    border-radius: 10px;
    color: white;
}

link.html

<!DOCTYPE html>
<html>

<head>
    <title>Hyperlink</title>
</head>

<body>
    <a href="https://simponi2.mdp.ac.id">Simponi</a>
    <a href="http://perpustakaan.mdp.ac.id" target="_blank"> Perpustakaan</a>
    <a href="tel:+62711376400">Telp. 0711 376400</a>
</body>

</html>

Hasil dari penulisan kode di atas

Aturan CSS Link: a:hover harus berada setelah a:link dan a:visited supaya kode CSS bisa berjalan. a:active harus berada setelah a:hover supaya kode CSS bisa berjalan.

Navigasi

Memiliki navigasi yang mudah digunakan merupakan hal yang sangat penting untuk halaman web. Melaluli CSS Anda dapat mengubah menu HTML yang standar menjadi menu navigasi yang terlihat lebih menarik.

Berikut contoh menu navigasi menggunakan HTML yang standar. Buat file menu.html

menu.html

<!DOCTYPE html>
<html>
    <head>
        <title>Navigasi </title>
    </head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#profil">Profil</a></li>
  <li><a href="#hubungi">Hubungi</a></li>
</ul>

</body>
</html>

Hasil penulisan kode di atas

Selanjutnya hilangkan bullet, margin, dan padding dari menu navigasi standar menggunakan kode CSS. Buat file style.css.

style.css

ul {
    list-style-type: none; /* untuk menghapus bullet */
    margin: 0; /* menghapus spasi sisi luar */
    padding: 0; /* menghapus spasi sisi dalam */
    width: 200px; /* lebar */
    background-color: #f1f1f1; /* warna background ul */
}

li a {
    display: block; /* menampilkan elemen sebagai blok */
    color: #000; /* warna text */
    padding: 8px 16px; /* spasi sisi dalam */
    text-decoration: none; /* menghapus garis bawah pada link */
}

/* Change the link color on hover */
li a:hover {
    background-color: #555; /* warna background ketika hover */
    color: white; /* warna text ketika hover*/
}

Selanjutnya sisipkan file style.css ke dalam file menu.html.

<!DOCTYPE html>
<html>
    <head>
        <title>Navigasi </title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#profil">Profil</a></li>
  <li><a href="#hubungi">Hubungi</a></li>
</ul>

</body>
</html>

Hasil dari kode di atas menampilkan menu secara vertikal.

Selanjutnya kita coba ubah navigasi vertikal menjadi navigasi horizontal. Ubah file style.css, hapus width: 200px; dan tambahkan overflow: hidden; pada ul. Kemudian tambahkan li {float: left;} pada file style.css.

Berikut perubahan kode CSS pada style.css

style.css

ul {
    list-style-type: none; /* untuk menghapus bullet */
    margin: 0; /* menghapus spasi sisi luar */
    padding: 0; /* menghapus spasi sisi dalam */
    overflow: hidden;
    background-color: #f1f1f1; /* warna background ul */
}

li {
    float: left;
}

li a {
    display: block; /* menampilkan elemen sebagai blok */
    color: #000; /* warna text */
    padding: 8px 16px; /* spasi sisi dalam */
    text-decoration: none; /* menghapus garis bawah pada link */
}

/* Change the link color on hover */
li a:hover {
    background-color: #555; /* warna background ketika hover */
    color: white; /* warna text ketika hover*/
}

Hasil dari perubahan kode CSS di atas menampilkan menu secara horizontal.

Image

Menggunakan CSS, kita dapat mengubah bentuk gambar agar halaman web menjadi lebih menarik.

Berikut contoh kode CSS untuk mengubah bentuk gambar

style.css

body {
    background-color: black; /* warna background */
}

img {
    width: 20%; /* lebar gambar */
}

.img-rounded {
    border-radius:20px; /* radius 20px */ 
}

.img-circle {
    border-radius:50%; /* radius 50% */
}

.img-thumbnail { 
    padding:5px; /* spasi atau ruang diantara konten dan border */
    background-color:#fff; /* warna background */ 
    border:1px solid #ddd; /* border dengan ukuran 1px dan warna #ddd */
    border-radius:5px; /* radius 5px */
}

Berikut contoh kode HTML yang menampilkan gambar tanpa class, menggunakan class img-rounded, img-circle, dan img-thumbnail

css-image.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="images/akreditasi.jpg">

    <img src="images/akreditasi.jpg" class="img-rounded">

    <img src="images/akreditasi.jpg" class="img-circle">

    <img src="images/akreditasi.jpg" class="img-thumbnail">
</body>

</html>

Hasil dari kode di atas

Gambar pertama tanpa kode CSS Gambar kedua menggunakan class img-rounded Gambar ketiga menggunakan class img-circle Gambar keempat menggunakan class img-thumbnail

PreviousCSS Dasar NextResponsif Web

Last updated 4 years ago

Was this helpful?