Web Development

Alvian Bastian, [Link]., [Link].

 Introduction
• Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
• Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang
dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,
images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa
berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web
yang dibuat dengan bahasa HTML dan XHTML.
• CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman
yang sama dengan format yang berbeda.
([Link]
 Inline CSS
Buat file dengan nama [Link], dan ketikkan code berikut:
 Inline CSS
Jalankan di browser
 Internal CSS
Buat file dengan nama [Link], dan ketikkan code berikut:
 Internal CSS
Jalankan di browser
 External CSS
Buat folder dengan nama css dan buat file dengan nama [Link], serta ketikkan code berikut:
 External CSS
Buat file dengan nama [Link], dan ketikkan code berikut:
 External CSS
Jalankan di browser
 Classes and IDs
Buat file dengan nama classes&[Link], dan ketikkan code berikut:
 Classes and IDs
Jalankan di browser
 Div & Span
Buat file dengan nama div&[Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Div & Span
Lanjutan...
 Div & Span
Jalankan di browser
 Box Model Padding
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Box Model Padding
Lanjutan...
 Box Model Padding
Jalankan di browser
 Box Model Border
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Box Model Border
Lanjutan...
 Box Model Border
Jalankan di browser
 Box Model Margin
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Box Model Margin
Lanjutan...
 Box Model Margin
Jalankan di browser
 Background
Buat folder images pada folder CSS dan copy satu file sebagai background nantinya:
 Background
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Background
Lanjutan...
 Background
Jalankan di browser
 Floating
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Floating
Lanjutan...
 Floating
Jalankan di browser
 Positioning
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Positioning
Lanjutan...
 Positioning
Jalankan di browser
 Display
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Display
Lanjutan...
 Display
Jalankan di browser
 Text Decoration
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Text Decoration
Lanjutan...
 Text Decoration
Jalankan di browser
 Text Align
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Text Align
Lanjutan...
 Text Align
Jalankan di browser
 Text Font
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Text Font
Lanjutan...
 Text Font
Jalankan di browser
 Text Effects
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Text Effects
Lanjutan...

berlanjut di sebelah…
 Text Effects
Lanjutan...
 Text Effects
Jalankan di browser
 Image Sprites
Buat file dengan nama [Link], dan ketikkan code berikut:
 Image Sprites
Jalankan di browser
 Image Opacity
Buat file dengan nama [Link], dan ketikkan code berikut:
 Image Opacity
Jalankan di browser
 Styling Lists
Copy file [Link] ke folder images
 Styling Lists
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Styling Lists
Lanjutan...
Styling Lists
 Styling Links
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Styling Links
Lanjutan...
 Styling Links
Jalankan di browser
 Gradients
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Gradients
Lanjutan...
 Gradients
Jalankan di browser
 2D Transforms
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 2D Transforms
Lanjutan...
 2D Transforms
Jalankan di browser
 Transitions
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Transitions
Lanjutan...
 Transitions
Jalankan di browser
 Animations
Buat file dengan nama [Link], dan ketikkan code berikut:

berlanjut di sebelah…
 Animations
Lanjutan...
 Animations
Jalankan di browser