BELAJAR
CSS2
CSS
Tutorial
1.
CSS Fonts
Font Family
·
Penjelasan:
Di
gunakan untuk mengubah jenis font-family didalam paragraph.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman",
Times, serif;
}
p.sansserif
{
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS
font-family</h1>
<p
class="serif">This is a paragraph, shown in the Times New Roman
font.</p>
<p
class="sansserif">This is a paragraph, shown in the Arial
font.</p>
</body>
</html>
·
Output:
Font Style
·
Penjelasan:
Di
gunakan untuk mengubah font-style didalam paragraph.
·
Script:
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This
is a paragraph in normal style.</p>
<p
class="italic">This is a paragraph in italic style.</p>
<p
class="oblique">This is a paragraph in oblique style.</p>
·
Output:
Font Size1
·
Penjelasan:
Di
gunakan untuk mengubah ukuran font.
·
Script:
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<p>This
is a paragraph.</p>
<p>This
is another paragraph.</p>
·
Output:
Font Size2
·
Penjelasan:
Fungsinya
hamper sama dengan font size1, Cuma difont size2 ini lebih detail.
·
Script:
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<p>This
is a paragraph.</p>
<p>Specifying
the font-size in em allows all major browsers to resize the text.
Unfortunately,
there is still a problem with older versions of IE. When resizing the text, it
becomes larger/smaller than it should.</p>
·
Output:
2.
CSS Links
Styling Links
·
Penjelasan:
Di
gunakan untuk memanggil sebuah links, dan memberikan style pada href terbut.
Jika text this is a link tersenggol cursor, text tersebut akan berubah warna.
·
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>
</html>
·
Output:
Text Decoration
·
Penjelasan:
Memiliki
fungsi yang sama dengan styling links, jika text this is a link tersenggol akan
memunculkan garis bawah pada text tersebut.
·
Script:
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</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>
·
Output:
Background Color
·
Penjelasan:
Jika
text this is a link tersenggol, text tersebut akan berganti warna background.
·
Script:
<style>
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
</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>
·
Output:
3.
CSS Lists
Different List Item
Markers
·
Penjelasan:
Memberikan
list tyle type pada setiap order.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example
of unordered lists:</p>
<ul
class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul
class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example
of ordered lists:</p>
<ol
class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol
class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
·
Output:
An Image as The List Item
Marker
·
Penjelasan:
Di
gunakan untuk memasang gambar pada list style.
·
Script:
<style>
ul {
list-style-image: url('t.jpg');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
·
Output:
Crossbrowser Solution
·
Penjelasan:
Di
gunakan untuk memberi background image pada list style.
·
Script:
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(p.jpg);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
·
Output:
List-Shorthand Property
·
Penjelasan:
Di
gunakan untuk memasang image pada list style dengan square inside.
·
Script:
<style>
ul {
list-style: square inside url("t.jpg");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
·
Output:
4.
CSS Tables
Table Borders
·
Penjelasan:
Di
gunakan untuk membuat suatu table.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
table, th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
·
Output:
Collapse Borders
·
Penjelasan:
Di
gunakan untuk mengubah jenis border pada table.
·
Script:
<style>
table {
border-collapse: collapse;
}
table, td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b>
If a !DOCTYPE is not specified, the border-collapse property can produce
unexpected results
in IE8 and
earlier versions.</p>
·
Output:
Table Width and Height
·
Penjelasan:
Di
gunakan untuk menentukan panjang lebar table.
·
Script:
<style>
table, td,
th {
border: 1px solid green;
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Horizontal Text Alignment
·
Penjelasan:
Di
gunakan untuk membuat table dengan bentuk horizontal.
·
Script:
<style>
table, td,
th {
border: 1px solid black;
}
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Vertikal Text Alignment
·
Penjelasan:
Di
gunakan untuk membuat table dengan bentuk verrtikal.
·
Script:
<style>
table, td,
th {
border: 1px solid black;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Table Color
·
Penjelasan:
DI
gunakan untuk memberi warna pada table.
·
Script:
<style>
table, td,
th {
border: 1px solid blue;
}
th {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
0 comments:
Post a Comment