(Struktur Dasar CSS)
Disusun Oleh:
Kelompok 1 :
Nama : 1. MEGAWATI ZAINUDDIN
2. RISALDI MARDIANSYAH
3. KHAERUL QADRI
4. NUR HIKMAH
Kelas : C
JURUSAN TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI ALAUDDIN
MAKASSAR
2018
KATA PENGANTAR
Assalamualaikum wr,wb.
Puji syukur kami panjatkan pada kehadirat Allah SWT yang telah
memberikan rahmat, hidayah serta karunia-Nya kepada kami sehingga kami dapat
menyelesaikan tugas makalah TDW bertemakan “Struktur Dasar CSS pada
HTML” tepat pada waktunya.
Kami menyadari bahwa makalah yang kami selesaikan ini masih jauh dari
kesempurnaan. Seperti halnya pepatah “ tak ada gading yang tak retak “, oleh
karena itu kami mengharapkan kritik dan saran dari semua kalangan yang bersifat
membangun guna kesempurnaan makalah kami selanjutnya.
Akhir kata, kami ucapkan terima kasih kepada semua pihak yang telah
berperan serta dalam penyusunan makalah ini dari awal sampai akhir. Serta, kami
berharap agar makalah ini dapat bermanfaat bagi semua kalangan. Amin
Makassar, juli 2018
Penulis
Kelompok 1
ii
DAFTAR ISI
Kata pengantar ................................................................................................. i
Daftar isi ........................................................................................................... ii
BAB I PENDAHULUAN
A. Latar Belakang ..................................................................................... 1
B. Tujuan................................................................................................... 1
C. Manfaat ................................................................................................. 1
BAB II PEMBAHASAN
A. Pengertian Struktur Dasar CSS ............................................................ 2
B. Sejarah Cascading Style Sheets (CSS) ................................................. 2
C. Keuntungan Penggunaan CSS.............................................................. 3
D. Kekurangan Penggunaan CSS.............................................................. 4
E. Syntax CSS........................................................................................... 4
F. Cara Memasang CSS ke dalam CSS .................................................... 5
BAB V PENUTUP
A. Kesimpulan .......................................................................................... 15
B. Saran ..................................................................................................... 15
Daftar Pustaka .................................................................................................. 16
iii
BAB I
PENDAHULUAN
A. Latar Belakang
Perkembangan dunia informatika memang selalu mengalami peningkatan
yang sangat pesat.Hal ini terbukti dengan adanya pengguna internet di ber bagai
bidang.
Mengingat pentingnya dinia internet,para programmer berusaha membuat
dan mendesain program-program dan aplikasiyang dibutuhkan saat melakukan
browsing internet.Hal ini yang menjadi penulis menyusun makalah ini.Namun
dari sekian pemrograman yang ada,yang akan dibahas adalah mengenai
pemrograman tentang “Struktur Dasar CSS pada HTML”.
B. Tujuan
Adapun tujuan yang ingin dicapai yaitu:
1. Untuk mengetahui Struktur Dasar CSS
2. Untuk mengetahui Sejarah Cascading Style Sheets (CSS)
3. Untuk mengetahui Keuntungan Penggunaan CSS
4. Untuk mengetahui KekuranganPenggunaan CSS
5. Untuk mengetahui Bagaimana itu Syntax CSS
6. Untuk mengetahui Cara Memasang CSS ke dalam CSS
C. Manfaat
Adapun manfaat yang ingin saya sampaikan adalah untuk memberikan
informasi kepada para pembaca , utamanya bagi sesama mahasiswa dan generasi
muda tentang Bagaimana itu Struktur Dasar CSS pada HTML.
1
BAB II
PEMBAHASAN
Cascading Style Sheets (CSS)
A. Pengertian Struktur Dasar CSS :
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup. Penggunaan yang paling umum dari CSS adalah untuk memformat
halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian,
bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML
termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web
Consortium (W3C).
Cascading Style Sheets (CSS) dapat dituliskan pada bagian <body>,
<head> suatu dokumen HTML atau di letakkan di sebuah file eksternal dan
perintah CSS dibatasi oleh tag <style> dan </style>
CSS mampu mengatur warna body teks, ukuran gambar, ukuran border,
warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi
teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan
halaman yang sama dengan format yang berbeda.
B. Sejarah Cascading Style Sheets (CSS) :
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C)
menetapkan CSS atau yang disebut CSS1 sebagai bahasa pemrograman standard
dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag
baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang
bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
2
5. Margin, border dan padiing.
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan
menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level
CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan
pada International Accessibiality and Capacibilty kususnya media-specific CSS.
CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar
bisa ditampilkan di printer.
CSS 3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal
dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website,
diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan
dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru
yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple
background, border-radius, drop-shadow, border-image, CSS-Math dan CSS
Object Model.
C. Keuntungan Penggunaan CSS :
Banyak dari keuntungan yang dapat anda peroleh dari menggunakan CSS
ini seperti :
1) CSS memberikan keseragaman pada halaman web.
2) Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang.
Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap
halaman web. Anda hanya perlu membuat perubahan dalam style sheet.
3) CSS memungkinkan Anda untuk memuat halaman web Anda dengan
mudah.
4) Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
5) CSS membantu Anda memelihara halaman web Anda dengan mudah dan
efektif.
3
D. Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi
kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi
berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya
terlihat baik di semua browser dan menambahkan kode-kode khusus browser
tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua
browser.
E. Syntax CSS :
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1
selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur /
diformat. Property untuk menunjukkan, bagian (properti) dari selector yang
hendak diatur. Value adalah nilai dari pengaturannya.
Contoh Syntax;
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Mengatur color dari h1 ke warna merah
Pengelompokan Selectors
Menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan koma. Misalkan anda akan mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
4
CSS Comment
Ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk
memberi catatan pengingat. Bisa menggunakan syntax pembuka /* dan penutup */
untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak
akan dibaca sebagai kode, tapi hanya sebagai catatan.
/* Tulis komentar anda di sini */
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
F. Cara Memasang CSS ke dalam HTML
Untuk memasang kode CSS ke dalam HTML terdapat tiga cara. Dimana
ketiga cara ini memiliki fungsi yang sama, namun cara pemasangannya saja yang
berbeda.
1. Internal style sheet
2. External style sheet
3. Inline stylesheet
5
1) Internal CSS
Cara pertama memasang CSS ke dalam html yaitu dengan meletakkan
kode CSS didalam dokumen html. Dimana cara menambah kode CSS diantara tag
html <head>…</head>. Cara memasang kode CSS ini cukup efektif akan tetapi
kita harus menulis kode CSS kesemua halaman HTML yang menggunakan kode
CSS. Nah, selanjutnya kita harus tahu cara memasang atau penulisan kode CSS ke
dalam HTML. Berikut contoh scriptnya:
<style type=”text/css”>
Selector {Property1: value1; property2: value2}
</style>
Keterangan: Dimulai dengan tag <style type=”text/css”> dan diakhiri
dengan </style>. Selector bisa disebut identitasnya atau nama tag yang isinya akan
diatur pada CSS. Suatu block selektor ditandai dengan kurung kurawal pembuka
dan penutup {} dan didalamnya terdapat properti serta nilai/value yang diberikan.
Beberapa contoh properti untuk paragraf dan header CSS:
p {margin-left: 20px} /*atur jarak dari kiri 20px*/
P {font-family:”sans serif”} /*jenis font sans serif*/
p {text-align: center; color: red} /*rata tengah, warna merah*/
body {color: black} /*warna hitam*/
p { text-align: center; color: black; font-family: arial }
h1, h2, h3, h4, h5, h6 { color: green } /*warna header hijau*/
6
Contoh pemasangan kode CSS ke dalam HTML
<!DOCTYPE html>
<html>
<head>
<title>internal CSS</title>
<style type="text/css">
p {color: red}
body {background-color: black}
</style>
</head>
<body>
<p>AYO MEMBACA...</p>
</body>
</html>
7
Hasilnya
8
Manfaat internal CSS:
Perubahan hanya terjadi pada 1 halaman
Class dan ID bisa digunakan oleh internal stylesheet
Tidak perlu meng-upload beberapa file karena HTML dan CSS bisa
digunakan di file yang sama.
Kekurangan menggunakan Internal CSS:
Meningkatkan waktu akses website
Perubahan hanya terjadi pada 1 halaman – tidak efisien bila Anda ingin
menggunakan CSS yang sama pada beberapa file.
9
2) External CSS
Cara memasang CSS ke dalam HTML berikutnya adalah dengan
memanggil file CSS yang bisa berada dalam satu folder atau luar folder. Artinya
kode CSS tidak dalam satu file/dokumen dengan kode HTML. Cara kerjanya kode
CSS dengan format .css lalu di panggil ke dalam file berformat .html. Cara ini
lebih efektif dan lebih mudah dalam pengeditan.
Browser akan membaca definisi style dari file .css dan menerapkan sesuai
dengan tag yang ada pada html. Pada dokumen html untuk memanggil file css
dengan atribut href=”namafilecss” dimana diletakkan antara tag <head></head>.
Untuk lebih jelasnya kita lihat cara memasang CSS ke dalam HTML berikut ini:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML</h1>
<!-- contoh penggunaan class -->
<div class="mega">Megawati Zainuddin</div>
<div class="aldi">Risaldi Mardiansyah</div>
<div class="manda">Khaerul Qadri</div>
<!-- contoh penggunaan id -->
<div id="hikmah">Nur hikmah</div>
</body>
</html>
10
Dalam contoh diatas, file style.css berisikan semua rule. Contohnya:
h1{
color: orange;
font-family: sans-serif;
text-align: center;
.mega{
background: magenta;
padding: 10px;
color: blue;
font-family: cursive;
text-align: right;
11
}
.aldi{
background: yellow;
padding: 10px;
color: red;
font-family: serif;
text-align: left;
.manda{
background: black;
padding: 10px;
color: pink;
font-family: cursive;
text-align: center;
#hikmah{
background: pink;
padding: 10px;
font-family: cursive;
text-align: center;
12
color: white; }
Hasilnya:
Manfaat CSS eksternal:
Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi
Kecepatan loading menjadi lebih cepat
File CSS yang sama bisa digunakan di banyak halaman.
Kekurangan CSS eksternal:
Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.
13
3) Inline CSS
Cara meletakan kode CSS ke dalam HTML ini bisa dikatakan kurang
efisien. Karena kita hatus menyisipkan kode CSS terhadap semua tag html yang
ingin diberikan kode CSS diantara tag <body></body>. Misalkan memasang CSS
ke dalam HTML pada tag <b> atau bold dan juga tag underline.
Untuk lebih Jelasnya memasang CSS HTML inline adalah :
<!DOCTYPE html>
<html>
<body style="background-color:pink;">
<h1 style="color:white;background: blue;padding:30px;">KELOMPOK 1</h1>
<p style="color:white;background: black; padding: 20px;">STRUKTUR DASAR
CSS PADA HTML</p>
</body>
</html>
Hasilnya:
14
Manfaat Inline CSS:
Berguna jika Anda ingin menguji dan melihat perubahan
Berguna untuk perbaikan cepat
Permintaan HTTP yang lebih kecil
Kekurangan inline CSS:
Inline CSS harus diterapkan pada setiap elemen
15
BAB III
PENUTUP
A. Kesimpulan
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup. Terdapat 3 cara dalam memasang CSS pada HTML yaitu dengan cara
internal CSS, Eksternal CSS, dan inline CSS. Cara tersebut merupakan cara yang
mudah dalam menggunakan CSS. tergantung bagaimana yang anda inginkan.
B. Saran
Sebagai penyusun, kami merasa masih ada kekurangan dalam pembuatan
makalah ini. Oleh karena itu, kami mohon kritik dan saran dari pembaca. Agar
kami dapat memperbaiki makalah yang selanjutnya.
16
DAFTAR PUSTAKA
http://ndikendii.blogspot.com/2014/06/Struktur-dasar-css.html
http://seputarti.com/css/cara-memasang-css-ke-dalam-html.html
https://www.hostinger.co.id/tutorial/perbedaan-inline-css-external-css-
dan-internal-css/
https://www.malasngoding.com/belajar-html-mengenal-class-dan-id-pada-
html/
http://cssdanhtm.blogspot.com/2013/04/makalah-tentang-css-dan-
html.html
17
