Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Desain Web Untuk Anak-Anak: CSS

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Content
Web Design for Kids: CSS Layout

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Selamat datang di pelajaran kelima seri Desain Web Untuk Anak-Anak, semuanya tentang CSS.

Kita telah berkerja sangat keras pada konten HTML, jadi sekarang waktunya untuk membuatnya tampak cantik! Kita akan menambahkan sesuatunya ke halaman HTML di sini, juga memulai sebuah file baru: sebuah dokumen CSS.

Lihatlah website lengkap yang sedang kita buat. File untuk pelajaran ini dapat didownload di sini dan jangan lupa untuk mengajukan pertanyaan dalam bagian komentar pada akhir halaman ini.

Apa Tepatnya CSS Itu?

Sebelum kita mulai melakukan coding mari pertama-tama pastikan bahwa kita mengerti apa CSS itu. CSS berarti Cascading Style Sheets dan itu adalah sebuah bahasa yang membantu kita mengubah tampilan halaman HTML.

no css vs css

Dalam gambar di atas, browser pada bagian kiri menunjukkan sebuah website tanpa CSS, tanpa styling, sementara website di sebelah kanan memiliki styling. Styling telah dituliskan dalam sebuah file CSS–jauh lebih baik!

CSS dituliskan dalam sebuah file terpisah menggunakan editor teks. Dokumen HTML disimpan dalam sebuah ekstensi .html, namun dokumen CSS akan disimpan dalam sebuah ekstensi .css.

Membuat Sebuah File CSS

Kita akan perlu memulai sebuah dokumen baru dalam editor teks dan menyimpan ini sebagai "tutstown.css" dalam folder "tutsfolder", bersama dengan "index.html" dan "images".

HTML & CSS

Agar dokumen CSS dapat menerapkan style ke dokumen HTML kita perlu menautkannya bersama-sama. Ini dilakukan melalui sebuah elemen <link> dalam elemen head pada bagian paling atas dokumen HTML.

Kita akan menambahkan tautan ini langsung di bawah judul:

Ada beberapa attribute penting untuk dicantumkan dalam elemen ini, pertama adalah type. Attribute type memberi tahu browser jenis konten apa yang kita tautkan. Dalam kasus ini itu adalah sebuah file text/css.

Attribute kedua yang kita lihat di sini adalah rel, yang memberi tahu browser apa hubungan antara HTML dan dokumen yang ditautkan (CSS kita). Dokumen CSS merupakan sebuah stylesheet untuk HTML, sehingga itu apa yang akan kita cantumkan di sini.

Terakhir, kita memiliki href yang kamu mungkin ingat dari elemen <a>. Itu menunjukkan ke tempat lainnya. Dalam hal ini itu memberi tahu browser dimana untuk menemukan file CSS yang telah kita tautkan.

Jika semuanya ditautkan dengan benar, halaman akan tampak berbeda jika kamu memuat ulang browser.

Class

Dalam file CSS kita dapat memuat daftar elemen HTML yang telah kita gunakan dan mengatakan bagaimana kita ingin melihat tampilannya. Ada banyak cara untuk mengarahkan elemen yang kita inginkan, dan HTML class adalah salah satunya:

HTML class adalah attribute yang dapat kita tambahkan ke elemen. Setelah sebuah elemen memiliki sebuah class name, kita dapat menggunakan ini dalam CSS.

Class name yang dipilih haruslah sebuah kata yang menjelaskan konten elemen itu.

Menambahkan sebuah class pada <header> akan tampak seperti berikut:

Class tidak unik, sehingga beberapa elemen berbeda dapat memiliki class name yang sama. Ini membuat menambahkan style yang sama untuk banyak elemen jauh lebih langsung; kita akan melihat aksi ini ketika kita akan menyimpan gambar!

Bagaimana CSS Ditulis

Cara kamu menulis code disebut syntax. Sama halnya dengan HTML, CSS perlu ditulis dalam cara yang benar agar berfungsi.

Mari melompat ke file CSS dan, hanya sebagai latihan, ganti background-color pada header ke blue.

Ada banyak bagian agar tampak benar!

Jadi CSS mengerti bahwa apa yang kita targetkan adalah sebuah class name, kita perlu melakukan beberapa hal:

  • Kita perlu meletakkan sebuah titik . sebelum nama.
  • Instruksi styling dicantumkan dalam kurung kurawal, {}.
  • Apa yang akan kita terapkan styling pada (background-color) secara langsung diikuti oleh sebuah colon :
  • Kemudian kita menambahkan nilai (blue dalam kasus ini)
  • Tiap style harus diakhiri dengan sebuah semicolon ;

Sangat mudah untuk melupakan hal ini!

Simpan file CSS ini dan muat ulang browser; jika kamu belum membukanya kamu dapat melakukannya dengan dobel klik pada file "index.html" dalam "tutsfolder". Rapi bukan?!

Penting! Sekarang mari kita hapus styling ini karena situs kita tidak akan memiliki sebuah header berwarna biru!

Comment Lebih Banyak

CSS juga membolehkan kita untuk mencantumkan komentar dalam file kita yang akan diabaikan browser, namun mereka akan tampak sedikit berbeda dari HTML comment.

