Udah pakai template gratisan, tapi masih kurang puas, dan pengen di utak atik, eh ternyata pakai CSS.
Pernah ngalamin seperti itu?
Ga usah bingung, ga usah takut hehe… belajar CSS ga susah kok…
Web ini di buat dengan tujuan memberikan pelajaran lengkap dan gratis tentang CSS. Jangan salah sangka yah, aku juga bukan jagoan CSS loh, tapi aku sampai sekarang masih terus belajar soal CSS.
Setelah beberapa tahun bergelut di dunia maya, ternyata mempelajari CSS itu sangat bermanfaat.
Jika anda belum paham mengenai tag-tag HTML, ada baiknya anda belajar dulu soal HTML sebelum mulai belajar CSS.
Silahkan googling untuk belajar HTML, atau kalau mau bisa beli panduan HTML beserta latihan yang aku tulis.
Klik di sini yaa..
Beberapa kata di tutorial ini masih menggunakan bahasa inggris, kadang karena aku ga tau bahasa Indonesianya apa (:D) tapi maksudnya juga supaya ga bingung jika suatu ketika membaca referensi dari web lain yang berbahasa inggris.
Introduksi
Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip dengan template pada Microsoft Word: anda dapat megubah penampilan pada dokumen Word dengan mengubah format pada style dokumen. Begitu pula anda dapat mengubah penampilan halaman web dengan mengubah format pada tag HTML tertentu melalui Style Sheet, untuk selanjutnya menggantikan spesifikasi default dari browser untuk tag-tag tersebut.
Anda dapat mengambil keuntungan dengan menggunakan Style Sheet ini dengan tiga alasan utama: pemformatan tambahan, kontrol yang lebih baik, dan perubahan yang lebih mudah.
3 Cara Untuk Menambahkan Style Pada Web
Style Sheet dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:
• Dengan membuat link ke file Style Sheet dari file HTML. Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web dengan hanya mengedit satu file Style Sheet.
• Dengan menyisipkan Style Sheet pada file HTML. Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris Style Sheet.
• Dengan menyisipkan secara inline pada tag dalam file HTML. Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web.
Anda dapat menggunakan satu, dua, atau ketiga cara tersebut pada halaman web.
Sintax Dasar
Baik Style Sheet yang dilink maupun yang disisipkan memiliki satu atau lebih definisi style. (Sintax inline kadang berbeda).
Suatu definisi style terdiri dari suatu tag HTML (tag apapun), diikuti oleh sejumlah properti untuk tag tersebut yang terletak diantara tanda kurung kurawal. Tiap properti diidentifikasi oleh nama properti, diikuti oleh titik dua dan nilai properti.
Properti ganda dipisahkan oleh titik koma. Sebagi contoh, definisi style berikut memberi tag <H1> ukuran font yang spesifik (15 point), dan ketebalan huruf (boldface):
H1 {font-size: 15pt; font-weight: bold}
Anda kemudian dapat membuat definisi style untuk sejumlah tag HTML dan menempatkannya pada file terpisah atau sisipkan langsung pada halaman web.
Membuat Link ke Style Sheet
Untuk membuat link ke Style Sheet eksternal, anda dapat dengan mudah membuat sebuah file berisi definisi style kemudian simpan (save) dengan ekstensi .
CSS, kemudian buat link ke file tersebut dari halaman web. Dengan cara ini, anda dapat memanfaatkan Style Sheet yang sama untuk beberapa halaman dalam site anda.
Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat http://alamat-internet/style-saya.css, diantara tag <HEAD> anda harus menambahkan:
<HEAD>
<TITLE>Judul artikel</TITLE>
<LINK REL=STYLESHEET
HREF="http://alamat-internet/style-saya.css"
TYPE="text/css">
</HEAD>
Menyisipkan blok STYLE
Untuk menyisipkan (embed) Style Sheet, tambahkan blok <STYLE> </STYLE> di awal dokumen, di antara tag-tag <HTML> dan <BODY>.
Hal ini memungkinkan anda unutk mengubah penampilan satu halaman web. Tag <STYLE> memilki satu parameter yaitu TYPE, yang menspesifikasi type media internet sebagai “text/css” (memungkinkan browser yang tidak mendukung type ini untuk mengabaikan Style Sheet).
Tag <STYLE> diikuti oleh sejumlah definisi style dan berakhir dengan tag </STYLE>.
<HTML>
<STYLE TYPE="text/css">
<!--
BODY {font: 10pt "Arial"}
H1 {font: 15pt/17pt "Arial";
font-weight: bold;
color: maroon}
H2 {font: 13pt/15pt "Arial";
font-weight: bold;
color: blue}
P {font: 10pt/12pt "Arial";
color: black}
-->
</STYLE>
<BODY>
...
</BODY>
</HTML>
Semoga berguna yaa…
source: ariefokebanget.co.cc
tambahan article english:
CSS, Cascading Style Sheets, are an important component of web design. It has many uses and can help you customize your online presence, including blogs and online documents. Sites can run and look better when CSS is used. So it is no surprise that there are many people eager to learn CSS, and many available learning resources. While CSS can be learned in formal classes at a local school, many prefer to learn on their own. Learning CSS online can be done at any time or place, so it is easier to fit into a busy schedule.
In a review of CSS learning resources’, here are the top 5 places to learn CSS, based on users’ comments and recommendations.
W3 Schools
W3 Schools was mentioned several times as a great place to learn CSS. People like that they have tutorials and quizzes to test your knowledge. Users cited their vast library of information and their references and examples. And because it is maintained by W3C, which is the group that is responsible for today’s web standards, it has current, up to date information.
HTML Dog
Another site mentioned as a top place for learning CSS is HTML Dog. This site has designated its training by skill level, Beginner, Intermediate, and Advanced. This makes it a good learning resource for the novice as well as those with some CSS experience. Users also noted HTML Dog’s easy to follow tutorials, important when learning and developing a new skill.
Site Point
Site Point is recommended as a perfect place for the beginner. They teach CSS starting from the beginning, and move through the steps teaching how to create clean and functional CSS. Many suggest starting at this site to learn CSS.
Tizag
Tizag is another site recommended for beginner users of CSS. It is noted for having tutorials that are real life, and a presentation that is relaxed and comfortable. Users stated that the friendly and relaxed tone made it easer to learn the skill.
Tag By Tag
Users liked Tag By Tag because it is a place to get answers to specific CSS questions. Students can select the area of CSS that they need help in and are taken to a guide sheet that can help fix problems. This site is very handy if users have forgotten elements like attributes or style.
In addition to these five sites there are others that are full of CSS learning resources, such as CSS Help Pile, which includes articles on all kinds of CSS tips and tricks. There are also some very nice informative books, such as CSS: The Missing Manual by David Sawyer McFarland, which covers the basics of CSS, and also complex CSS layouts.
And almost everyone suggested that the best place to learn CSS is on your own computer, learning new skills and developing the ones you already have. Like any other ability, regular and diligent practice is one of the best ways to learn and master CSS.
