Scribd
Unggah
97 tayangan29 halaman

Membuat Aplikasi Web Berbasis API Dengan HTML Dan CSS

Membuat Aplikasi Web Berbasis API Dengan HTML dan CSS memberikan panduan untuk membuat aplikasi web sederhana menggunakan HTML, CSS, dan API. Dokumen ini menjelaskan cara menyiapkan struktur file proyek, membuat elemen dasar seperti header dan form input, serta menambahkan gaya CSS untuk menyesuaikan tampilan. Dokumen ini juga menjelaskan bagaimana menampilkan hasil dari API secara dinamis di bagian output.

Diunggah oleh

indra.adi
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 DOCX, PDF, TXT atau baca online di Scribd
97 tayangan29 halaman

Membuat Aplikasi Web Berbasis API Dengan HTML Dan CSS

Membuat Aplikasi Web Berbasis API Dengan HTML dan CSS memberikan panduan untuk membuat aplikasi web sederhana menggunakan HTML, CSS, dan API. Dokumen ini menjelaskan cara menyiapkan struktur file proyek, membuat elemen dasar seperti header dan form input, serta menambahkan gaya CSS untuk menyesuaikan tampilan. Dokumen ini juga menjelaskan bagaimana menampilkan hasil dari API secara dinamis di bagian output.

Diunggah oleh

indra.adi
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 29

Membuat Aplikasi Web Berbasis API Dengan

HTML dan CSS

Wh
at You'll Be Creating
Setelah merancang beberapa tiruan visual untuk membantu membimbing kita dalam membangun
aplikasi kecil kami untuk browser, kita telah sampai ke bagian yang menarik dan mulai
membuat!

Struktur File
Mari kita setup struktur file kita untuk proyek. Akan terlihat seperti ini (dengan masing-masing
aset yang hidup dalam folder yang sesuai):

1.
2├── index.html
3└── assets
4 ├── css
5 ├── img
├── js
6 └── sketch
7

Kami sekarang memiliki folder untuk setiap aset kita, serta file .sketch yang kita buat
sebelumnya yang memegang tiruan page kita.

Awal HTML
Berdasarkan struktur file kita, mari kita setup dokumen HTML dasar kita dengan link ke aset
(yang akan kita ciptakan dalam sekejap).

0 <!doctype html>
<html lang="en-US">
1
<head>
0 <meta charset="utf-8">
2 <title>Gimmie Dat iCon</title>
0 <meta name="viewport" content="width=device-width, initial-scale=1.0">
3 <link href="https://fonts.googleapis.com/css?family=Pacifico"
0 rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/styles.css">
4 </head>
0 <body>
5 <header></header>
0 <main></main>
6 <footer></footer>
<script
0 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></
7 script>
0 <script src="assets/js/main.js"></script>
8 </body>
</html>
0
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7

Berikut ini adalah apa yang kita miliki:

 Struktur halaman HTML dasar dengan header, isi, dan daerah footer.
 Link ke CSS kustom kami (yang kita akan menciptakan)
 Link ke Pacifico pada font Google (seperti disebutkan sebelumnya, ini adalah font yang
kita akan gunakan untuk menampilkan nama app kecil kami)
 Link ke kami javascript kustom (yang kita akan menciptakan) serta Perpustakaan jQuery
pada Google’s Hosted Libraries CDN

Awal CSS
Karena ini sedikit app relatif kecil dan sederhana, saya akan mendukung menggunakan vanili
CSS dalam proyek ini (tidak ada preprocessor), tetapi Anda dapat jelas menulis CSS Anda dalam
bentuk apa pun yang Anda suka.

Mari kita mulai dengan menyiapkan beberapa halaman dasar gaya dan membuat komentar
referensi untuk warna kami akan menggunakan. Dalam assets/css/styles.css lakukan hal
berikut:

0 /*
General Styles
1
0
Colors
2 @highlight: #196E76
0 @text: #4A4A4A;
3 @text-light: #9A9A9A
0 @body-background: #EEEEEE;
*/
4
0 *,
5 *:before,
0 *:after {
6 box-sizing: inherit;
0 margin: 0;
padding: 0;
7
}
0
8 html {
0 box-sizing: border-box;
9 background: #EEEEEE;
1 text-align: center;
}
0
1 body {
1 font-size: 1em;
1 line-height: 1.5;
2 font-family: Lucida Grande, sans-serif;
1 max-width: 43.75em; /* 880/16 */
margin: 0 auto;
3 padding: 0;
1 color: #4A4A4A;
4 }
1
5 img {
max-width: 100%;
1 height: auto;
6 }
1
7 a {
1 color: inherit;
8 }
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2

Di sini kita sudah setup beberapa halaman dasar gaya mengatur gambar, link, dan kita akan
menggunakan model kotak. Seperti Anda mungkin telah menyadari, kami menggunakan tag
body sebagai pembungkus dengan menetapkan max-width. Ini akan menjaga semua konten kami
berpusat di tengah halaman tanpa diluar lebar tertentu.

Perhatikan kita juga didefinisikan nilai-nilai warna, kami akan menggunakan di atas komentar.
Karena kita tidak menggunakan preprocessor yang memungkinkan kita untuk menetapkan
variabel, ini akan berguna sebagai kita terus menulis gaya kita.

App Header
Mari kita buat header app. Ingat, kita rancang ini di sketsanya:
Jadi, ayo kita buat HTML untuk dicocokkan mock kita. Kita akan menempatkan konten ini
dalam elemen header yang kita buat sebelumnya.

1<header>
2 <h1><a href="./">Gimmie Dat iCon</a></h1>
3 <p>Retrieve full-sized icon artwork for iOS &amp; Mac apps.</p>
</header>
4

Sekarang kita telah memiliki nama aplikasi serta keterangan di bagian atas halaman. Tapi dengan
gaya yang biasa.
Tulislah beberapa gaya untuk header halamannya yang membawa lebih sesuai dengan tiruannya :

01/*
Header Styles
02
*/
03header {
04 margin: 1em 0 2em;
05 color: #196E76;
06 }
07
header h1 {
08 font-family: 'Pacifico', serif;
09 font-size: 3em;
10 text-shadow: 0 4px 2px rgba(0, 0, 0, .1);
11 margin: 0;
12 }
13
header h1 a {
14 text-decoration: none;
15 }
16
17
18
19 header p {
20 margin-top: -.625em;
text-indent: 7.75em; /* indent slightly */
21 text-shadow: 0 1px 0px rgba(0, 0, 0, .15);
22 font-size: .875em; /* 14/16 */
23 }
24
25

Berikut ini gambaran singkat dari apa yang kita kerjakan:

 Warna dan spasi untuk wadah header


 App nama header h1 diatur untuk menggunakan Pacicifo dari Google font (ingat, kita
tetapkan link ke resource ini di header kita)
 App Deskripsi header p sedikit terimbangi untuk menghindari berjalan ke descender
"G" nama app.

Sekarang header looking kita sudah lebih seperti desain:


Namun, ingat bahwa aplikasi ini akan responsif! Jadi jika kita memeriksa gaya ini pada sebuah
lebar sempit yang menggunakan alat-alat dev Chrome, kalian akan melihat teks pembungkus
untuk Deskripsi sedikit funky karena text-indent
Untuk mengatasi ini, di norrower widths, kami akan menghapus indentasi teks dan benjolan teks
Deskripsi turun dengan besar margin-top sehingga pembungkus tampak lebih alami. Mari kita
menulis query media untuk mempermudah kita:

1@media screen and (max-width: 600px) {


header p {
2
text-indent: 0;
3 margin-top: .5em;
4
}
5}
6

Nah, sekarang kita memiliki header responsif!

Advertisement
App Input
Tahap berikutnya merupakan peralihan ke daerah input dan output duplikatnya. Ingat mereka
tampak seperti ini:

Pertama, kita tambahkan input field ke elemen HTML utama yang kita buat sebelumnya:

1
<main>
2 <!-- input -->
3 <form class="submit">
4 <input type="url" placeholder="iTunes Link...">
5 <button type="submit">Gimmie</button>
</form>
6
<!-- ./input -->
7</main>
8

Sekarang kita memiliki sebuah form dengan input dan tombol kirim. Sejauh ini terlihat baik, tapi
belum terlihat seperti keinginan kita. Kita harus mambahkan beberapa gaya.
Tambahkanlah beberapa gaya untuk elemen input dan tombol form kita.

01/*
Form Input
02
Styles for the form input and button
03*/
04form {
05 position: relative;
06 }
07
form input{
08 width: 100%;
09 display: block;
10 font-size: 1em;
11 padding: .625em .85em;
12 padding-right: 7em;
line-height: 1.5;
13 margin: 0;
14 border: 1px solid #bbb;
15
16
17
18
19 box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset,
20 0 2px 4px rgba(0, 0, 0, .1);
21 border-radius: 3px;
}
22
23 form input:focus {
24 border-color: #298cda;
25 }
26
27 form button {
28 text-decoration: none;
background: #196E76;
29 height: 100%;
30 position: absolute;
31 right: 0;
32 top: 0;
33 line-height: 1.5;
color: white;
34 font-size: 1em;
35 border-radius: 0 3px 3px 0;
36 border: 0;
37 outline: 0;
text-align: center;
38 -webkit-appearance: none;
39 margin: 0;
40 padding: 0 1em;
41 font-family: 'Pacifico', serif;
42 }
form button:hover {
43 cursor: pointer;
44 }
45
46 form button:disabled {
47 opacity: .5;
}
48
49
50
51
52

Di sini kita tambahkan beberapa gaya pada input form dan tombol serta beberapa states yang
berbeda seperti :hover, :focus, dan :disabled. Inilah yang memberikan gaya seperti yang
kita dirancang dalam duplikatnya.
App Output
Pada point ini kita akan membuat sesuatu yang kita sebut dengan daerah "output". Pada tempat
inilah secara dinamis kita membuat ikon yang dikembalikan oleh iTunes AP. Meskipun, pada
inisial halaman awal, pengguna belum belum me-request apa pun. Jadi kita akan menggunakan
desain states kosong dari sekarang. Ingat gambarannya, tampak seperti ini:
Kita tambahkan elemen main HTML yang trlah dikerjakan:

0 <main>
<!-- input -->
1
<form class="submit">
0 <input type="url" placeholder="iTunes Link...">
2 <button type="submit">Gimmie</button>
0 </form>
3 <!-- ./input -->
<!-- output -->
0 <div class="wrapper">
4 <div class="content">
0 <p><strong>Enter a valid iTunes app store link, i.e.</strong> <a
5 href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://
0 itunes.apple.com/us/app/twitter/id333903271?mt=8</a></p>
<img src="assets/img/icon-placeholder.svg" alt="Icon placeholder"
6 />
0 </div>
7 </div>
0 <!-- ./output -->
</main>
8
0
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6

Perhatikan jika kita menambahkan output HTML tepat setelah memasukan HTML. Terdiri dari
wrapper, yang merupakan kotak putih besar dalam desainnya, serta konten, yang berpusat dalam
itu. Kita gunakan CSS untuk mengatur elemen .content agar memiliki lebar maksimal 512
piksel, yang merupakan ukuran paling besar untuk menampilkan ikonnya. Untuk saat ini akan
terlihat seperti ini:
Perhatikan ikon placeholder yang hilang. Jika kita kembalikan ke dokumen Sketsa, mudah
menampilkan aset itu sebagai SVG untuk digunakan di browser.

Sekarang kita harus memiliki gambar yang muncul di browser.


Masukkan beberapa gaya pada kotak outputnya.

01/*
Content Styles
02
Main container for content, i.e. the icons, error messages, etc
03*/
04.wrapper {
05 background: #fff;
06 border: 1px solid #ccc;
text-align: center;
07 padding: 2em;
08 margin: .5em 0 2em;
09 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
10 border-radius: 3px;
11 position: relative;
}
12
13.content {
14 max-width: 512px;
15
16
17 margin: 0 auto;
18 position: relative;
19 word-wrap: break-word; /* for long urls */
20}
21
22 .content * { /* do a simple reset on elements in .content */
margin: 0;
23 padding: 0;
24 }
25
26 .content strong {
27 font-weight: bold;
display: block;
28 }
29
30
31

