- Pengertian CSS Dasar
Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih
dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah
bahasa pemrograman yang fungsinya untuk menstrukturkan
komponen-komponen web yang beragam sesuai dengan keinginan kita .
Cascading Style Sheet (CSS) merupakan aturan untuk
mengendalikan 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 stylelainnya 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.
mengendalikan 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 stylelainnya 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.
Soal gaya Masalah Besar
HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.
HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen, seperti:
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
Ketika tag seperti <font>, dan atribut warna ditambahkan dengan
spesifikasi HTML 3.2 , mulai mimpi buruk bagi pengembang web.
Pengembangan situs web yang besar , dimana informasi font dan warna yang
ditambahkan ke setiap halaman menjadi proses yang panjang dan mahal.
- CSS Menyimpan Banyak Kerja .
CSS mendefinisikan cara elemen HTML yang akan ditampilkan. Gaya biasanya disimpan dalam file css eksternal . Style sheet eksternal
memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman
dalam sebuah situs web hanya dengan mengedit satu file tunggal .
- Belajar CSS Untuk Pemula
CSS adalah singkatan dari Cascading Style Sheet yang berarti kumpulan kode-kode yang berurutan & saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Maka dari itu saya sarankan anda Belajar HTML Dasar dulu sebelum Belajar CSS.
CSS berfungsi mengatur beberapa gaya / style elemen-elemen HTML seperti
mengganti jenis font, ukuran font, perataan dalam dokumen, &sebagainya. Penggunaan CSS lebih dianjurkan daripada menggantikan jenis font & sebagainya
dengan menggunakan atribut HTML. CSS lebih mudah terapkan karena untuk
merubah banyak elemen HTML dengan style yang sama hanya dengan
membuatkan satu style, beda dengan HTML yang diharuskan merubah setiap
atributnya. Bagi yang ingin mempelajari CSS, anda bisa membaca tulisan
tutorial CSS yang saya kumpulkan dibawah ini.
- Cascading Style Sheet (CSS)
.. CSS dapat mengendalikan ukuran gambar, warna body 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 dokument. Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang berbeda .
.. Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun
tampilan yang dihasilkan syntaks – syntaks dari CSS lama masih belum
menarik bagi para end-user atau pengunjung. Syntaks css secara umum
dapat ditulis sebagai berikut :
<html>
<head>
<style type=”text/css”>
…isi css…
</style>
…isi halaman…
</body>
</html>
<html>
<head>
<style type=”text/css”>
…isi css…
</style>
…isi halaman…
</body>
</html>
. atau dpat langsung menuliskan style pada tag html-nya :
<img src =”../images/contoh.gif” align=”…” Padding,Border,Margin….
>
- Contoh Css :
height: 35px; width: 100px; border: 1px solid #ff0000;
background: #ff0000; background: -moz-linear-gradient( center top, white
20%, #ff0000 100% ); background: -webkit-gradient( linear, left top,
left bottom, color-stop(.2, white), color-stop(1, #ff0000) )
;
;
Apabila suatu style dari css akan dipergunakan untuk beberapa
halaman, akan lebih tepat mendeklarasikan css tersebut ke dalam suatu
file css terpisah dan baru dipanggil pada suatu halaman. Contoh yang
paling sederhana adalah sebagai berikut:
Contoh kerangka kode berikut akan disimpan pada file.css
html {…}
body {…}
a {…}
.b {…}
.c {…}
#tujuan{…}
#header h1 a:visited{…}
a.page-numbers:hover {…}
div.content-bottom{…}
table th {…}
fieldset {…}
legend {…}
form {…}
p{…}
h1 {…}
div#nama li{…}
textarea {…}
input[type=”…”] {…}
select {…}
label{…}
pre {…}
code {…}
blockquote {…}
ul {…}
li {…}
body {…}
a {…}
.b {…}
.c {…}
#tujuan{…}
#header h1 a:visited{…}
a.page-numbers:hover {…}
div.content-bottom{…}
table th {…}
fieldset {…}
legend {…}
form {…}
p{…}
h1 {…}
div#nama li{…}
textarea {…}
input[type=”…”] {…}
select {…}
label{…}
pre {…}
code {…}
blockquote {…}
ul {…}
li {…}
Untuk memanggilnya dengan menambahkan kode html seperti berikut
<link rel=”stylesheet” type=”text/css” href=”contoh.css” /> atau
dapat juga dengan <style src=”contoh.css” type=”text/css”
media=”screen” />. Pada pemanggilan fungsi dari css terdapat 2
penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula.
Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat
menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat
digunakan dengan cara sebagai berikut:
<p></p> dan untuk penulisan id adalah <div
id=”header”> </div> atau lebih jelas lagi seperti pada
penggunaan link <a href=”#tujuan “/>. Jadi secara logika kita
tidak dapat menggunakan class pada penggunaan link seperti contoh di
atas. Atribut dari css pada dasarnya ada banyak sekali walaupun
jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara
lain;
- Background
- Border
- Classification
- Dimension
- Font
- Generated Content
- List and Marker
- Margin
- Outlines
- Padding
- Positioning
- Table
- Text
Sedangkan untuk CSS3 akan ada lebih banyak lagi tambahan
atribut dari CSS dasar sehingga akan lebih mudah dipelajari dari kasus –
kasus tertentu yang akan diberikan pada topik pembahasan studi kasus
tentunya masih di Tutorial Pembelajaran.