Sebuah CSS comment berada dalam simbol ini: /* */

Dokumen CSS dalam file latihan akan mengandung beberapa comment berguna untuk menjelaskan sesuatu lebih lanjut.

Body

Styling aktual paling awal yang dapat kita lakukan untuk website adalah mengganti background-color ke kuning cerah cantik itu. Ada beberapa nilai warna yang dapat dituliskan dalam CSS, seperti blue dalam contoh kode di atas, dan browser mengerti. Untuk warna yang kurang umum kita akan perlu mencantumkan nilai hexadecimal warna itu, atau hex, sebuah angka.

Semua warna memiliki pasangan nomor hex. Browser tidak mengerti banyak warna ketika dituliskan, namun mereka cukup mengerti nomor hex. Nomor hex untuk warna kuning cerah kita adalah #FAF8DA, dan kita ingin menerapkannya ke <body>, untuk mengisi keseluruhan halaman.

Penting! Tidak perlu menambahkan sebuah titik di depan body karena itu bukan sebuah class name. Sebagai gantinya, kita telah langsung mengarahkan ke elemen body.

Jika kamu penasaran tentang nilai hex warna lainnya situs color-hex ini dapat sangat berguna.

Font

Kita dapat juga menentukan font (style huruf) untuk website kita menggunakan body dalam CSS.

Yang perlu kita tahu pada titik ini adalah kita harus membuat link sebuah font dari Google ke dokumen HTML kita. Setelah ini ditautkan browser akan mengerti dan kita dapat menggunakannya.

Berikut adalah tampilan link yang perlu kita tambahkan dalam <head> HTML kita (tempat yang sama kita menautkan dokumen CSS kita!)

Kemudian kita dapat menyimpan ini dan mengarahkan ke dokumen CSS kita:

Ini akan mengatur font untuk semua teks pada halaman sebagai Open Sans.

Header

Dalam header kita akan mengganti warna teks dan ukurannya seperti halnya ukuran gambar kota.

Pertama-tama, kita perlu menambahkan HTML class yang benar ke elemen dalam header, sehingga kita dapat menggunakannya dalam CSS kita.

Dalam pembukaan tag <h1> mari tambahkan sebuah class main-heading dan dalam <img> kita akan menambahkan sebuah class town-preview:

Dalam dokumen CSS kita sekarang dapat mengarahkan ke elemen ini melalui class name yang kita tentukan dan mulai melakukan styling.

Kita menentukan sebuah ukuran font yang besar di sini ke 70px. px, atau pixels, adalah titik pada layar. Titik ini diisi dengan warna dan digunakan sebagai unit pengukuran. Gambar kota kita juga cukup besar, jadi kita akan mengatur lebarnya pada 650px.

Properti color mengatur warna teks, dimana di sini (#205D76) adalah biru gelap.

Utama (Main)

Ingat, di dalam main kita memiliki bagian-bagian yang lebih kecil yang berisi sebuah gambar dan teks. Kita akan perlu menentukan ukuran gambar ini dan melakukan style pada heading dan list dengan CSS.

Gambar (Images)

Hal pertama yang perlu kita lakukan adalah menentukan ukuran gambar bangunan. Untuk menentukan ukuran gambar semuanya bersama-sama kita dapat menggunakan class name yang sama untuk beberapa elemen.

Kita akan ingin menambahkan class name yang sama, building, ke semua tiga gambar dalam HTML kita, dan kemudian mengubah ukuran ketiganya sekaligus dalam CSS, seperti ini:

Heading

Tiga heading kita yang lebih kecil ini juga dapat memiliki class name yang sama dan kita akan menggunakan itu untuk mengganti color dan font-size teks.

List dan Links

Setelah heading dalam tiap bagian kita memiliki daftar toko–ingat itu? Dalam tambahan ke perubahan ukuran dan warna tautan di sini, kita juga akan perlu mengubah warna bullet point daftar itu.

Mari tambahkan class store-list ke <ul> dan store-link ke <a> dalam dokumen HTML dan kemudian menyimpannya.

Kamu mungkin menyadari, ketika melihat website kita di dalam browser, bahwa tidak banyak terdapat spasi di antara item pada list, membuatnya sedikit ramai. Kita akan membicarakan semua tentang spacing dan menambahkan beberapa di sini dalam tutorial layout nantinya dalam seri ini.

Footer

Setelah kita menambahkan sebuah class primary-footer ke <footer> dan created-by ke elemen <p> dalam footer ini kita dapat menyatakan background-color seperti halnya color dan font-size teks:

Kesimpulan

Dalam pelajaran ini kita telah mempelajari semua tentang bagaimana menautkan sebuah dokumen HTML dan CSS bersama-sama dan kemudian menambahkan style cantik ke elemen kita melalui class. Pada titik ini apa yang kita lihat dalam browser kita masih akan tidak cocok dengan tampilan website utuh yang kita tinjau sebagai acuan, namun lihatlah apa yang dapat dilakukan warna dan ukuran yang berbeda! Itu hanya akan menjadi lebih baik.

Berikutnya kita akan memindahkan konten kita ke tempat dalam layar menggunakan beberapa teknik CSS layout yang ekstra pintar.

Sampai jumpa di sekitar kota!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.