Sebagian besar CSS yang kita tambahkan memiliki komentar dalam kode untuk menjelaskannya.
Kami tambahkan gaya keluar wrappernya, karena, kami tidak melakukan penyetelan ulang CSS
lengkap pada page, kita melakukan penyetelan ulang sederhana pada elemen HTML di dalam
area konten kami dengan menerapkan .konten *.

Terakhir, kita tambahkan beberapa style untuk mempertebal state kosongnya. Sekarang
seharusnya akan menyerupai gambaran awalnya.
Pengertian CSS dan Cara Kerjanya
May 7, 2020 5 min read
Pengembangan website menggunakan HTML atau PHP saja belum cukup. Anda membutuhkan
CSS yang bisa mengatur seluruh tampilan website sehingga terlihat lebih menarik dan sesuai
dengan kebutuhan user. Itulah kenapa Anda perlu tahu pengertian CSS.

Anda wajib mengetahui mengenai CSS karena akan sangat berguna dalam proses
pengembangan website. Apalagi saat ini hampir setiap website menggunakan CSS sebagai tools
untuk mengatur berbagai tampilan di dalamnya. Nah! Pada artikel kali ini kami akan membahas
selengkap mungkin belajar CSS mulai dari pengertian css dan fungsinya.

Daftar isi tutup

1 Pengertian CSS

2 Fungsi CSS

2.1 1. Mempercepat Proses Desain

2.2 2. Halaman Lebih Cepat Dimuat

2.3 3. Proses Pemeliharaan Mudah

2.4 4. Style Lebih Beragam Dibanding HTML

2.5 5. Kompatibel Dengan Berbagai Macam Perangkat

2.6 6. CSS Menjadi Standar Pengembangan Website

3 Cara Kerja CSS

4 3 Macam CSS di Dalam Kode HTML


4.1 Inline CSS

4.2 External CSS

4.3 Internal CSS

5 Penutup

Pengertian CSS
CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk menyederhanakan
proses pembuatan website dengan mengatur elemen yang tertulis di bahasa markup.

CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). CSS menangani
tampilan dan ‘rasa’ dari halaman website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan bahasa
pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat mengatur
warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai.

Tidak hanya itu CSS juga bisa untuk mendesain layout, variasi tampilan di berbagai perangkat
yang berbeda, dan berbagai efek yang dipakai di dalam website.

CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian tampilan
dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat ini CSS
hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP.

Fungsi CSS
Anda pernah mencoba mengembangkan website menggunakan HTML atau PHP? Jika sudah,
Anda pasti merasakan sedikit kesulitan untuk mendesain tampilannya. Apalagi jika membuat
tampilan yang cukup kompleks di proyek yang besar.

Baca Juga: Full Stack Developer – 7+ Skill yang Dikuasai untuk Menjadi Handal

HTML memang bukan dikembangkan untuk mendesain tampilan depan website.

Lalu, bagaimana membuat tampilan website yang menarik dengan mudah? Menggunakan CSS
bisa menjadi salah satu solusinya.

Sebagai contoh, jika membuat tombol menggunakan HTML saja, Anda mungkin akan
mendapatkan hasil seperti ini:
Namun, jika menambahkan CSS, hasilnya akan menjadi lebih cantik seperti ini:

CSS tentu tidak hanya mengatur tombol saja. Anda bisa mendesain berbagai macam tampilan
menggunakan CSS sehingga sesuai dengan kebutuhan.

Selain itu, ada beberapa keuntungan yang bisa Anda dapatkan ketika menggunakan CSS, seperti:
1. Mempercepat Proses Desain

Apa yang akan Anda lakukan jika menggunakan desain yang sama di beberapa halaman HTML?
Anda mungkin akan menyalin satu per satu ke setiap file halaman.

