1.
Dimension, Properti CSS dimension digunkan untuk mengatur tinggi dan
lebar dari sebuah elemen.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
p
{
max-width:
20%;
background-color:
yellow;
}
</style>
</head>
<body>
<p>This
is some text. This is some text. This is some text.
This
is some text. This is some text. This is some text.
This
is some text. This is some text. This is some text.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-width_percent
by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:27 GMT -->
</html>
Hasil
:
2.
Display, Properti display menentukan jika/bagaimana sebuah elemen
ditunjukkan, dan property visibility menentukan jika sebuah elemen
harus diperlihatkan atau disembunyikan.
Hiding
an element-visibility:hidden
Penjelasan
: Hidding sebuah elemen dapat diselesaikan dengan pengaturan
property display “none” atau “hidden”. Visibility:hidden
digunakan untuk menyembunyikan elemen.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
li
{
display:
inline;
}
</style>
</head>
<body>
<p>Display
a list of links as a horizontal menu:</p>
<ul>
<li><a
href="../html/default.html" target="_blank">HTML</a></li>
<li><a
href="default.html" target="_blank">CSS</a></li>
<li><a
href="../js/default.html"
target="_blank">JavaScript</a></li>
</ul>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list
by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:32:44 GMT -->
</html>
Hasil
:
3.
Positioning, Properti CSS positioning digunakan untuk posisi sebuah
elemen dan juga dapat menempatkan sebuah elemen lain dibelakang dan
menentukkan apa yang seharusnya terjadi ketika konten elemen terlalu
besar. Elemen-elemen tersebut dapat diposisikan dengan property top,
bottom, left, dan right.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
p.pos_fixed
{
position:
fixed;
top:
30px;
right:
5px;
color:
red;
}
</style>
</head>
<body>
<p><b>Note:</b>
IE7 and IE8 supports the fixed value only if a !DOCTYPE is
specified.</p>
<p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p>
<p
class="pos_fixed">Some positioned text.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:29 GMT -->
</html>
Hasil
:
4.
Floating, Dengan CSS float, sebuah elemen dapat didorong ke kiri atau
kanan dan mununjukkan elemen lain untuk membungkus disekitarnya.
Float sering digunakan dengan gambar, tetapi itu juga sangat berguna
ketika sedang bekerja dengan layout.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
.thumbnail
{
float:
left;
width:
110px;
height:
90px;
margin:
5px;
}
.text_line
{
clear:
both;
margin-bottom:
2px;
}
</style>
</head>
<body>
<h3>Image
Gallery</h3>
<p>Try
to resize the browser-window to see what happens when the images does
not have enough room.</p>
<img
class="thumbnail" src="vio.jpg" width="107"
height="90">
<img
class="thumbnail" src="alfi.jpg" width="107"
height="80">
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_float_clear by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:34 GMT -->
</html>
Hasil
:
5.
Align, Elemen block adalah sebuah elemen yang mengambil kemungkinan
dapat digunakan dengan lebar secara penuh dan mempunyai pemecah baris
sebelum dan sesudahnya.
Contoh
untuk elemen block, yaitu : <h1>, <p>, <div>.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
.center
{
margin-left:
auto;
margin-right:
auto;
width:
70%;
background-color:
#b0e0e6;
}
</style>
</head>
<body>
<div
class="center">
<p>In
my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since.</p>
<p>'Whenever
you feel like criticizing anyone,' he told me, 'just remember that
all the people in this world haven't had the advantages that you've
had.'</p>
</div>
<p><b>Note:
</b>Using margin:auto will not work in IE8, unless a !DOCTYPE
is declared.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_align_container by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:35 GMT -->
</html>
Hasil
:
6.
Combinators, Selector CSS dapat berisi lebih dari satu selector
simple. Diantara selector simple, kita dapat memasukkan sebuah
kombinator. Ada empat kombinator berbeda dalam CSS, yaitu :
a.
Descendant selector
b.
Child selector
c.
Adjacent sibling selector
d.
General Sibling selector
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
div
p {
background-color:
blue;
}
</style>
</head>
<body>
<div>
<p>Paragraph
1 in the div.</p>
<p>Paragraph
2 in the div.</p>
<span><p>Paragraph
3 in the div.</p></span>
</div>
<p>Paragraph
4. Not in a div.</p>
<p>Paragraph
5. Not in a div.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_element
by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:36 GMT -->
</html>
Hasil
:
7.
Psseudo-Class,Pseudo class digunakan untuk mendefinisikan pernyataan
khusus dari sebuah elemen.
Contohnya
:
-Style
sebuah elemen ketika pengguna mouse di atas link
-Style
sebuah elemen link ketika dikunjungi dan belum dikunjungi secara
berbeda.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
/*
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;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
<!--
Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_link by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:10 GMT -->
</html>
Hasil
:
8.
Pseudo-elment, CSS pseudo elemen digunakan untuk style bagian yang
ditentukan dari sebuah elemen. Contohnya, itu dapat digunakan untuk
style huruf pertama atau baris dari sebuah elemen dan menambah konten
sebelum atau sesudah dari sebuah elemen.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
p::first-line
{
color:
#ff0000;
font-variant:
small-caps;
}
</style>
</head>
<body>
<p>You
can use the ::first-line pseudo-element to add a special effect to
the first line of a text. Some more text. And even more, and more,
and more, and more, and more, and more, and more, and more, and more,
and more, and more, and more.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_firstline by HTTrack
Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:39 GMT
-->
</html>
Hasil
:
9.
Navigation Bar, Navigation bar membutuhkan HTML standar sebagai
dasar. Dalam contoh di bawah ini, kita akan membangun navigation bar
dari daftar HTML standar. Navigation bar pada dasarnya adalah sebuah
daftar dar link, jadi kegunaan elemen <ul> dan <li>
membuat arti sempurna.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
ul
{
list-style-type:
none;
margin:
0;
padding:
0;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_css by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:33:14 GMT -->
</html>
Hasil
:
10.
Image Galery, CSS dapat digunakan untuk menciptakan galeri gambar.
Contoh dibawah ini, sebuah gambar dari galeri dapat diklik, dan akan
menghasilkan suatu halaman baru yang berisikan apa yang ada dalam
link yang dipilih dalam scriptnya.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
div.img
{
margin:
5px;
padding:
5px;
border:
1px solid #0000ff;
height:
auto;
width:
auto;
float:
left;
text-align:
center;
}
div.img
img {
display:
inline;
margin:
5px;
border:
1px solid #ffffff;
}
div.img
a:hover img {
border:
1px solid #0000ff;
}
div.desc
{
text-align:
center;
font-weight:
normal;
width:
120px;
margin:
5px;
}
</style>
</head>
<body>
<div
class="img">
<a
target="_blank" href="klematis_big.html"><img
src="vio.jpg" alt="Me" width="110"
height="90"></a>
<div
class="desc">Add a description of the image here</div>
</div>
<div
class="img">
<a
target="_blank" href="klematis2_big.html"><img
src="alfi.jpg" alt="Me" width="110"
height="90"></a>
<div
class="desc">Add a description of the image here</div>
</div>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:41 GMT -->
</html>
Hasil
:
11.
Image Opacity, Menciptakan gambar transparan dengan CSS adalah sangat
mudah. Properti CSS opacity adalah bagian dari rekomendasi CSS3.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
img
{
opacity:
0.4;
filter:
alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image
Transparency</h1>
<img
src="vio.jpg" width="150" height="113"
alt="Vio">
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:33:16 GMT -->
</html>
Hasil
:
12.
Images Sprites, Image sprite adalah sebuah koleksi gambar yang
meletakkan dalam gambar single. Sebuah halaman web dengan beberapa
gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan
beberapa permintaan. Menggunakan image sprite akan mengurangi nomor
dari beberapa permintaan dan mengamankan bandwidth.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
#home
{
width:
46px;
height:
44px;
background:
url(vio.jpg) 0 0;
}
#next
{
width:
43px;
height:
44px;
background:
url(vio.jpg) -91px 0;
}
</style>
</head>
<body>
<img
id="home" src="vio.jpg"><br><br>
<img
id="next" src="vio.jpg">
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:42 GMT -->
</html>
Hasil
:
13.
Media Types, Jenis media yang memungkinkan Anda untuk menentukan
bagaimana dokumen akan disajikan dalam media yang berbeda. Dokumen
dapat ditampilkan berbeda pada layar, di atas kertas, dengan browser
aural, dll.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
@media
screen {
p
{
font-family:
verdana,sans-serif;
font-size:
14px;
}
}
@media
print {
p
{
font-size:
20px;
color:
red;
}
}
</style>
</head>
<body>
<h2>The
@media Rule</h2>
<p>The
@media rule allows different style rules for different media in the
same style sheet.</p>
<p>The
style in this example tells the browser to display a 14 pixels
Verdana font on the screen.
However,
if the page is printed, the text will be in 20 pixels Verdana font,
and in a red color.</p>
<p><b>See
it yourself !</b> Print this page (or open Print Preview), and
you will see
that
the text will be displayed in a larger font size, and in red
color.</p>
</body>
<!--
Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_media
by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:33:16 GMT -->
</html>
Hasil
:
14.
Attribut Selectors, CSS [attribte] selector digunakan untuk
menampilkan elemen dengan atribut tetap.
Contoh
Script :
<!DOCTYPE
html>
<html>
<head>
<style>
a[target]
{
background-color:
yellow;
}
</style>
</head>
<body>
<p>The
links with a target attribute gets a yellow background:</p>
<a
href="../index.html">w3schools.com</a>
<a
href="http://www.disney.com/"
target="_blank">disney.com</a>
<a
href="http://www.wikipedia.org/"
target="_top">wikipedia.org</a>
<p><b>Note:</b>
For [<i>attribute</i>] to work in IE8 and earlier, a
DOCTYPE must be declared.</p>
</body>
<!--
Mirrored from
www.w3schools.com/css/tryit.asp?filename=trycss_sel_attribute by
HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015
07:23:43 GMT -->
</html>
Hasil
:
