Scribd
Unggah
136 tayangan5 halaman

Pengertian CSS

CSS digunakan untuk mendefinisikan tampilan dari dokumen HTML dan memisahkan desain dari konten. CSS memungkinkan pengguna untuk mengubah tampilan teks, warna, gambar, dan latar belakang halaman web tanpa mengubah struktur konten. Terdapat tiga cara untuk menghubungkan CSS dan HTML yaitu inline, internal, dan external style sheets dimana yang paling disarankan adalah penggunaan external style sheets.

Diunggah oleh

syafasyf
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
136 tayangan5 halaman

Pengertian CSS

CSS digunakan untuk mendefinisikan tampilan dari dokumen HTML dan memisahkan desain dari konten. CSS memungkinkan pengguna untuk mengubah tampilan teks, warna, gambar, dan latar belakang halaman web tanpa mengubah struktur konten. Terdapat tiga cara untuk menghubungkan CSS dan HTML yaitu inline, internal, dan external style sheets dimana yang paling disarankan adalah penggunaan external style sheets.

Diunggah oleh

syafasyf
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/ 5

CSS (CASCADING STYLE SHEET)

Pengertian CSS
CSS adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup ,
dimana bahasa markup ini salah satunya adalah HTML.
kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan
halaman HTML.
Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari
(hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML.
HTML ditujukan untuk membuat struktur, atau konten dari halaman web
CSS digunakan untuk tampilan dari halaman web tersebut.
HTML for content, CSS for Presentation.
Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks.
Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis
langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan
warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:
<html>
<head>

<title>Test Tag Font HTML</title>


</head>
<body>
<p>
CSS merupakan bahasanya <font color="red"> desainer web </font>.
Namun sebenarnya, apa itu CSS?
<br />
<font color="red"> CSS </font> adalah kumpulan kode yang digunakan
untuk mendefenisikan desain dari bahasa markup,
<font color="red">salah satunya adalah HTML</font>.
<br />
Dengan CSS kita bisa mengubah desain dari
<font color="red">text, warna, gambar dan latar belakang</font>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>

Dengan tag <font>, kita membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini
tidak salah, dan semuanya berjalan sesuai keinginan.
Untuk artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=red> pada
kata-kata tertentu.
Namun ketika website memiliki 50 artikel seperti diatas, dan karena sesuatu hal anda ingin
merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk
mengubahnya satu persatu, halaman per halaman.
CSS akan mencoba memisahkan tampilan dari konten.

Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

<html>
<head>
<title>Test Background Color CSS</title>
<style type="text/css">
.warna {
color: red;
}
</style>
</head>
<body>
<p>
CSS merupakan bahasanya <span class=warna>desainer web</span>.
Namun sebenarnya, apa itu CSS?
<br />
<span class=warna>CSS </span>adalah kumpulan kode
yang digunakan untuk mendefenisikan desain dari bahasa markup,
<span class=warna>salah satunya adalah HTML</span>.
<br />
Dengan CSS kita bisa mengubah desain dari
<span class=warna>text, warna, gambar dan latar belakang</span>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>

Dalam contoh CSS diatas, tag <font> diubah menjadi tag <span>. Tag <span> sendiri merupakan tag
yang tidak bermakna, namun bisa di kostumasi (disesuaikan) menggunakan CSS. Tag span saya
tambahkan dengan atribut atribut class=warna. Atribut class berguna untuk memasukkan kode CSS
pada tag <style> di bagian head.
Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red
menjadi color:blue, dan seluruh tag yang memiliki class=warna akan otomatis berubah menjadi
biru.
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman.

3 Cara Penggabungan CSS dengan HTML

1. Metode Inline Style


cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style,
contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
<html>
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS
yang ingin diterapkan.
Tag CSS ini praktis, tapi tidak disarankan karena kode CSS langsung tergabung dengan HTML
Tidak memenuhi tujuan CSS, desain terpisah dengan isi (content)

2. Metode Internal Style Sheets

disebut juga Embedded Style Sheets


digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman
HTML.
Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag
<style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan motode internal style sheets CSS:
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
h2 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

sudah jauh lebih baik daripada inline style, karena kita sudah memisahkan CSS dari HTML.
Seluruh kode CSS akan berada pada tag head dari HTML.
kekurangannya jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus
membuat kode CSS pada masing-masing halaman tersebut.

3. Metode External Style Sheets

digunakan untuk mengangkat kode CSS tersebut kedalam sebuah file tersendiri yang terpisah
sepenuhnya dari halaman HTML.
Setiap halaman yang membutuhkan kode CSS, tinggal memanggil file CSS tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets
Tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan disimpan sebagai
belajar.css
Isi dari file belajar.css
h2 {
background-color:black;
color:white;

Pastikan file disimpan dalam format .css dan disimpan dalam folder yang sama dengan kode
html yang akan dibuat.
Ada 2 cara yang dinggunakan untuk menginput kode css ke html

@import

<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
@import url(belajar.css);
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Untuk metode @import, kita menyisipkan @import url (belajar.css) pada tag <style>.
Alamat url bisa berupa alamat relatif maupun absolut

tag <link>\

<html>
<head>
<title>Contoh Inline Style CSS</title>
<link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Pada metode ini kita menggunakan atribut href pada tag<link> yang berisi alamat file css
(belajar.css).

Dari ketiga cara penggabungan CSS dan HTML di atas, yang paling disarankan untuk digunakan
adalah metode external style sheets. Karena kita bisa menggunakan 1 file css untuk seluruh halaman
web yang dibuat.

Dan jika terjadi kesalahan, kita tinggal mengubah 1 file css saja.

Anda mungkin juga menyukai