Scribd
Unggah
12 tayangan20 halaman

Modul 5

Dokumen ini menjelaskan tentang CSS (Cascading Stylesheet) yang digunakan untuk mengatur tampilan HTML, termasuk struktur dasar, cara penulisan, serta berbagai properti dan nilai yang dapat diterapkan. Terdapat juga penjelasan mengenai box model, positioning, float, tipografi, background, dan cara memberikan warna. Modul ini ditujukan untuk praktikum desain antarmuka pengguna di program studi pendidikan teknologi informasi.

Diunggah oleh

rendyardiyanto89
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
12 tayangan20 halaman

Modul 5

Dokumen ini menjelaskan tentang CSS (Cascading Stylesheet) yang digunakan untuk mengatur tampilan HTML, termasuk struktur dasar, cara penulisan, serta berbagai properti dan nilai yang dapat diterapkan. Terdapat juga penjelasan mengenai box model, positioning, float, tipografi, background, dan cara memberikan warna. Modul ini ditujukan untuk praktikum desain antarmuka pengguna di program studi pendidikan teknologi informasi.

Diunggah oleh

rendyardiyanto89
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

​

Mempercantik Tampilan Web dengan CSS

KODE MODUL
20201024-5-2.0

PENYUSUN Modul Praktikum Desain Antarmuka Pengguna


Retno Indah Rokhmawati, S.Pd., M.Pd. Program Studi Pendidikan Teknologi Informasi
Hanifah Muslim Az-Zahra S.Sn., M.Ds Jurusan Sistem Informasi
Kharis Alfian Fakultas Ilmu Komputer
Nabila Leksana Putri Universitas Brawijaya
© 2020
“Niscaya manusia akan binasa, kecuali yang berilmu;
semua yang berilmu akan binasa, kecuali yang
beramal; semua yang beramal akan binasa, kecuali
yang ikhlas.”
(Imam Al-Ghazali)

2
A.​CSS
Cascading Stylesheet atau CSS merupakan sebuah kumpulan kode yang digunakan
untuk mengatur sebuah tampilan dari HTML, tampilan yang diatur oleh CSS antara lain
adalah : Jenis, Ukuran dan Warna Font, Padding, Margin, Background dan Warna serta
masih banyak lagi lainnya.

B.​ Struktur Dasar CSS

Berdasarkan contoh diatas, CSS secara struktur dasar terdiri dari :


●​ Selector
Selector adalah elemen HTML yang diberikan style melalui penanda berupa elemen
HTML, contextual selector, id atau class.

1.​ Elemen HTML


Apabila selector yang digunakan merupakan elemen HTML seperti pada contoh
kode di bawah ini, maka semua elemen p akan memiliki style berupa warna teks
berwarna oranye dan ukuran font berukuran 16px.
p {

3
color: orange;
font-size: 16px;
}

2.​ Id
Untuk memberikan sebuah style pada elemen HTML tertentu dapat
menggunakan id, dengan cara menggunakan karakter hash (#) kemudian diikuti
dengan id elemen nya.
#photo {
Width: 100%;
}

Perlu diperhatikan untuk penggunaan id, yaitu bersifat unik dalam satu
halaman.

3.​ Class
Untuk memberikan sebuah style pada elemen HTML dengan menggunakan tanda
titik (.) diikuti dengan nama class elemen nya.
.box {
Width: 100%;
}

Penulisan selector bisa digabung untuk melakukan penghematan baris kode,


contohnya seperti ini :

