Belajar apa itu CSS dan kode basic
CSS singkatan dari Cascading Style Sheets, adalah alat untuk mengatur tata letak atau design pada website. CSS mengontrol penampilan halaman web atau menyediakan informasi untuk browser bagaimana cara untuk menampilkan suatu halaman web seperti font, garis, margin (garis pinggir), lebar-tinggi halaman dan background. CSS juga mampu mengontrol layout (tata letak) berbagai dokumen dari satu style sheet dan juga mengaplikasi layout tertentu pada berbagai media dan masih banyak lagi. Jika dibandingkan dengan HTML, CSS lebih banyak menawarkan pilihan dan sekarang telah didukung oleh seluruh browser.
Untuk membangun struktur sebuah konten HTML diperlukan, untuk mem-format konten yang telah terstruktur CSS diperlukan. Banyak properti yang digunakan pada CSS mirip dengan yang dipakai di HTML, jadi jika anda sering menggunakan html untuk layout situs anda, anda akan mengenali banyak kode yang sama disini.
Kode CSS terdiri dari 3 bagian yaitu selector, property dan value:
Selector diletakkan terlebih dahulu, diikuti dengan property dan kemudian value. Tiap properti dengan valuenya dipisahkan dengan tanda titik dua dan berakhir dengan semi-kolon. Mereka juga diletakkan dalam braket keriting (curly bracket). Contohnya sebagai berikut:
Selector: Elemen html apa yang di aplikasi di bagian ini
Property: Apa yang akan dirubah pada bagian ini
Value: Nilai pengaturannya.
Jangan meletakkan spasi diantara property value dengan unitnya karena hanya akan berfungsi pada Internet Explorer saja dan bukan pada Firefox maupun Opera.
CSS bisa diaplikasikan dengan 3 cara untuk dokumen HTML :
Jika kode CSS teraplikasi ke dokumen html lebih dari satu tempat, misalkan pada internal style sheet dan juga pada external style sheet, biasanya yang diambil adalah yang dari internal. Dan jika terdapat juga kode CSS yang teraplikasi pada inline style (dalam kode html sebuah elemen) maka yang diambil sebagai prioritas utama adalah yang inline. Jika link CSS external style sheet terletak setelah internal style sheet dalam head tag dokumen html, maka external style sheet lah yang akan diprioritaskan.
Cara yang akan kita bahas disini adalah cara yang paling diminati dan yang paling banyak digunakan, yaitu yang ketiga dari 3 cara diatas (External Style Sheet). Untuk memahami bagaimana cara CSS bekerja, anda bisa copy 2 kode dibawah ini dan paste di notepad masing-masing. Yang satu anda simpan dengan nama �halamanku.htm� dan yang satunya lagi dengan nama �style.css�. Simpan kedua file tersebut di direktori atau folder yang sama.
Setelah itu buka file �halamanku.htm� nya dengan double klik file tersebut dan anda akan melihat bahwa design file tersebut telah dipengaruhi oleh file CSS. Anda bisa mengubah settingan pada file CSS untuk mengubah tampilan file HTML dan file dokumen HTML lainnya yang terhubung ke CSS tersebut.
Kode CSS umum lainnya:
Property dan Value:
Warna dan background
color:green; - (pilih warna)
background-color:#ff0000; - (pilih warna background)
background-image:url("mypic.gif"); - (gambar background)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (model gambar background)
Background-attachment:scroll/ fixed - (menyetel gambar tetap atau bisa discroll atas-bawah)
background-position:2cm 2cm/ 50% 25%/ top right - (posisi image background)
Font
font-family:"Times New Roman", serif; - (jenis font apa yang hendak digunakan, koma digunakan untuk memisahkan antara pilihan utama dan pilihan alternatif,artinya jika Times New Roman tidak bisa ditampilkan pada browser maka Serif yang akan dipilih. Koma juga digunakan untuk memisahkan beberapa selector). Pada layar komputer jenis teks Sans-serif dianggap lebih mudah dibaca dibandingkan dengan Serif. Jika font yang dipilih terdapat beberapa kata, berikan tanda kutip, seperti: �Times New Roman�.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (ukuran font). Jika ukuran font tidak disetting, maka font tersebut akan otomatis menjadi 16px atau 1em (16px=1em), itu adalah default sizenya.
Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (garis bawah/ garis atas dan garis tengah pada teks)
letter-spacing:6px; - (spasi antar huruf)
text-transform:uppercase;/ lowercase;/ none; - (huruf besar atau kecil)
list-style-type:circle;/ square;/ upper-roman; - (tanda urutan daftar)
p:first-letter{color:#ff0000;font-size:xx-large;} � (merubah huruf pertama pada paragraf)
p:first-line {color:#0000ff;font-variant:small-caps;} �(merubah barisan pertama pada paragraf)
Margin, Padding, Border
margin-top/ right/ bottom/ left:100px; - (posisi margin)
or margin:100px 40px 10px 70px; - (putaran jam � atas, kanan, bawah, kiri)
padding:20px 20px 20px 80px; - (padding= spasi antara border dan konten)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (membuat style berbeda pada tiap border dari atas-kanan-bawah-kiri/ arah putaran-jam)
border-top/ left/ bottom-color:red; - (menambah warna pada satu border)
border-bottom/ top/ right-style:solid; -(membuat style pada satu border)
border-top/ left/ bottom-width:thick; -(menyetel ukuran border)
outline:green dotted thick; - (membuat garis mengelilingi elemen diluar border).
outline-color:#00ff00;/ style:dotted;/ width:5px;
position:absolute;/ relative; top:150px; left:500px; - (meletakkan elemen secara posisi absolute atau relative)
z-index:1;/2;/3; etc. - (untuk membuat elemen menjadi layer (lapisan) dan value dari property nya bisa digunakan sebagai urutan elemen mana yang akan menimpa dan yang akan ditimpa)
visibility:hidden � (menyembunyikan elemen tanpa menghilangkan ruang yang ditempatkannya)
display:none � (menyembunyikan elemen termasuk ruang yang ditempatkannya)
max-height:/min-height:/max-width:/min-width:100px; - (mengatur tinggi dan lebar maximum/ minimum sebuah elemen)
display:inline � (mengganti block element menjadi inline)
display:block � (mengganti inline elemen menjadi block element)
Selectors:
Link
a:visited - (link yang telah terkunjungi)
a:active - (link pada saat diklik)
a:hover - (ketika cursor diletakkan diatas link)
Class, Id and Div
class="....." - (untuk aplikasi style pada sebuah elemen atau group elemen)
id="....." - (untuk aplikasi style pada satu elemen unik, dua elemen tidak bisa menyandang id yang sama)
span class="....." - (untuk memberi efek visual pada bagian terpilih sebuah teks)
div id="....." - (untuk men-group satu atau lebih block-level elemen)
Comment
/*letakkan komentar anda disini*/ - (anda bisa meletakkan komentar atau catatan diatas kode CSS untuk menjelaskan perintah kode tersebut, comment dihiraukan oleh browser)
Untuk membangun struktur sebuah konten HTML diperlukan, untuk mem-format konten yang telah terstruktur CSS diperlukan. Banyak properti yang digunakan pada CSS mirip dengan yang dipakai di HTML, jadi jika anda sering menggunakan html untuk layout situs anda, anda akan mengenali banyak kode yang sama disini.
Kode CSS terdiri dari 3 bagian yaitu selector, property dan value:
Selector {property: value;}
Selector diletakkan terlebih dahulu, diikuti dengan property dan kemudian value. Tiap properti dengan valuenya dipisahkan dengan tanda titik dua dan berakhir dengan semi-kolon. Mereka juga diletakkan dalam braket keriting (curly bracket). Contohnya sebagai berikut:
Body {background-color:red;}
Selector: Elemen html apa yang di aplikasi di bagian ini
Property: Apa yang akan dirubah pada bagian ini
Value: Nilai pengaturannya.
Jangan meletakkan spasi diantara property value dengan unitnya karena hanya akan berfungsi pada Internet Explorer saja dan bukan pada Firefox maupun Opera.
CSS bisa diaplikasikan dengan 3 cara untuk dokumen HTML :
- Dengan cara menggunakan attribute style HTML (inline) � contoh:
<body style="background-color: yellow;">
- Dengan cara menyelipkan kode CSS nya diantara style tag (<style>) � contoh:
<html>
<head>
<title>Contoh</title>
<style type="text/css">
body {background-color: yellow;}
</style>
</head>
- Dengan cara menyelipkan kode CSS di file terpisah (external style sheet) dan terlink pada dokumen HTML. Link yang menghubungkan itu bisa dibuat dengan meletakkan barisan kode HTML dibawah ini yang diletakkan diantara head tag pembuka dan penutup pada dokumen HTML.
<link rel="stylesheet" type="text/css" href="nama-folder/nama-file.css" />
Jika kode CSS teraplikasi ke dokumen html lebih dari satu tempat, misalkan pada internal style sheet dan juga pada external style sheet, biasanya yang diambil adalah yang dari internal. Dan jika terdapat juga kode CSS yang teraplikasi pada inline style (dalam kode html sebuah elemen) maka yang diambil sebagai prioritas utama adalah yang inline. Jika link CSS external style sheet terletak setelah internal style sheet dalam head tag dokumen html, maka external style sheet lah yang akan diprioritaskan.
Cara yang akan kita bahas disini adalah cara yang paling diminati dan yang paling banyak digunakan, yaitu yang ketiga dari 3 cara diatas (External Style Sheet). Untuk memahami bagaimana cara CSS bekerja, anda bisa copy 2 kode dibawah ini dan paste di notepad masing-masing. Yang satu anda simpan dengan nama �halamanku.htm� dan yang satunya lagi dengan nama �style.css�. Simpan kedua file tersebut di direktori atau folder yang sama.
| Simpan ini dengan nama "halamanku.htm": | Simpan ini dengan nama "style.css": |
| <html> <head> <title>Halamanku</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Halo, Nama Aku Edy Bright</h1> </body> </html> | body {background-color: red; } |
Setelah itu buka file �halamanku.htm� nya dengan double klik file tersebut dan anda akan melihat bahwa design file tersebut telah dipengaruhi oleh file CSS. Anda bisa mengubah settingan pada file CSS untuk mengubah tampilan file HTML dan file dokumen HTML lainnya yang terhubung ke CSS tersebut.
Kode CSS umum lainnya:
Property dan Value:
Warna dan background
color:green; - (pilih warna)
background-color:#ff0000; - (pilih warna background)
background-image:url("mypic.gif"); - (gambar background)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (model gambar background)
Background-attachment:scroll/ fixed - (menyetel gambar tetap atau bisa discroll atas-bawah)
background-position:2cm 2cm/ 50% 25%/ top right - (posisi image background)
Font
font-family:"Times New Roman", serif; - (jenis font apa yang hendak digunakan, koma digunakan untuk memisahkan antara pilihan utama dan pilihan alternatif,artinya jika Times New Roman tidak bisa ditampilkan pada browser maka Serif yang akan dipilih. Koma juga digunakan untuk memisahkan beberapa selector). Pada layar komputer jenis teks Sans-serif dianggap lebih mudah dibaca dibandingkan dengan Serif. Jika font yang dipilih terdapat beberapa kata, berikan tanda kutip, seperti: �Times New Roman�.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (ukuran font). Jika ukuran font tidak disetting, maka font tersebut akan otomatis menjadi 16px atau 1em (16px=1em), itu adalah default sizenya.
Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (garis bawah/ garis atas dan garis tengah pada teks)
letter-spacing:6px; - (spasi antar huruf)
text-transform:uppercase;/ lowercase;/ none; - (huruf besar atau kecil)
list-style-type:circle;/ square;/ upper-roman; - (tanda urutan daftar)
p:first-letter{color:#ff0000;font-size:xx-large;} � (merubah huruf pertama pada paragraf)
p:first-line {color:#0000ff;font-variant:small-caps;} �(merubah barisan pertama pada paragraf)
Margin, Padding, Border
margin-top/ right/ bottom/ left:100px; - (posisi margin)
or margin:100px 40px 10px 70px; - (putaran jam � atas, kanan, bawah, kiri)
padding:20px 20px 20px 80px; - (padding= spasi antara border dan konten)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (membuat style berbeda pada tiap border dari atas-kanan-bawah-kiri/ arah putaran-jam)
border-top/ left/ bottom-color:red; - (menambah warna pada satu border)
border-bottom/ top/ right-style:solid; -(membuat style pada satu border)
border-top/ left/ bottom-width:thick; -(menyetel ukuran border)
outline:green dotted thick; - (membuat garis mengelilingi elemen diluar border).
outline-color:#00ff00;/ style:dotted;/ width:5px;
position:absolute;/ relative; top:150px; left:500px; - (meletakkan elemen secara posisi absolute atau relative)
z-index:1;/2;/3; etc. - (untuk membuat elemen menjadi layer (lapisan) dan value dari property nya bisa digunakan sebagai urutan elemen mana yang akan menimpa dan yang akan ditimpa)
visibility:hidden � (menyembunyikan elemen tanpa menghilangkan ruang yang ditempatkannya)
display:none � (menyembunyikan elemen termasuk ruang yang ditempatkannya)
max-height:/min-height:/max-width:/min-width:100px; - (mengatur tinggi dan lebar maximum/ minimum sebuah elemen)
display:inline � (mengganti block element menjadi inline)
display:block � (mengganti inline elemen menjadi block element)
Selectors:
Link
a:visited - (link yang telah terkunjungi)
a:active - (link pada saat diklik)
a:hover - (ketika cursor diletakkan diatas link)
Class, Id and Div
class="....." - (untuk aplikasi style pada sebuah elemen atau group elemen)
id="....." - (untuk aplikasi style pada satu elemen unik, dua elemen tidak bisa menyandang id yang sama)
span class="....." - (untuk memberi efek visual pada bagian terpilih sebuah teks)
div id="....." - (untuk men-group satu atau lebih block-level elemen)
Comment
/*letakkan komentar anda disini*/ - (anda bisa meletakkan komentar atau catatan diatas kode CSS untuk menjelaskan perintah kode tersebut, comment dihiraukan oleh browser)
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.