cascading style sheet baru
DESCRIPTION
sheet styleTRANSCRIPT
Cascading Style Sheet
Cascading Style Sheet
Cascading Style Sheet
Apa itu CSS ?
Style sheets memungkinkan isi suatu halaman web dipisahkan dari presentasinya, dimana isi yang sama dapat di layout untuk platform yang beda dengan mengubah css-nya. Selain itu Style Sheet dapat mengontrol seluruh layout dari site anda, dan jika anda mengubah tampilan dari web site anda cukup dengan memodifikasi style sheet.
Aturan dalam CSS !!! Elemen style yang didefinisikan di awal akan sitimpah oleh elemen style yang didefinisikan berikutnya. Style default dari browser memiliki prioritas terendah dalam urutan cascading, diikuti oleh external style sheet dan kemudian elemen style pada . Sedangkan Inline styles memiliki prioritas tertinggi.Bagaimana Membuat CSS ?
Meletakkan informasi style (CSS) dalam kode HTML, semudah anda mengatur tag pada HTML. Untuk meletakkan infromasi style (CSS), dapat di definisikan dalam 3 cara yaitu :
1. Inline Styles
Mengetikkan langsung style dalam tag HTML-nya
Berlaku pada tag dimana style tersebut di tuliskan.
Inline.html
Coba Inline Styles.
2. Embedded Styles
Mendefinisikan nama style terlebih dahulu lewat tag style
Definisi style diletakkan di tag
Berlaku pada halaman/page dimana style itu didefinisikan
Embedded.html
Contoh Embedded Styles
h1 { font-size: 16pt; font-weight:bold;}p {color:blue;}
Coba Embedded Styleparagraph yang menggunakan style embedded css
3. Linked Styles / External Styles
Mendefinisikan style ke dalam HTML dengan menyimpan informasi style kedalam sebuah file, yang berekstensi file.css Untuk mereferensikan file.css ke dalam HTML pages, maka dapat dilakukan link dengan menambahkan property dengan atribut rel = stylesheet, type = text/css dan href = namafile.csss. Tag diletakkan dalam tag Style.css
h1 {
font-size: 16pt;
font-weight:bold;
}
p {
color:blue;
}Linked.html
Hello World !Hello Juga
Bagaimana Cara Definisi Style ?
Format penulisan untuk definisi style sbb :
selector { property1:value1; property2:value2; ..} Dalam CSS dikenal istilah selector. Selector merupakan spesifikasi elemen yang digunakan Web Browser, sehingga aturan style tersebut dapat diterapkan.
Ada beberapa cara / aturan dalam penulisan dan pendefinisian style :1. Groupingh1, h2, h3, h4, h5 {
color : red;
font-weight:bold;
}
2. Universal Selector Selector tidak didefinisikan secara spesifik, sehingga berlaku untuk semua tag
Universal.html
* { color: Green;
}
Hello h1World
3. Descendant Selector
Descendant.html
em {color:green}
p em {color:blue}
p span em {color:red}
Contextual selectors are very selective.This example shows how to target a specific tag using the document hierarchy.Tags only need to be descendants in the order stated in the selector; other tags can be in between and the selector still works.
4. Child Selector
Child.html
h1 em {
color: Blue;
}
h1 > em {
color: Green;
}
Teks warna hijau ! Teks tidak hijau tapi biru !
Teks biasa
5. ID & Class Selector
ID diawali dengan tanda # kemudian nama id Nama id harus unik
ID_Class.html
Class & ID
#top {
background-color: #ccc;
padding: 1em;
text-align:center;
}
.intro {
color: red;
font-weight: bold;
margin: 0;
padding: 0;
}
Tempe Penyet Spesial
(Masakan Jawa Timur)
Dimakan dengan menggunakan lalapan
Bahan-bahan :
6. Anchor Link Pseudo-Classes
Anchor.html
a:link {text-decoration:none;color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none; color:Red;}
a:active {color:navy;}
p:hover {width:400; background-color: lime;}
Ke halaman Home PageHello World
7. Useful Pseudo-Classes
Pseudo1.html
div.weather strong:first-child {
color:red;
}
It's very hot and incredibly humid.
8. Pseudo Elements
Pseudo2.html
p:first-letter {font-size:300%; float:left;}
p:first-line{font-variant:small-caps;}
CSS pertama dikembangkan berpusat pada formating dokumen HTML, yaitu dengan spesifikasi CSS1. Browser Netscape 4x keatas dan IE 4x ke atas sudah mendukung CSS1
9. Inherited Styles
body {
font-family: verdana, helvetica, sans-serif; color:blue
}
Style diatas akan berlaku untuk semua tag yang berada pada tag body.
Akan di-override jika user menggunakan defined style pada tag didalam tag body
Positioning Elements
Dalam CSS ada 3 konsep dasar yang harus dimengerti, yaitu : positioning, box model, floating. Konsep tersebut akan digunakan untuk mengatur tampilan halaman web.
Box Model
Box Model menjelaskan bagaimana element akan ditampilkan dan bagaimana elemen berinteraksi dengan lainnya. Setiap Box Model memiliki content area serta 3 area : margin, padding, border. Margin, padding, dan border dibagi dalam 4 bagian : top, left, right, bottom.
Margin Collapsing
Jika ada 2 atau lebih vertical mrgin bertemuu akan digabung menjadi 1 margin saja Tinggi margin sama dengan height-nya peling besar dari ke-2 margin
Jika ada element yang mengandung elemen yang lain maka mergin atas dan bawah dijadikan 1 margin
BoxModel.html
Box Model
ul {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
border-style: dashed;
border-width: thin; /* tanpa border */
}
li{
color: black; /* warna teks hitam */
background: gray; /* Content, padding diwarnai abu-abu*/
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* padding kanan 0px */
list-style: none ; /* tanpa border */
}
li.withborder {
border-style: dashed;
border-width: medium; /* border untuk semua */
border-color: black;
}
- Elemen Pertama
- Elemen Kedua (dengan border)
Positioning Property
Ada beberapa cara unutk menetapkan posisi sebuah element menggunakan CSS, yaitu :1. StaticStatic merupakan model peletakkan elemen secara normal. Dimana elemen diletakkan bersambungan dengan elemen sebelumnya.
Static.html
Static
.links {
width: 350px; height: 70px;
border: 1pt solid black;
background-color: white;
padding: .5em;
position: static;
}
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
2. RelativeRelative merupakan model peletakkan elemen secara relative terhadap elemen sebelumnya, dengan memindahkan elemen pada posisi defaultnya.Relative.html
Relative
.links {
width: 350px; height: 70px;
border: 1pt solid black;
background-color: white;
padding: .5em;
position: relative;
top: 40px; left: 100px;
}
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
3. AbsoluteMemindahkan elemen dari posisi defaultnya terhadap dokumen.Absolute.html
Paragraf Absolute
.links {
width: 350px; height: 70px;
border: 1pt solid black;
background-color: white;
padding: .5em;
position: absolute;
top: 50px; left: 100px;
}
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
4. Fixed
Sama dengan absolute, hanya saja pada saat scroll posisi ikut berubah.
Fixed.html
p {width:400px; border:#000 solid; border-width: 2px 2px 2px 2px;}p#specialpara {width:400px; border:#FF0000 solid; border-width: 2px 2px 2px 2px;position:fixed; top:20px; right:20px;}
There are four values for the position property: static, absolute, fixed, andrelative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take quick look at each using a simple example with four paragraphs.
Float Property
Floating adalah dynamic relative positioning yang dapat digunakan untuk menambahkan kolom di samping image dan untuk membuat multicolumn layout.
Float.html
p {
float:left;
width:400px;
margin:0;
}
img {
float:left;
margin:0 4px 4px 0;
height:150px;
width:150px;
}
There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.
Clear Property
Clear property berfungsi untuk menghilangkan effect dari float property.Clear.html
p {
margin:0 0 10px 0;
}
img {
float:left;
margin:0 4px 4px 0;
height:150px;
width:100px;
}
.clearthefloats {
clear:both;
}
There are four values for the position property: static, absolute, fixed, andrelative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.
There are four values for the position property: static, absolute, fixed, andrelative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.
There are four values for the position property: static, absolute, fixed, andrelative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.
There are four values for the position property: static, absolute, fixed, andrelative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs.
Bagaimana Membuat Layout ?
Membuat Layout 2 Kolom2Kolom.html
Layout 2 Kolom
body {
background-color: #6caad9;
}
#columnLeft {
float: left;
width: 85%;
margin-top: 0;
margin-right: 1.67em;
border-right: 1px solid black;
padding-top: 0;
padding-right: 1em;
padding-bottom: 20px;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#columnRight {
padding-left: 2em;
margin-top: 0;
padding-top: 0;
font: 16px Arial, sans-serif;
}
#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}
li {
list-style-type: none;
}
IOI XV - 2003
Kenosha, Amerika Serikat
16-23 Agustus 2003
Dewi Fortuna memang sedang tidak berpihak kepada TOKI. Empat orang siswa (Derianto Kusuma, Budiarto Herman, Pascal Alfadian Nugroho dan Stephanus) yang telah menjalani seleksi dan latihan yang amat melelahkan, terpaksa harus memendam impian untuk mendapatkan medali di IOI ke-15 kali ini.
Ini merupakan dampak dari pengeboman WTC 11 September 2001 yang meng-akibatkan Amerika Serikat sangat selektif kepada para pemohon visa yang berusia 16-45 tahun. Hanya 1 kontestan TOKI berusia 15 tahun yang bisa mendapatkan visa, yaitu Derianto Kusuma. Namun dengan ketidakhadiran kontestan TOKI yang lain, Derianto Kusuma pun tidak berangkat. Kabarnya, tidak hanya Indonesia yang mengalami sulitnya mendapatkan visa, beberapa negara juga mengalami masalah yang sama.
- 2005
- 2004
- 2003
- 2002
- 2001
(c) 2004 TOKIGuide
Meletakkan Kutipan di antara 2 Kolom
Kutipan.html
Kutipan Dua Kolom
p {
padding: 10px 10px 10px 10px;
text-align: justify;
}
.col {
padding: 0px 5px 0px 5px;
float:left;
width: 365px;
margin-left: 40px;
}
.CCspace {
float: right;
width: 7.5em;
height: 10.5em;
}
.CCpullout {
padding: 0.25em 0.25em 0.25em 0.25em;
float: left;
margin-left: -12em;
width: 16em;
height: 10.5em
}
.CCpullout SPAN {
padding: 0.25em 0.25em 0.25em 0.25em;
font-weight: bold;
font-size: 1.5em;
width: 10.5em;
line-height: 25px;
font-family: trebuchet ms, arial, sana-serif;
position: absolute;
text-align :center;
border: 1px solid;
}
h1 {
text-align: center;
}
Kutipan Di Antara 2 Kolom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus
non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.
Praesent congue sagittis elit. Nullam sagittis tortor ut dui. Praesent tristique feugiat ligula. Quisque congue ante vel augue facilisis nonummy. Nulla auctor, purus id ullamcorper ultrices, justo metus venenatis odio, eu nonummy pede urna pretium tortor. Aliquam erat volutpat. Nullam ante. Aenean feugiat.
Etiam lacinia dolor sagittis nunc. Maecenas nibh risus, suscipit vel, elementum vitae, posuere et, purus.Vivamus ipsum nunc, mattis non, gravida ut, tempor et, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sem. Integer accumsan mi sed metus porta volutpat. Duis sollicitudin enim at diam. Donec ultrices sem aliquam ante ullamcorper placerat.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus"Kekayaan yang besar ternyata tidak secaralangsung membawa seseorang mengalami kebebasan financial"mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum sit amet, dolor. Proin cursus orci eu purus. In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.
Integer molestie eros et urna. Aenean egestas lectus ac mi. Etiam semper lectus at ipsum. Nunc cursus wisi eget urna. Donec pretium tristique sapien. Integer ligula nunc, malesuada gravida, posuere luctus, semper sit amet, nunc. Cras sagittis blandit urna. Nunc eu arcu sed magna vestibulum dictum. Fusce pretium interdum risus. Praesent bibendum lacinia sem. Aliquam erat
volutpat.
Nunc arcu. Ut faucibus purus in risus. Morbi sem. Nunc consequat, sem a suscipit scelerisque, leo tortor sollicitudin nibh, quis vehicula turpis nibh et lorem. Fusce facilisis semper felis. Cras quis magna. In hac habitasse platea dictumst. Etiam quam nisl, bibendum et, tincidunt vel, tristique sed, eros. Cras
laoreet. Etiam nisl eros, luctus nec, eleifend vitae, aliquam id, sapien.
PR (((Buatlah tampilan seperti berikut dengan menggunakan Positioning Elements dan External Styles !!!
Petunjuk !! (
Content
Margin
Padding
Border
Div Header
Div Halaman
Div Content
Div Pilih
Div Footer
Div KiriAtas
Div Atas
Div KiriTengah
Div KananAtas
Div KananBawah
Div Kiri
Div Kanan
[Tim Asisten]Page 18