Scribd
Unggah
16 tayangan16 halaman

Pertemuan 14 - Pengenalan Dasar CSS

Diunggah oleh

asdnyaenam
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 PPTX, PDF, TXT atau baca online di Scribd
16 tayangan16 halaman

Pertemuan 14 - Pengenalan Dasar CSS

Diunggah oleh

asdnyaenam
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 PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

PEMROGRAMAN WEB I

Pertemuan ke-14
Pengenalan Dasar CSS

Riad Sahara, S.SI., MT


CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.

Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS kita bisa:

• Halaman landing page yang menarik;

• Template atau tema blog;

• Mengubah PSD (Desain web) menjadi HTML;

• dan sebagainya.
Contohnya, bagaimana tampilan facebook tanpa CSS?

Mungkin bisa seperti ini:


I. Apa itu CSS?

CSS (Cascade Style Sheet) meruapakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat
lebih menarik dan indah. Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, dan lain-
lain. CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994.
1.1. Variasi atau Versi CSS
Sejak awal diperkenalkan CSS memiliki beberapa variasi:

1. CSS 1: adalah versi pertama (17 Desember 1996)

2. CSS 2: adalah versi ke-2 (Mei 1998)

3. CSS 2.1: (7 juni 2011)

4. CSS 3: (2012)

5. CSS 4: masih dalam pengembangan.

Apa bedanya dari setiap versi tersebut? Tentunya ada penambahan dan pengurangan.
1.2. Struktur Kode atau Sintaks Dasar CSS
Struktur kode CSS terdiri dari tiga bagian:

1. Selektor;

2. Blok Deklarasi;

3. Properti dan nilanya.

Contoh:
1.2.1. Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur.

Contohnya:

h1 {

color: red;

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.


Contoh:

/* Selektor dengan nama tag */ /* selektor dengan ID elemen */

h2 { #header {

color: blue background: grey;

} }

/* Selektor degnan class */ /* Selektor dengan Atribut */

.bg-yellow { input[type=text]{

backgound-color: yellow; background: yellow;

} }
1.2.2. Blok Deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor.

Contoh:

p{

font-size: 18px;

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.

Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.
1.2.3. Properti dan Nilainya
Properti merupakan atribut atau sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.

properti: "nilai";

Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak
menggunakan titik koma.

Properti harus ditulis di dalam blok deklarasi.


Contoh:
blockquote {

background: pink;

Jangan tulis seperti ini:

background: pink;

p{

}
1.3. Cara Menulis kode CSS dalam HTML

Penulisan kode CSS di HTML dapat dilakukan di dalam tag <style>. Tag tersebut dapat ditulis di dalam
tag <head> atau <body>.

Kebanyakan orang menulisnya di dalam tag <head>. Perhatiakn contoh berikut ini:
<!DOCTYPE html>

<html>

<head> <body>

<title>Contoh Penulisan kode CSS</title> <p>Sebuah contoh paragraf yang sudah


diberikan oleh kode CSS</p>

<style type="text/css"> </body>

p { color: red } </html>

</style>

</head>
Hasilnya, elemen <p> akan berwarna merah:

Selain dengan cara ini, ada dua cara lagi


yang bisa digunakan:

1. Inline CSS

2. Eksternal CSS
Referensi
1. Muhardian, Ahmad. 2016. Tutorial HTML untuk Pemula “Belajar HTML dari dasar hingga bisa hosting web sendiri”.
PETANIKODE.COM
https://www.petanikode.com/tutorial/html/
2. Sarwati Rahayu. 2011. Pemrograman Web. Universitas Mercu Buana, Jakarta.
3. Gregorius, Agung. Buku Pintar HTML5 + CSS3 + DreamWeaver CS6. Penerbit: Jubilee Enterprise. Yogyakarta, 13 September
2012.
4. Lubbers, P., Albers, B., & Salim, F. (2011). Overview of HTML5. In Pro HTML5 Programming (pp. 1-22). Apress.
5. West, W., & Pulimood, S. M. (2012). Analysis of privacy and security in HTML5 web storage. Journal of Computing Sciences
in Colleges, 27(3), 80-87.
6. Zibula, A., & Majchrzak, T. A. (2012, April). Cross-platform development using HTML5, jQuery mobile, and phonegap: realizing
a smart meter application. In International Conference on Web Information Systems and Technologies (pp. 16-33). Springer,
Berlin, Heidelberg.
7. Garaizar, P., Vadillo, M. A., & Lopez-de-Ipina, D. (2012, July). Benefits and pitfalls of using HTML5 APIs for online experiments
and simulations. In 2012 9th International Conference on Remote Engineering and Virtual Instrumentation (REV) (pp. 1-7).
IEEE.
8. Zibula, A., Majchrzak, T. A., Krempels, K. H., & Cordeiro, J. (2012). Developing a Cross-platform Mobile Smart Meter
Application using HTML5, jQuery Mobile and PhoneGap. In WEBIST (pp. 13-23).
9. Kim, T., Kim, B., & Kim, J. (2013). Development of a lever learning webapp for an HTML5-based cross-platform. In Multimedia
and Ubiquitous Engineering (pp. 313-320). Springer, Dordrecht.
10. Brandon, D. (2011). HTML 5 programming: conference tutorial. Journal of Computing Sciences in Colleges, 26(5), 61-61.
Terima
Kasih
Riad Sahara, S.SI., MT

Anda mungkin juga menyukai