SINTAK CSS
CSS (Cascading Style Sheet)
1.
Pengertian CSS
CSS (cascanding
Style sheet) adalah bahasa yang di gunakan untuk mengatur tampilan di dokumen
yang di tulis dalam bahasa markup/language atau bisa di sebut pula CSS meupakan
bahasa yang di gunakan untuk mengatur tampilan / desain suatu halaman HTML.
2.
Dasar CSS
1.
Selector
Sebagai bahasa
yang di gunakan untuk memberikan gaya tampilan
Contoh dari
selector
P {
.......
}
Keterangan
P = Selector :
sebuah selector merupakan seluruh kode yang berada sebelum “{}”
Selector di
atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen.
Selain memberikan desain pada seluruh elemen, selector juga dapat memberikan
desain secara lebih spesifik, melalui klasifikasi, identitas, ataupun berbagi
atribut lainnya dari sebuah elemen.
2.
Property
Property
menentukan berbagai parameter desain yang dapat di ubah dari sebuah elemen yang
di pilih dai sebuah selector contoh kode
P {
Color : ...:
Font-size : .....;
}
Property berada
sebelum titik dua (“ : ”), kegunaanya yaitu untuk mengubah warna pada elemen
“p”, dan font-size untuk mengubah ukuran teks.
3.
Value
Value adalah
nilai dari property yang ingin kita berikan. Nilai yang dapat di berikan
tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai
warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa
merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti
Photoshop). Contoh kode
P {
Color : #FFFF00;
Font-size : 30px; }
3.
Text CSS
1.
Warna
huruf
Property color di gunakan untuk mengatur warna huruf. Pada CSS,
penentuan warna yang paling sering di gunakan
1.
Menggunakan
nilai HEX seperti : “#ff0000”
2.
Menggunakan
nilai RGB seperti : “rgb(255,0,0)”
3.
Menggunakan
nama warna seperti : “red”
|
|
Sintak
|
Keterangan
|
|
Warna huruf
|
Body
{
color
: blue;
}
h1
{
color
: #00ff00;
}
h2 {
color
: rgb(255,0,0);
}
|
Sintak di samping mendefinisikan warna default untuk satu halaman
dengan menggunakan selector body,warna tersebut tergantung warna yang di
inginkan apakah warna biru,merah,kuning,dsb.
|
|
Text Alignment
|
h1
{
text-align:
center;
}
p.date
{
text-align:right;
}
p.main
{
text-align:
justify;
}
|
Sintak di samping menjelaskan property text-align untuk mengatur
horizontal alignment dari teks. Teks dapat di tengah, di kanan, atau di kiri,
jika text-align di atur ke justify maka masing-masing baris menjadi rata kiri
dan rata kanan.
|
|
Text decoration
|
a
{
text-decoration
: none;
}
|
Property text-decoration ini di gunakan untuk menghilangkan
dekorasi dari teks, text-decoration pada umumnya di gunakan untuk
menghilangakan garis bawah dari link untuk tujuan design
|
|
|
h1
{
text-decoration
: overline;
}
h2
{
text-decoration
: line-trough;
}
h3
{
text-decoratio
: underline
|
Sintak di samping menjelaskan bahwa text-decoration bisa juga di
gunakana untuk mendekorasi sebuah teks. Tapi tidak di sarankan untuk memuat
garis bawah pada teks yang bukan link karana hal ini sering membingungkan
bagi para pengguna.
|
|
Text tranformation
|
p.uppercase
{
text-transform
: uppercase;
}
p.lowercase
: lowercase;
}
p.capitalize
{
text-transform
: capitalize;
}
|
Sintak di samping menjelaskan Property text-transform di gunakan
untuk menentukan huruf kapital dan huruf kecil pada teks, dan bisa juga di
gunakan untuk membuat huruf kapital pada huruf pertama dari masing-masing kata,
Uppercase : untuk membuat huruf kapital untuk seluruh kata,
lowercase : untuk membuat seluruh kata atau huruf menjadi huruf kecil,
sedangkan capitalize di gunakan untuk membuat huruf awal dari setiap kata
menjadi huruf kapital.
|
|
Text indentation
|
p
{
text-indent:
50px;
}
|
Property text-indent di gunakan untuk menentukan identation dari
baris pertama paragraph, dengan text indent
|
|
h1
{
Letter-spacing
: 3px;
}
h2
{
Letter-spacing
: -3px;
}
|
Sintak ini menunjukan bagaimana menambahkan atau mengurangi spasi
antar karakter.
|
|
|
p.small
{
line-heght:
70%;
}
p.big
{
line-height:
200%
}
|
Sintak ini menjelaskan bagaimana mengatur sebuah spasi antar
baris dalam sebuah paragraph.
|
|
|
div.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
|
Sintak ini menunjukkan bagaimana merubah arah text dari sebuah
elemen.
|
|
|
P
{
Word-spacing
: 30px;
}
|
Sintak ini menunjukkan bagaimana menambahkan spasi antara kata
dalam sebuah paragraph.
|
|
|
P
{
White-space:
nowrap;
}
|
Sintak ini menunjukkan bagaimana menonaktifkan pembungkus teks
dalam sebuah elemen.
|
|
|
Img.top
{
Vertical-align
: text-top;
}
Img.bottom
{
Vertical-align:
text-bottom;
}
|
Sintak ini menunjukkan bagaimana mengatur vertikal align dari
gambar dalam sebuah teks.
|
|
|
h1
{
text-shadow
: 2px 2px #ff0000;
}
|
Sintak di samping menunjukkan text bayangan.
|
4.
Semua property text CSS
|
Property
|
Keterangan
|
|
Text-align
|
Menentukan horizontal alignment dari teks.
|
|
Text-decoration
|
Menentukandekorasi di tambahkan ke teks
|
|
Text-shadow
|
Menentukan efek bayangan di tambahkan ke teks
|
|
Text-transform
|
Mengontrol kapasitas teks
|
|
Unicode-bidi
|
Di gunakan bersama2 dengan property direction untuk mengatur atau
kembali apakah teks harus di ganti untuk mendukung beberapa bahasa dalam
dokumen yang sama.
|
|
Vertical-align
|
Mengatur vertical aligment dari sebuah elemen
|
|
White-space
|
Menentukan bagaimana ruang spasi di dalam elemen yang di tangani
|
|
Word-spacing
|
Meningkatkan atau menurunkan ruang spasi antara kata dalam teks
|
5.
Font CSS
|
Property
|
keterangan
|
|
font
|
Mengatur semua property font dalam satu deklarasi
|
|
Font-family
|
Mengatur font-family untuk teks
|
|
Font-size
|
Mengatur ukuran font dalam teks
|
|
Font-style
|
Mengatur font stylr untuk teks
|
|
Font-variant
|
Menentukan apakah teks harus di tampilkan dalam font small-caps
|
|
Font-weight
|
Menentukan weight dari font
|
|
Font
|
Sintak
|
Keterangan
|
|
Font family
|
P
{
Font-family:”times
new roman”, times serif;
}
|
Sintak di samping menjelaskan property font family harus
memasukkan beberpa nama font, jika browser tidak mendukung font yang pertama,
maka mencoba font berikutnya, mulailah dengan font yang anda inginkan , dan
dengan generic family, agar browser memilih font yang sama dalam generic
family, jika idak ada font lain yang tersedia . jika nama font family lebih
dari satu kata, maka beri tanda petik dua
|
|
Font style
|
|
Sintak di samping menjelaskan property font-stlye umumnya di
gunakan untuk menetapkan teks italic, property ini memiliki 3 nilai yaitu,
normal (teks di tampilkan normal), italic(teks di tampilkan miring),
oblique(teks miring,oblique sangat mirip dengan italic)
|
|
Font size dengan pixel
|
|
Mengatur ukuran teks dengan pixel memberikan anda kontrol penuh
terhadap ukuran teks.
|
|
Font size dengan Em
|
|
Untuk memungkinkan penguna untuk mengubah ukuran teks (dalam menu
browser), banyak pengembang menggunakan Em bukan pixel, ukuran em di
rekomendasikan oleh W3C, 1em = ukuran font saat ini. Ukuran teks default di
browser adalah 16pxx, jadi ukuran default 1em adalah 16px. Sintak di samping
di gunakn untuk menghitung pixel ke em dengan rumus pixel/16=em.
|
|
Sintak di samping adalah contoh yang menunjukkan bagaimana
mengatur boldness dari font.
|
|
|
Sintak di samping adalah contoh yang menunjukkan bagaimana
mengatur variant dari font.
|
|
|
Sintak di samping adalah contoh yang menunjukkan bagaimana
menggunakan property singkat untuk mengatur semua property font dalam satu
dekralasi.
|
6.
Link CSS
Link dapat di
beri style dengan beberap property CSS (misalnya
color,font-family,background,dan lain2).
Contoh
a {
color
: #ff0000;
}
link style yang
umum
|
Text decoration
|
|
Sintak di samping menjelaskan tentang property text-decoration
biasanya di gunakan untuk menghilangkan garis bawah dari link
|
|
Background color
|
|
Sintak di samping menjelaskan tentang property background color
menetapkan warna beckground untuk link dengan menggunakan kode warna.
|
|
|
|
Sintak di samping adalah contoh ini menunjukkan bagaimana
menambahkan style untuk hyperlink
|
|
Sintak di samping adalah contoh yang mengkombinasikan beberapa
property CSS untuk menampilkan link inbox
|
7.
List CSS
Property list
CSS mengijinkan kamu untuk :
Mengatur tanda
yang berbeda pada list item dalam ordered list
Mengatur tanda
yang berbeda pada list item dalam unordered lisit
Mengatur tanda
list item dengan image
|
ul {
list-style-image: url('sqpurple.gif');
}
|
Sintak di smaping tidak tampil sama di semua browser. IE and
opera akan menampilkan tanda image sedikit lebih tinggi dari pada
firefox,crome,dan safari
|
|
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
|
Jika sintak di atas menjelaskan tidak dapat tampil di semua
browser, maka sintak di samping menjelaskan atau menampilkan tanda image sama
di semua browser.
Untuk <ul> mengatur
property list-style-type dengan nilai none untuk menhilangkan tanda list item
dan untuk mengatur padding dan margin dengan nilai 0px (agar sesuai dengan
semua browser)
Untuk semua <li> di dalam <ul> mengatur url dari
image, dan menampilkanya hanya sekali atau tidak di ulang (no repeat), untuk
meletakkan posisi image dimana yang diinginkan (kiri 0px dan nilai vertikal :
center), dan juga meletakkan posisi teks dalam list dengan padding-left.
|
|
ul {
list-style: square inside url("sqpurple.gif");
}
|
Sintak di samping menjelaskan tentang Property
list-style adalah menyingkat property. Ini digunakan untuk mengatur semua
property list dalam satu deklarasi
Bila
menyingkat property, urutan nilai untuk property adalah :
Jika
salah satu dari nilai property di atas tidak digunakan, maka nilai default
untuk property yang tidak digunakan akan dimasukkan, jika ada.
|
|
Contoh sintak di samping menunjukkan tanda list item yang berbeda
di css.
|
1.
Mematikan
float -menggunakan clear
|
Contoh sintak di samping menjelaskan elemen setelah elemen
mengambang akan mengalir di sekitarnya, untuk menhindari ini gunakan property
clear, property ini menetakan yang mana dari elemen lain yang tidak di
ijinkan mengambang, menembah baris baru ke dalam image gallery.
|
|
Sintak di samping menjelaskan tentang membuat image mengambang
kekanan dalam paragraph, tambahkan border dan argin untuk image.
|
|
Membuat huruf pertama dari paragraph mengambang ke kiri.
|
|
Sintak di samping menjelaskan gunakan float pada list dari
hyperlink untuk membuat menu horizontal
|
|
Pakai float untuk membuat hompage dengan header,
footer,leftcontent dan main content.
|
2. Center Align Menggunakan Property Margin
|
center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
|
Sintak disamping menjelaskan tentang
mengatur margin left and right ke auto menetapkan bahwa mereka harus membgi
margin yang tersedia sama,hasilnya elemen menjadi berada di tengah, center
align tidak akan berpengaruh jika lebar adalah 100%.
|
|
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
|
Sintak di samping menjelaskan Bila meng-
align elemen, adalah ide yang bagus untuk mendefinisikan ulang margin dan
padding pada elemen <body>. Ini untuk menghindari tampilan visual yang
berbeda di browser yang berbeda. Ada masalah dengan IE8 dan sebelumnya, bila
menggunakan property position. jika isi elemen (pada kasus <div class="container">)
menetapkan lebar, dan deklarasi <!DOCTYPE html> tidak ada, maka IE8 dan
versi sebelumnya akan menambahkan 17px margin di sisi kanan. ini tampaknya
ruang yang disisakan untuk scrollbar. Selalu deklarasikan <!DOCTYPE
html> bila menggunakan property position
|
|
right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
|
Sintak di samping menjelaskan tentang
salah satu metode dari elemen align adalah menggunakan property float.
|
|
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
|
Sintak di samping menjelaskan Bila meng-
align elemen, adalah ide yang bagus untuk mendefinisikan ulang margin dan
padding pada elemen <body>. Ini untuk menghindari tampilan visual yang
berbeda di browser yang berbeda. Ada masalah dengan IE8 dan sebelumnya, bila
menggunakan property float. jika isi elemen (pada kasus <div
class="container">) menetapkan lebar, dan deklarasi <!DOCTYPE
html> tidak ada, maka IE8 dan versi sebelumnya akan menambahkan 17px
margin di sisi kanan. ini tampaknya ruang yang disisakan untuk scrollbar.
Selalu deklarasikan <!DOCTYPE html> bila menggunakan property float
|
3. Combinator Css
|
div p {
background-color: yellow;
}
|
Contoh di samping adalah memilih semua
elemen <p> di dalam elemen <div>
|
|
div > p {
background-color: yellow;
}
|
Contoh berikut untuk memilih semua
elemen <p> langsung darielemen <div>
|
|
div + p {
background-color: yellow;
}
|
Contoh sintak berikut memilih semua
elemen <p> yang di tempatkan setelah elemen <div>
|
|
div ~ p {
background-color: yellow;
}
|
Contoh sintak di samping untuk memilih
semua elemen <p> saudara dari elemen <div>
|
4.
Pseudo
Class CSS
|
selector:pseudo-class
{
property:value;
}
|
Sintak dari pseudo classes
|
|
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
|
Sintak di samping menjelaskan tentang a:hover harus setelah
a:link dan a:visited dalam urutan mendefinisikanya di CSS agar efektif ,
a:active harus setelah a:hover dalam urutan mendefinisikan di CSS agar
efektif, nama pseudo-class tidak case-sensitive.
|
|
a.highlight:hover {
color: #ff0000;
}
|
Contoh di samping menjelaskan tentang pseudo-class bisa di
kombinasikan dengan CSS class
|
|
p:first-child {
color: blue;
}
|
Contoh sintak di samping menjelskan selector mencocokkan setiap
elemen <p> dari setiap elemen.
|
|
p i:first-child {
color: blue;
}
|
Contoh sintak di samping selector mencocokkan elemen pertama
<i> pada semua elemen <p>.
|
|
q:lang(no) {
quotes: "~" "~";
}
|
Sintak di samping menjelaskan :lang pseudo-class mengijinkan anda
untuk mendefinisikan aturan khusus untuk bahasa yang berbeda.
|
Comments
Post a Comment