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 .
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.
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 .
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
gaya dapat ditentukan :
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 .
Syntax CSS
CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
- Selector adalah HTML element yang ingin dibuat style nya.
- Declaration merupakan isi dari property dan nilai dari CSS.
- Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS ID dan Class
Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya
untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang
paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan
anda untuk menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.
Cara CSS
Tiga Cara untuk Insert CSS :
1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor
teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari
file style sheet dibawah ini :
hr {color:sienna;}p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang antara nilai properti dan satuan!
“margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE,
tapi tidak di Firefox atau Opera.
2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :
<head>
<style type=”text/css”>hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style></head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet
Jika beberapa properti telah ditetapkan untuk pemilih yang sama
dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari
style sheet lebih spesifik.
contoh style sheet eksternal untuk pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.
Beberapa Styles Akan Cascade ke Satu :gaya dapat ditentukan :
- didalam sebuah elemen HTML
- didalam bagian kepala halaman HTML
- didalam sebuahj file CSS eksternal
- Browser default
- Eksternal style sheet
- Internal style sheet (di bagian kepala)
- Inline style (di dalam elemen HTML)
nb: Jika link ke style sheet eksternal ditempatkan setelah
style sheet internal di <head> HTML, style sheet eksternal akan
menimpa style sheet internal!
Tutorial Syntax CSS
CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
Dengan CSS, warna yang paling sering ditentukan oleh:
contoh :
Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari linkuntuk tujuan desain:
contoh :
contoh :
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama dari setiap kata.
contoh :
- Selector adalah HTML element yang ingin dibuat style nya.
- Declaration merupakan isi dari property dan nilai dari CSS.
- Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS Styling Background
Properti CSS Bakground (Latar Belakang) digunakan untuk menentukan efek latar belakan dari suatu elemen.
Properti yang digunakan dalam CSS Background antara lain :
Warna latar berlakang ini didefinisikan dalam pemilih body .
* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:
Properti :
Properti yang digunakan dalam CSS Background antara lain :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background-color
Properti Background-color menetapkan warna latar belakang dari suatu elemen.Warna latar berlakang ini didefinisikan dalam pemilih body .
contoh : body {background-color : #b0c4de ;}Dengan CSS, warna paling sering ditentukan adalah :
* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”
Bakcground-image
Properti Background-image menentukan warna gambar untuk digunakan sebagai latar belakang suatu elemen.Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:
contoh : body {background-image:url(‘paper.gif’) ;}
Background-repeat
Properti Background-repeat ini digunakan untuk mengulangi gambar, baik secara vertikal atau horizontal .Properti :
- repeat
- repeat-x (pengulangan horizontal)
- repeat-y (pengulangan vertikal)
- no-repeat (tanpa pengulangan)
contoh :
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}
Background-attachment
properti Background-attachment digunakan untuk menentukan apakah gambar latar belakang tetap atau scroll dengan sisi halaman .
Properti :
- scroll
- fixed
- inherit
Background-position
Properti Background-position digunakan untuk mengatur posisi awal dari background image
contoh :body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}
CSS Styling Text
CSS Text
Text Color
Properti warna yang digunakan untuk mengatur warna teks.Dengan CSS, warna yang paling sering ditentukan oleh:
- nilai HEX – seperti “# ff0000″
- sebuah nilai RGB – seperti “rgb (255,0,0)”
- nama warna – seperti “merah”
contoh :
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal dari sebuah teks.
Teks dapat terpusat, atau berpihak ke kiri atau kanan, atau dibenarkan.Ketika text-align diatur untuk “membenarkan”, setiap baris ditarik sehingga setiap barismemiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).
Teks dapat terpusat, atau berpihak ke kiri atau kanan, atau dibenarkan.Ketika text-align diatur untuk “membenarkan”, setiap baris ditarik sehingga setiap barismemiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).
contoh :
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
Text Decoration
Properti text-decoration digunakan untuk membuat atau menghapus dekorasi dari teks.Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari linkuntuk tujuan desain:
contoh :
a {text-decoration: none;}Hal ininjuga dapat digunakan untuk menghias text :
contoh :
h1 {text-decoration: overline;}
h2 {text-decoration: line-melalui;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
Text Transformation
Properti teks transform digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks.Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama dari setiap kata.
contoh :
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: memanfaatkan;}
Text Identation
Properti teks lekukan digunakan untuk menentukan indentasi dari baris pertama dari teks.
contoh :
p {text-indent: 50px;}
CSS Styling Fonts
CSS Fonts
CSS properti font menentukan keluarga font, keberanian, ukuran, dan gaya text .
Properti font-keluarga harus terus beberapa nama font sebagai sistem “fallback”. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti font-family : “Times New Roman”
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan-koma :
CSS properti font menentukan keluarga font, keberanian, ukuran, dan gaya text .
Perbedaan Antara Serif dan Sans-serif Font
CSS Font Keluarga
Dalam CSS, ada dua jenis nama keluarga font :- generik keluarga - sebuah kelompok keluarga font dengan tampilan yang sama (seperti “Serif” atau “Monospace”)
- Font keluarga - keluarga font tertentu (seperti “Times New Roman” atau “Arial”)
| Generik keluarga | Font keluarga | Deskripsi |
|---|---|---|
| Serif | Times New Roman Georgia |
Font serif memiliki garis-garis kecil di bagian berakhir pada beberapa karakter |
| Sans-serif | Arial Verdana |
“Sans” berarti tanpa – font-font ini tidak memiliki garis di ujung karakter |
| Monospace | Courier New Lucida Console |
Semua karakter huruf monospace memiliki lebar yang sama |
Font Keluarga
Keluarga font teks yang dibuat dengan properti font-family.Properti font-keluarga harus terus beberapa nama font sebagai sistem “fallback”. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti font-family : “Times New Roman”
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan-koma :
contoh :
Properti ini memiliki tiga nilai:
Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf.
Selalu gunakan tag HTML yang tepat, seperti :
Contoh :
Unit ukuran em direkomendasikan oleh W3C.
1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Ukuran dapat dihitung dari piksel untuk mereka dengan menggunakan rumus ini: piksel / 16 = em
Contoh :
Sayangnya, masih ada masalah dengan IE. Ketika mengubah ukuran teks, menjadi lebih besar dari seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
p{font-family:”Times New Roman”, Times, serif;}
Font Style
Properti font-style banyak digunakan untuk menentukan teks miring.Properti ini memiliki tiga nilai:
- normal – Teks ditampilkan biasanya
- miring – Teks ditampilkan dalam huruf miring
- miring – teks ini “condong” (miring sangat mirip dengan miring, tapi kurang didukung)
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: miring;}
Ukuran Font
Properti font-size set ukuran teks.Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf.
Selalu gunakan tag HTML yang tepat, seperti :
<h1> – <h6> untuk heading dan paragraf <p>Nilai font-size bisa menjadi ukuran absolut, atau relatif .
- Absolute Ukuran : Mengatur teks ke ukuran tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
Ukuran absolut berguna ketika ukuran fisik dari output diketahui - Ukuran Relatif : Mengatur ukuran relatif terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks di browser
Jika Anda tidak menetapkan ukuran font, ukuran standar untuk teks normal, seperti paragraf, adalah 16px (16px = 1em)
Mengatur Ukuran Font dengan Pixel
Mengatur ukuran teks dengan piksel, memberi Anda kontrol penuh atas ukuran teks :Contoh :
h1 {font-size: 40px;}Catatan : contoh di atas memungkinkan Firefox, Chrome, dan Safari untuk mengubah ukuran teks, tapi tidak Internet Explorer.
h2 {font-size: 30px;}
p {font-size: 14px;}
Mengatur Ukuran Font dengan Em
Untuk menghindari masalah ukuran dengan Internet Explorer, banyak pengembang menggunakan em daripada piksel.Unit ukuran em direkomendasikan oleh W3C.
1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Ukuran dapat dihitung dari piksel untuk mereka dengan menggunakan rumus ini: piksel / 16 = em
Contoh :
h1 {font-size: 2.5em;} / * 40px/16 = 2.5em * /Catatan : Dalam contoh di atas, ukuran teks dalam mereka adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran mereka, adalah mungkin untuk menyesuaikan ukuran teks dalam semua browser.
h2 {font-size: 1.875em;} / * 30px/16 = 1.875em * /
p {font-size: 0.875em;} / * 14px/16 = 0.875em * /
Sayangnya, masih ada masalah dengan IE. Ketika mengubah ukuran teks, menjadi lebih besar dari seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em
Solusi yang bekerja di semua browser, adalah untuk mengatur default font-size dalam persen untuk elemen body :
Contoh :
body {font-size: 100%;}h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}
Catatan : Kode Anda sekarang
bekerja besar! Ini menunjukkan ukuran teks yang sama di semua
browser, dan memungkinkan semua browser untuk memperbesar atau mengubah
ukuran teks !
0 komentar:
Posting Komentar