Langkah selanjutnya adalah mempelajari CSS (Cascading Style Sheets), alat utama untuk perancang web saat ini.
Apa itu CSS?
CSS adalah singkatan dari ‘Cascading Style Sheets’. CSS adalah bahasa saudara untuk HTML yang memungkinkan Anda untuk menata halaman web Anda. Contoh perubahan gaya adalah membuat kata-kata menjadi tebal. Dalam HTML standar, Anda akan menggunakan <b > tag seperti ini:
<b>membuat text tebal</b> |
Ini berfungsi dengan baik dan tidak ada yang salah dengan itu, kecuali bahwa sekarang jika Anda ingin, katakanlah, ubah semua teks Anda yang awalnya Anda buat dengan berani untuk digarisbawahi, Anda harus pergi ke setiap tempat di setiap halaman dan mengubah tag .
Kerugian lain dapat ditemukan dalam contoh ini: misalnya Anda ingin membuat teks di atas menjadi tebal, membuat gaya font Verdana dan mengubah warnanya menjadi merah, Anda akan membutuhkan banyak kode yang melilit teks:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"> <b>This is text</b></font> |
Ini kata kerja (bertele-tele) dan berkontribusi untuk membuat HTML Anda berantakan. Dengan CSS Anda dapat membuat gaya kustom di tempat lain dan mengatur semua propertinya, berikan nama yang unik dan ‘tandai’ HTML Anda untuk menerapkan properti gaya ini:
<p class="myNewStyle">My CSS styled text</p> |
Dan di antara bagian < head > < / head > tag di bagian atas halaman web Anda, Anda akan memasukkan kode CSS ini yang mendefinisikan gaya yang baru saja kita terapkan:
<style type="text/css"> <!-- .myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } --> </style> |
Dalam contoh di atas kita menyertakan kode style sheet inline, atau dengan kata lain, di halaman. Ini bagus untuk proyek yang lebih kecil atau dalam situasi di mana gaya yang Anda tetapkan hanya akan digunakan dalam satu halaman.
Namun ada beberapa kali ketika Anda akan menerapkan gaya css Anda ke banyak halaman dan itu repot untuk menyalin dan menempelkan kode CSS ke setiap halaman. Selain fakta bahwa Anda akan mengacaukan setiap halaman dengan kode CSS duplikat, Anda juga harus mengedit setiap halaman ini … jika Anda ingin membuat perubahan gaya.
Solusinya seperti dengan JavaScript, Anda dapat menentukan / membuat gaya CSS Anda di file yang terpisah dan kemudian menautkannya ke halaman yang Anda inginkan untuk menerapkan kode:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css"> |
Baris kode di atas menautkan style sheet eksternal Anda yang disebut ‘ myFirstStyleSheet.css ’ ke dokumen HTML. Anda menempatkan kode ini di antara bagian < head > < / head > tag di halaman web Anda.
Untuk membuat style sheet eksternal yang perlu Anda lakukan adalah membuat dokumen teks sederhana (pada Windows Anda cukup klik kanan dan pilih new > dokumen teks) dan kemudian ubah dari jenis file .txt ke .css. Anda dapat mengubah jenis file dengan hanya mengubah ekstensi nama file. Ekstensi nama file pada Windows memberi tahu komputer jenis file itu dan memungkinkan komputer menentukan cara menangani file ketika, misalnya, Anda mencoba membukanya.
File CSS hanya khusus (khusus) diformat file teks banyak dengan cara yang sama seperti halaman HTML. Tidak ada yang istimewa atau berbeda tentang file itu sendiri, melainkan isi file yang membuat dokumen CSS menjadi dokumen CSS.
Ketika bekerja dengan dokumen CSS eksternal ada beberapa hal yang perlu diingat:
1. Anda TIDAK AKAN menambahkan tag ini dalam dokumen / halaman CSS itu sendiri seperti yang Anda lakukan jika Anda menyematkan kode CSS dalam HTML Anda:
<style type="text/css"></style> |
Karena tautan di laman web Anda yang menghubungkan laman CSS ke laman HTML Anda mengatakan bahwa Anda menautkan ke laman CSS, Anda tidak perlu menyatakan bahwa kode di laman itu adalah CSS. Itulah yang dilakukan oleh tag di atas. Sebagai gantinya Anda hanya akan menambahkan kode CSS Anda langsung ke halaman:
.myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my2ndNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my3rdNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #FF0000; } |
Dalam contoh di atas saya telah membuat serangkaian kelas CSS yang dapat diterapkan ke tag HTML apa pun seperti ini:
<p class="myNewStyle">My CSS styled text</p> |
atau
<h2 class="my3rdNewStyle">My CSS styled text</h2> |
Anda akan melihat bahwa dalam contoh di atas saya menerapkan gaya CSS ke < h2 > menandai. Tag ini menetapkan ukuran teks yang dibungkus dengan ukuran yang telah diatur sebelumnya di browser (mis: 10 piksel). Saat Anda menerapkan kelas CSS untuk itu, kode CSS menimpa ukuran default yang biasanya Anda dapatkan dengan < h2 > tag yang mendukung ukuran yang ditentukan dalam kelas CSS. Jadi sekarang Anda dapat melihat bahwa CSS dapat mengesampingkan perilaku tag HTML default!
Dalam contoh di atas, saya memiliki kode CSS tempat saya mendefinisikan kelas CSS dan kemudian ‘ melamar ’ mereka ke berbagai elemen di halaman. Cara lain untuk menerapkan CSS adalah mendefinisi ulang tag HTML secara global agar terlihat dengan cara tertentu:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; } |
Apa yang dilakukan kode CSS ini adalah mengatur gaya font dan ukuran semua < h1 > tag dalam satu kesempatan. Sekarang Anda tidak perlu menerapkan kelas CSS seperti yang kami lakukan sebelumnya ke < h1 > tag karena mereka semua secara otomatis dipengaruhi oleh aturan gaya CSS.
Berikut adalah contoh lain di mana saya memberikan margin seluruh halaman lebih besar:
body { margin-left: 15%; margin-right: 15%; } |
Seperti yang Anda lihat, Anda dapat mendefinisikan ulang tag apa pun dan mengubah tampilannya! Ini bisa sangat kuat:
div { background: rgb(204,204,255); padding: 0.5em; border: 1px solid #000000; } |
Diatur dalam kode di atas, setiap < div > < / div > tag sekarang akan memiliki warna latar belakang ‘ rgb (204.204.255) ’ dan memiliki lapisan 0,5em dan batas tipis 1 piksel yang berwarna hitam pekat.
Beberapa hal untuk dijelaskan tentang hal di atas:
Warna dalam CSS dapat diekspresikan dalam beberapa cara:
- In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
- In rgb -> rgb(204,204,255) is a light purple-blue color.
- With named colors like: ‘red’ or ‘blue’
Saya biasanya menggunakan warna hex karena saya terbiasa dengan mereka atau saya hanya menggunakan warna bernama. Jadi contoh terakhir dapat ditulis ulang seperti:
div { background: green; padding: 0.5em; border: 1px solid #FF0000; } |
Jadi alih-alih ‘ rgb (204.204.255) ’ , Saya baru saja menentukan ‘ hijau ’ ;.
Dengan menggunakan RGB (RGB adalah akronim untuk: ‘ Merah Hijau Biru ’) dan warna Hex, Anda benar-benar bisa mendapatkan warna yang tepat yang Anda inginkan dengan mudah ketika Anda tahu kode Anda. Untungnya banyak program (seperti Dreamweaver) menyediakan pemetik warna yang mudah digunakan untuk Anda sehingga Anda tidak perlu tahu nilai-nilai untuk kodenya.
Dalam contoh terakhir ini saya akan menunjukkan kepada Anda ‘ super keren ’ Kode CSS yang memungkinkan Anda membuat efek roll-over tautan tanpa gambar:
:link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */ |
CSS di atas akan menyebabkan tautan Anda berubah warna ketika seseorang mengarahkan kursor mouse ke atasnya, rollover instan tanpa gambar! Satu catatan penting dengan kode di atas adalah bahwa deklarasi gaya harus berada dalam urutan yang benar: " tautan-dikunjungi-arahkan-layang-aktif ", jika tidak, dapat merusaknya di beberapa browser.
CSS sangat kuat dan memungkinkan Anda melakukan hal-hal yang tidak dapat Anda lakukan dengan HTML standar. Ini didukung dengan baik sekarang di semua browser modern dan merupakan alat yang harus dipelajari untuk desainer web.
Contoh di atas hanyalah contoh kecil dari apa yang dapat Anda lakukan dengan CSS, tetapi seharusnya lebih dari cukup bagi Anda untuk mulai menata halaman Anda dengan baik. Seperti halnya banyak teknologi, CSS memiliki banyak kemampuan yang kebanyakan orang tidak perlu sering menggunakannya sama sekali. Jangan terjebak dalam jebakan berpikir bahwa jika ada beberapa fungsi / fitur yang tersedia, Anda harus menggunakannya.