p {background-color : #ccc; }
span {background-color : #ccc;}
a {background-color: #ccc;}

menjadi

p, span, a {background-color:#ccc;}

●​ Property dan Value


Property adalah attribut tampilan yang ingin diterapkan pada sebuah element HTML
(Selector) sedangkan value adalah nilai dari property.
Untuk aturan penulisan property dan value bisa dilihat seperti berikut :
property: value;

Contoh dari property value :


h1 {
color: yellow;
}
C.​Penulisan CSS
CSS bisa dituliskan melalui beberapa cara atau metode, antara lain yaitu : inline, internal
dan external. Penggunaan cara tersebut sesuai dengan kebutuhan yang akan digunakan.

4
Berikut adalah penjelasan dari beberapa cara penulisan CSS :
●​ Inline
Inline merupakan metode dalam menuliskan css dengan cara penulisan secara
langsung pada tag atau elemen HTML menggunakan attribut style. Pada cara ini
tidak diperlukan selector, karena penulisan langsung pada element HTML yang ingin
diberi style. Contoh penulisan inline css :
<h4 style="font-size:3em;">Teks</h4>

Penulisan css secara inline, sangat tidak disarankan untuk digunakan. Karena
dengan penulisan secara inline akan mencampur adukkan antara “format” dan
“presentasi”, selain itu dalam pengubahan kode juga tidak efektif.

●​ Internal
Internal atau embedded merupakan metode penulisan css yang dituliskan di tag style
yang berada dalam tag head.
<html>
<head>
<title>Internal CSS</title>
<style>
.box {
width: 10%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Metode ini biasanya digunakan untuk menguji tampilan atau apabila web hanya
memiliki satu halaman.

●​ External
External merupakan sebuah metode penulisan dalam CSS, dengan cara memanggil
file .css dari luar di dalam tag head menggunakan tag link. Berikut contohnya :

<html>
<head>
<title>Internal CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>

Dibeberapa literatur mungkin ada yang menyebutkan embedded untuk internal dan
linked untuk external.

5
D.​ Komentar pada CSS
Komentar dapat digunakan untuk memberikan informasi mengenai sesuatu, dan
komentar akan diabaikan oleh web browser. Untuk membuat sebuah komentar pada CSS
dapat menggunakan tanda /* dan diakhiri */ , komentar ini bisa digunakan untuk 1 baris
atau lebih :
/* Ini adalah komentar dalam CSS */

E.​ Display pada CSS


Untuk mengatur bagaimana sebuah elemen ditampilkan dapat menggunakan property
display yang memiliki banyak value, akan tetapi yang sering digunakan antara lain : inline
dan block.
●​ Inline
Untuk mengatur display elemen menjadi satu baris maka dapat menggunakan
display: inline. Pada display beberapa elemen html memiliki default display inline
seperti elemen span, a, img, dan lain-lain.
.box {
display: inline;
}

●​ Block
Untuk mengatur display elemen menjadi satu blok penuh dalam satu baris maka
dapat menggunakan display: block;
.box {
display: block;
}

Untuk menyembunyikan konten html dapat menggunakan property visibility dan juga
display.
●​ Display
Pada display, digunakan untuk menghilangkan elemen HTML dengan cara
display: none;

●​ Visibility
Untuk menyembunyikan konten HTML dengan visibility: hidden;
F.​ Box Model
Semua elemen HTML dianggap sebagai sebuah kotak, Box Model sendiri pada dasarnya
adalah sebuah kotak yang membungkus sebuah elemen dalam HTML, Box Model terdiri
dari : margin, padding, border dan konten.

6
●​ Content
Konten adalah konten dari sebuah elemen HTML

●​ Margin
Margin adalah jarak batas dari konten ke luar, yang digunakan untuk memberikan
jarak antar elemen HTML.
.paragraf {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

●​ Padding
Padding adalah jarak dari border ke dalam, yang digunakan untuk memberikan jarak
antara konten ke elemen tersebut.
.paragraf {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Ketika menambahkan padding, maka ukuran dari sebuah elemen juga berubah.

●​ Border
Border adalah garis tepi atau batas yang mengelilingi sebuah konten.
.paragraf {
border-top: 10px;
border-right: 10px;
border-bottom: 10px;
border-left: 10px;
}

●​ CSS Shorthand
Untuk mempersingkat penulisan css box-model bisa dilakukan dengan cara
mengisikan atau menggabungkan beberapa value dalam property, sebagai contoh :

7
.paragraf {
margin: 10px;
}

Dari contoh diatas, maka margin akan di-set di semua sisi sebesar 10px, atau
mungkin jika lebih spesifik bisa menggunakan cara seperti ini
margin : top right bottom left;

.paragraf {
margin: 10px 20px 10px 30px;
}

Dari contoh diatas, maka masing masing nilai tersebut diatur top : 10px, right : 20px,
bottom : 10px, left : 30px (searah jarum jam).

Selain itu, terdapat juga penulisan dengan mengisikan 2 value seperti :


.paragraf {
margin: 10px 20px;
}

Maka, dari contoh tersebut diisikan untuk margin atas dan bawah bernilai 10px,
margin kiri dan kanan bernilai 20px.

Untuk border bisa menggunakan css shorthand seperti berikut :


Border: width style color;

G.​Positioning dengan CSS


Untuk melakukan positioning atau penempatan elemen HTML menggunakan CSS bisa
menggunakan beberapa macam value positioning dengan property position, antara lain:
●​ Static
Secara default semua elemen HTML menggunakan position static. Untuk
menentukan position dari elemen HTML tidak perlu menuliskan position: static, akan
tetapi langsung menggunakan property top, right, bottom, left.
.box {
background: green;
width: 300px;
height: 300px;
top: 100px;
left: 200px;
}

<div class="box"></div>

Hasil tampilan di browser :

8
●​ Relative
Untuk mengatur posisi css secara relatif yang menyesuaikan posisi normalnya,
secara default elemen div pada HTML memiliki nilai default position: relative.
.box {
background: green;
width: 300px;
height: 300px;
top: 100px;
left: 200px;
position: relative;
}

<div class="box"></div>

Hasil tampilan di browser :

●​ Absolute
Untuk mengatur posisi sebuah elemen sesuai dengan keinginan dan terlepas dari
aturan milik parent yang memiliki position relative bisa menggunakan absolute.
.box {
background: green;
width: 300px;
height: 300px;

9
top: 100px;
left: 200px;
position: relative;
}

.box2 {
width: 50px;
height: 50px;
background: yellow;
}

<div class="box">
<div class="box2"></div>
</div>

Hasil tampilan di browser :

●​ Fixed
Untuk menentukan posisi yang sudah tidak bisa berubah walaupun discroll ataupun
dizoom in atau zoom out dapat menggunakan value fixed.
.box {
left: 0px;
top: 100px;
position: fixed;
}

10
H.​Float CSS
Untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak.
Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen
setelahnya. Mengapung disini, berarti elemen yang mengalami float tersebut akan
dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element
induknya.
.box {
float: left;
}

Float tidak bisa digunakan untuk elemen yang menggunakan position absolute,
selain itu Ketika kita memberikan float pada elemen maka elemen tersebut
seolaholah mengapung dan elemen di atasnya (parent) menganggap tidak ada
elemen didalamnya (child) untuk mengatasinya dapat menggunakan clear:both
setelah elemen yang difloat.

I.​ Tipografi dan Teks


Untuk mengatur mengenai fontase atau teks pada HTML, dapat menggunakan property
dan value yang ada didalam css.
●​ Text Color
Untuk mengatur warna teks dapat menggunakan property color dengan value berupa
nilai warna heksadesimal, rgb atau nama color.
body {
color: #ccc;
}

●​ Text Alignment
Untuk mengatur perataan teks dapat menggunakan property text-alignment dengan
value berupa : left, center, right dan justify.
body {
text-align: center;
}

●​ Text Decoration
Untuk memberikan dekorasi pada sebuah teks seperti garis bawah dan lain – lain,
bisa menggunakan property text-decoration dengan value overline, line-through.
Underline. Sedangkan untuk menghilangkan dekorasi menggunakan value none.
body {
text-decoration: overline;
}
●​ Text Transform
Untuk mengubah teks menjadi kapital dan lain – lain, dengan cara menggunakan
property text-transform dengan value berupa uppercase, lowercase, dan capitalize.

11
p {
text-transform: uppercase;
}

●​ Text Indentation
Untuk memberikan indentasi dapat menggunakan property text-indent dengan value
berupa jarak indentasi.
p {
text-indent: 10px;
}

●​ Letter Spacing
Untuk memberikan jarak spasi di dalam karakter yang ada pada teks dapat
menggunakan property letter-spacing dengan value berupa jarak spasi.
h1 {
letter-spacing: 5px;
}

●​ Line Height
Untuk memberikan jarak antar baris dapat menggunakan propert line-height dengan
value berupa jarak.
p {
line-height: 10px;
}

●​ Text Direction
Untuk mengatur arah teks dapat menggunakan property text-direction.
p {
direction: rtl;
}

●​ Word Spacing
Untuk mengatur jarak antar kata dapat menggunakan property word-spacing dengan
value berupa jarak.
p {
word-spacing: 10px;
}

●​ Font Family
Untuk mengatur jenis font dapat menggunakan font-family dengan value berupa jenis
font.
p {
font-family: "Times New Roman", Times, serif;
}

12
Value dalam property font-family bersifat fallback system, ketika browser tidak
support font pertama, maka akan menjalankan yang kedua dan seterusnya.

●​ Font Style
Untuk melakukan pengubahan teks menjadi italic dapat menggunakan property
fontstyle dengan value berupa normal, italic dan oblique.
p {
font-style: italic;
}

●​ Font Size
Untuk mengatur ukuran font dapat menggunakan property font-size dengan value
berupa ukuran dalam satuan absolut atau relatif.
p {
font-size: 3em;
}

●​ Font Weight
Untuk mengatur ketebalan dari sebuah teks dapat menggunakan property fontweight
dengan value berupa ketebalan, normal dan bold.
p {
font-weight: bold;
}

●​ Font Variant
Untuk memberikan sebuah small-caps atau variasi lain bisa menggunakan property
font-variant.
p {
font-variant: small-caps;
}

J.​ Background
Banyak property dalam css yang disediakan untuk mengatur gambar,
●​ Background Image
Untuk memanggil sebuah gambar menjadi background dengan css dapat
menggunakan property background-image dengan value berupa lokasi gambar.
body {
background-image: url("img/me.png");
}

●​ Background Repeat
Untuk mengulang background dapat menggunakan property background-repeat
dengan value berupa repeat-x, repeat-y dan no-repeat;

13
body {
background-image: url("img/me.png");
background-repeat: no-repeat;
}

●​ Background Position
Untuk mengatur posisi background dapat menggunakan property
backgroundposition dengan value berupa posisi gambar (sumbu-x sumbu-y) /
(position position).
body {
background-image: url("img/me.png");
background-repeat: no-repeat;
background-position: 50px 50px;
}

●​ Background Size
Untuk mengatur ukuran background dapat menggunakan property background-size
dengan value berupa auto, cover, contain, length dan percentage.
body {
background-image: url("img/me.png");
background-repeat: no-repeat;
background-size: cover;
}

●​ Background Color
Untuk memberi background warna dengan cara menggunakan property
backgroundcolor dengan value berupa nama warna, nilai warna dalam heksadesimal
atau rgb.
body {
background-color: #ccc;
}

●​ Background Origin
Untuk mengatur posisi awal dari sebuah background dapat menggunakan property
background-origin dengan value berupa padding-box, border-box, content-box.
body {
background-image: url("img/me.png");
background-repeat: no-repeat;
background-size: cover;
background-origin: padding-box;
}

K.​ Warna
Dalam CSS dapat kita memberikan warna dengan berbagai cara. Salah satunya dengan
menuliskan nama warna dalam bahasa inggris. Sebagai contoh, warna teks untuk
paragraf adalah merah, maka kita bisa menuliskan color:red.

14
Selain menggunakan nama warna, terdapat juga cara lain yang valid seperti nama-nama
fungsi sebagai berikut :
●​ Nama warna
Nama warna merupakan cara yang sering digunakan, karena lebih mudah
mengingatnya. Misalnya, saya suka warna hijau (teal), maka nanti dalam CSS-nya
bisa langsung kita tulis teal.
header {
background: teal;
}

●​ Kode Heksadesimal
Kode heksadesmial merupakan kode yang menggunakan bilangan heksa desmial,
memiliki nilai dari 0 sampai f (16 dalam desimal).

Kode heksa demsial diawali dengan tanda pagar (#), kemudian diikuti kode
heksanya. Kode ini dapat terdiri dari 3 digit atau 6 digit bilangan.
#0011ff (6 digit)
#01f (3 digit)

Setiap angka dalam kode heksa desimal menentukan nilai warna dalam RGB
(#RRGGBB atau #RGB).

Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah,
dua angka berikutnya untuk warna hijua, dan dua angka terakhir untuk warna biru.

●​ Fungsi RGB
Fungsi RGB memiliki tiga parameter, yaitu nilai untuk merah (red), hijau (green), dan
biru (blue). Nilai yang diberikan pada parameter tersebut dimulai dari angka 0~255.
Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut.

h2 {
color: rgb(88, 255, 21);
}

Pada contoh diatas, nilai paramter kedua (green) diberikan maksimal, maka nanti
hasilnya warna hijau akan menjadi warna dominan.

●​ Fungsi RGBA
Fungsi ini sama seperti fungsi RGB, tapi ada penambahan A dibelakangnya. Huruf A
artinya Alpha. Nilai alpha ini akan menjadi nilai transparansi dari warnanya.
Nilai alpha dapat diberikan dari 0.0~1.0. Semakin mendekati angka satu, warnanya
akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin
menghilang. Contoh penggunaan fungsi RGBA.
p {
background: rgba(40, 23, 11, 0.7);

15
}

●​ Fungsi HSL
HSL merupakan singkatan dari Hue, Saturation, Lightness.
Nilai H (hue) yang diberikan pada fungsi ini dimulai dari 0~360, karena palet warna
HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari
tutup tabungnya. Sedangkan untuk nilai S dan L menggunakan persen, dari
0%~100%.
h3 {
background: hsl(324, 70%, 40%);
}

●​ Fungsi HSLA
Seperti fungsi RGB, fungsi HSL juga memiliki nilai alpha untuk menyatakan nilai
transparansi warna.
h2 {
background: hsla(267, 80%, 45%, 0.6);
}

L.​ Bayangan
Properti untuk membuat bayangan (shadow), mulai ada pada versi CSS3. Properti
tersebut adalah box-shadow dan text-shadow.
●​ box-Shadow
digunakan untuk membuat bayangan untuk kotak atau elemen kontainer.
.kotak {
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
padding: 10px;
border: 1px dashed grey;
}

<!DOCTYPE html>
<html>
<head>
<title>Box Shadow Practice</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="kotak">
<p>This is a paragraph.</p>
</div>
</body>
</html>

Hasil tampilan di browser :

16
●​ text-shadow
digunakan untuk membuat bayangan pada teks.
h2 {
color: coral;
text-shadow: 3px 2px 1px black;
font-size: 40px;
}

<!DOCTYPE html>
<html>
<head>
<title>Latihan Text Shadow</title>
<link rel="stylesheet" href="style-bab-5.css" />
</head>
<body>
<h2>ini adalah text-shadow</h2>
</body>
</html>

Hasil tampilan di browser :

​
Properti bayangan memiliki empat nilai yang harus diberikan:
box-shadow: x y z warna;

Nilai x untuk menentukan arah horizontal


Nilai y untuk menentukan arah vertikal
Nilai z untuk menentukan keburaman (blur) bayangan
Nilai warna, bisa menggunakan rgb(), rgba(), kode warna, nama warna, dsb.

Jika nilai x dan y diberikan nilai negatif, maka bayangannya akan mengarah ke atas.
Sementara itu, nilai z tidak boleh negatif.

Jika ingin membuat bayangan masuk ke dalam kotak, maka kita perlu menambahkan
kata kunci inset.

17
.kotak {
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.4);
padding: 10px;
border: 1px solid grey;
}

18
1.​ Buatlah sebuah file dokumen HTML dengan nama index.html
2.​ Buatlah sebuah file CSS dengan nama style.css dan simpan dokumen pada direktori
yang sama dengan file index.html
3.​ Buatlah sebuah tampilan seperti contoh di bawah ini.

4.​ Buatlah video pengerjaan halaman tersebut mulai dari awal sampai menyerupai
halaman tersebut disertai penjelasan syntax css yang dipakai, maksimal durasi tidak
ada ketentuan. Penilaian diambil dari seberapa jelas penjelasan yang diberikan dan
bukan dari panjang pendeknya video.

19
5.​ Kode diupload ke github dan video diupload ke youtube. Kedua link dan screenshot
dimasukkan dalam template laporan yang disediakan.

20

Anda mungkin juga menyukai