Sesuai dengan pengertian CSS, jika menggunakan CSS, Anda tidak perlu melakukan itu
lagi.CSSApa yang akan Anda lakukan jika menggunakan desain yang sama di beberapa halaman
HTML? Anda mungkin akan menyalin satu per satu ke setiap file halaman. Jika menggunakan
CSS, Anda tidak perlu melakukan itu lagi.

Ketika menggunakan CSS, Anda cukup mengetikkan satu kali fungsi CSS kemudian
menggunakannya di berbagai halaman HTML. Fungsi CSS yang Anda buat dalam satu file dapat
Anda panggil ke berbagai halaman web tanpa harus menyalin baris kode fungsi berkali-kali.

2. Halaman Lebih Cepat Dimuat

Jika menggunakan CSS, Anda tidak perlu menuliskan atribut tag HTML di setiap file. Anda
hanya cukup menulis satu aturan CSS dan menerapkannya di berbagai file yang
membutuhkannya hanya dengan memanggilnya.

Jadi satu file hanya mengandung sedikit baris kode yang dimuat. Nah, sedikit baris kode inilah
yang akan membuat proses download menjadi lebih cepat.

3. Proses Pemeliharaan Mudah

CSS memudahkan Anda untuk mengubah tampilan di berbagai halaman. Hanya dengan
mengubah fungsi style di file CSS maka seluruh tampilan yang menggunakan fungsi tersebut
akan berubah secara otomatis.

4. Style Lebih Beragam Dibanding HTML

CSS mempunyai atribut lebih beragam dibandingkan dengan HTML. Apa keuntungannya? Anda
mempunyai lebih banyak pilihan tampilan halaman website.

5. Kompatibel Dengan Berbagai Macam Perangkat

CSS memungkinkan konten Anda dapat dioptimasi di lebih dari satu perangkat. Misal ketika
memproses sebuah dokumen. Jika menggunakan CSS, Anda bisa menyesuaikan tampilan
dokumen di perangkat versi lama sekaligus di versi yang baru.

6. CSS Menjadi Standar Pengembangan Website

Hampir seluruh website yang ada di internet menggunakan CSS di dalamnya. Selain tampilannya
yang lebih menarik, kebanyakan browser populer saat ini juga mendukung CSS. Jadi jika Anda
ingin mengembangkan website yang sesuai standar browser populer, sebaiknya gunakan CSS.
Anda pasti juga ingin website dapat kompatibel dengan berbagai macam browser kan?.
Cara Kerja CSS
Setelah mengetahui pengertian CSS dan fungsinys, pertanyaan selanjutnya ialah bagaimana cara
kerja CSS? Jawabannya, CSS membuat style di dalam halaman web dapat berinteraksi dengan
elemen HTML. Elemen merupakan komponen HTML dari sebuah halaman web. Berikut adalah
salah satu contoh elemen di HTML:

<p>This is my paragraph!</p>

Jika Anda ingin membuat paragraf di atas muncul dengan warna yang lain dan bold, Anda bisa
menambahkan baris CSS seperti di bawah ini:

p { color:pink; font-weight:bold; }

Pada contoh di atas, “p” (paragraf) merupakan bagian baris kode CSS untuk menspesifikasikan
elemen HTML atau biasa dikenal dengan nama ‘selector’.

Di dalam CSS, selector ditulis di bagian kiri sebelum tanda kurung kurawal (curly bracket)
pertama. Sedangkan informasi yang ada di dalam tanda kurung kurawal merupakan sebuah
deklarasi yang di dalamnya mengandung properti dan nilai yang diaplikasikan ke dalam
selector.

Contoh dari properti adalah ukuran font, warna, layout, format, dan lain sebagainya. Sedangkan
nilai yang dimaksud adalah pengaturan yang diterapkan ke dalam properti. Misalnya dari contoh
di atas, “color” dan “font-weight” merupakan properti, sedangkan “pink” dan “bold”
merupakan sebuah nilai.

Contoh dari properti adalah ukuran font, warna, layout, format, dan lain sebagainya. Sedangkan
nilai yang dimaksud adalah pengaturan yang diterapkan ke dalam properti. Misalnya dari contoh
di atas, “color” dan “font-weight” merupakan properti, sedangkan “pink” dan “bold”
merupakan sebuah nilai.

