# 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.&#x20;

Berikut contoh penulisan kode CSS background gambar.

{% code title="style.css" %}

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

{% endcode %}

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

![kampus-mdp.jpg](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIWIvAT23WQCVG-NUn7%2F-MIWLJ886aMOYns9icEK%2Fimage.png?alt=media\&token=b554325b-fb84-408b-9aba-16ef5137ba00)

Selanjutnya buat file background.html

{% code title="background.html" %}

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

{% endcode %}

Hasil dari penulisan kode di atas sebagai berikut

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIWIvAT23WQCVG-NUn7%2F-MIWLnvFcM8X-6k1Y3Nx%2Fimage.png?alt=media\&token=ec37d806-dc9d-4e5c-ac88-855988f62633)

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

{% code title="style.css" %}

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

{% endcode %}

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

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIWMRaWZtvrb73meljP%2F-MIWMpGoeNxAXjtw1tB4%2Fimage.png?alt=media\&token=d5145610-11d8-4939-87f7-ebec5071b38e)

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

{% code title="style.css" %}

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

{% endcode %}

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

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIWMRaWZtvrb73meljP%2F-MIWNOKveb1aFCfy4KTj%2Fimage.png?alt=media\&token=ebbf8493-e79f-4e27-a90c-72d87b5d0961)

## 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:

1. a:link menunjukkan link yang belum dikunjungi&#x20;
2. a:visited menunjukkan link yang telah dikunjungi&#x20;
3. a:hover menunjukkan link ketika dilewati kursor&#x20;
4. a:active menunjukkan link ketika diklik

Berikut ini contoh penggunaan CSS pada link:

{% code title="style.css" %}

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

{% endcode %}

{% code title="link.html" %}

```markup
<!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>
```

{% endcode %}

Hasil dari penulisan kode di atas

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIWMRaWZtvrb73meljP%2F-MIWOkz4R3xThTdqsxPV%2Fimage.png?alt=media\&token=c51914d1-e061-451f-9511-7f49465214e9)

**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.&#x20;

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

{% code title="menu.html" %}

```markup
<!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>

```

{% endcode %}

Hasil penulisan kode di atas

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIX5s4kf-nr2YE6usKY%2F-MIXGQRY9aflBBSDG2l7%2Fimage.png?alt=media\&token=26d27b66-ebb4-4865-be1c-d6ff0c568e3c)

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

{% code title="style.css" %}

```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*/
}
```

{% endcode %}

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

```markup
<!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.

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIX5s4kf-nr2YE6usKY%2F-MIXH1TDfORUGOV9Z_PT%2Fimage.png?alt=media\&token=757909d0-aa8a-4634-80ce-735ffc255224)

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

{% code title="style.css" %}

```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*/
}
```

{% endcode %}

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

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIXH3giAhprY4f4BHFy%2F-MIXHqGarS7P9kBai_r0%2Fimage.png?alt=media\&token=400f0df1-221f-4b0f-9b16-dcb388a6ff29)

## Image

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

Berikut contoh kode CSS untuk mengubah bentuk gambar

{% code title="style.css" %}

```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 */
}
```

{% endcode %}

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

{% code title="css-image.html" %}

```markup
<!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>
```

{% endcode %}

Hasil dari kode di atas&#x20;

![](https://778745197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHJa7RRM_GMgqanJvvL%2F-MIXK7vlLz0fwUt35QBK%2F-MIXRTqSFgLnQGVKNiLF%2Fimage.png?alt=media\&token=3da30211-dfa5-4960-9e54-29d92d54c029)

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