Jadi seluruh baris kode di dalam tanda kurung kurawal { color:pink; font-
weight:bold; } merupakan sebuah deklarasi, sedangkan “p” (HTML paragraf) merupakan
sebuah selector. Baik deklarasi dan selector merupakan prinsip dasar dari penggunaan CSS dan
HTML. Prinsip ini juga dapat digunakan untuk mengatur ukuran font, warna background, format
teks, dan lain sebagainya.

Sebagai tambahan, baris kode ..

body { background-color:lightblue; }

.. akan membuat halaman background menjadi biru cerah, atau ..


p { font-size:20px; color:red; }

.. akan menerapkan ukuran font 20 dengan warna merah.

3 Macam CSS di Dalam Kode HTML


Saat belajar CSS kamu perlu mengetahui tiga macam penempatan CSS yang dapat dipakai ke
dalam baris kode HTML, yaitu external, internal, atau inline. Bagian ini akan membahas tiga
macam CSS ini dengan lebih detail.

Inline CSS

Inline CSS adalah penempatan CSS yang langsung dilakukan di dalam konten HTML.
Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah
contohnya.

<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>

CSS di atas berarti hanya akan mempengaruhi paragraf yang spesifik di dalam satu file .html dan
muncul dengan warna biru (blue) ukuran font 30px.

External CSS

External CSS adalah penempatan baris kode CSS menggunakan file .css. Cata ini dapat
digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan website secara
keseluruhan.

Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML
yang ingin Anda atur tampilannya.

Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk
memanggil file .css di dalam file HTML seperti contoh di bawah ini.

<head>
<link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>

Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada
contoh di atas file CSS menggunakan nama ‘fileCSSAnda.css’ yang dapat Anda sesuaikan
dengan letak file CSS di dalam direktori website. Ketika file HTML sudah terhubung dengan file
CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.
Internal CSS

Lalu, bagaimana penempatan CSS menggunakan cara internal? Internal CSS sekilas mirip
dengan inline CSS, yaitu tipe penulisan tanpa file CSS terpisah.

Namun di dalam penggunaan CSS secara internal, baris kode HTML dituliskan di bagian atas
(header) file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web
dengan tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk menciptakan
tampilan yang unik.

Baris kode CSS secara internal contohnya seperti di bawah ini.

<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:mediumblue; }
</style>
</head>

Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 20px,
dan ‘medium blue’ font ke dalam satu halaman HTML.

Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk
mengimplementasikan CSS ke dalam website. Cara ini juga paling populer atau sering dipakai
oleh banyak pengembangan website dibandingkan dengan cara yang lainnya. Sedangkan cara
internal dan inline juga bisa dipakai untuk menambahkan format konten yang khusus atau
berbeda dengan konten yang lainnya.

Penutup
CSS mudah dipelajari, tapi bisa memberikan efek yang sangat besar bagi pengembangan
website. CSS memudahkan Anda untuk mengatur berbagai tampilan yang di dalam website
dengan tidak mengesampingkan user experience. Anda bisa mengatur warna, ukuran font, jenis
layout, dan berbagai macam pengaturan tampilan sehingga bisa sesuai dengan kebutuhan yang
diinginkan.

Jadi, ketika HTML merupakan pondasi, kerangka, tembok, atau bahan baku semen untuk
mendukung pembuatan website, CSS merupakan cat, desain jendela, dan berbagai macam
pengaturan setelahnya. CSS adalah solusi dari pengambangan tampilan bangunan website Anda.

Contoh penerapan langsung dari CSS adalah seperti membuat desain form login, membuat
desain dropdown yang menarik, dan masih banyak lagi.

Sampai di sini semoga Anda paham mengenai pengertian CSS dan fungsinya. Jika ada
pertanyaan atau tambahan lain silakan tinggalkan komentar melalui kolom di bawah ini. Jangan
lupa subscribe dan follow sosial media kami untuk mendapatkan informasi seputar bisnis,
hosting, digital marketing, dan teknologi.

Anda mungkin juga menyukai