Cara Penggunaan CSS
CSS 1
Tag CSS :
Simpan tag HTML dengan nama coba_css.htm dan tag CSS dengan nama external.css
Hasilnya :
CSS 2
Simpan tag HTML dengan nama myweb.htm dan tag css dengan nama mystyle.css
Hasilnya :
Sekian postingan materi pemrograman web tentang CSS dari saya.
See You Next Time... :))
CSS 1
Tag HTML :
<html>
<head>
<link rel="stylesheet"type="text/css"href="external.css">
</head>
<body>
<h1>header ini ukurannya 36pt</h1>
<h2>header ini warnanya biru</h2>
<p>paragraf ini letaknya sebelah kiri dengan jarak 50px</p>
</body>
</html>
<link rel="stylesheet"type="text/css"href="external.css">
</head>
<body>
<h1>header ini ukurannya 36pt</h1>
<h2>header ini warnanya biru</h2>
<p>paragraf ini letaknya sebelah kiri dengan jarak 50px</p>
</body>
</html>
Tag CSS :
body
{
background-color:lightblue;
}
h1
{
font-size:36pt;color:white
}
h2
{
color:blue
}
p
{
margin-left:50px
}
{
background-color:lightblue;
}
h1
{
font-size:36pt;color:white
}
h2
{
color:blue
}
p
{
margin-left:50px
}
Simpan tag HTML dengan nama coba_css.htm dan tag CSS dengan nama external.css
Hasilnya :
CSS 2
Tag HTML :
<html>
<head>
<title>penggunaan css</title>
<style type="text/css">
h4.as_internal{
color:#00ff00; font-family:tahoma,verdana,geneva,lucida,
'lucida-grande',arial,helvetica,sans-serif;font-size:14px;font-weight:bold;}
td.as_internal{
background-color=#ffffff;
}
</style>
<link rel="stylesheet"type="text/css"href="mystyle.css">
</head>
<body>
<table width="780" border="1" align="center">
<tr>
<td class="as_external"colspan="3"align="center"><h4 class="as_external">penggunaan style sheet external</h4></td>
</tr>
<tr>
<td class="as_internal"colspan="3"align="center"><h4 class="as_internal">penggunaan style sheet internal</h4></td>
</tr>
<tr>
<td style="background-color:lightskyblue;"colspan="3"align="center"><h4 style="color:#0000ff;
font-family:tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;font-size:
14px;font-weight:bold;">penggunaan style sheet inline</h4></td>
</tr>
<tr>
<td colspan="3"align="center"><h4>tanpa penggunaan style sheet</h4></td>
</tr>
<tr align="center">
<td class="as_internal"colspan="3"align="center"><a href="internal1.htm"><b>internal</b></a></td>
<tr>
<td colspan="3"><hr></td></tr>
<tr>
<td>nama</td>
<td colspan="2"><input type="text" name="text1" class="inputbox" value=""
</td>
</tr>
<tr>
<td>alamat</td>
<td colspan="2"><input type="text" name="text2" class="inputbox" value=""
size="100"></td>
</tr>
<tr>
<td colspan="3"><hr></td></tr>
<tr>
<td colspan="3">
<input type="submit" class="button" value="submit">
<input type="reset" class="button" value="reset"></td>
</tr>
</table>
</body>
</html>
<head>
<title>penggunaan css</title>
<style type="text/css">
h4.as_internal{
color:#00ff00; font-family:tahoma,verdana,geneva,lucida,
'lucida-grande',arial,helvetica,sans-serif;font-size:14px;font-weight:bold;}
td.as_internal{
background-color=#ffffff;
}
</style>
<link rel="stylesheet"type="text/css"href="mystyle.css">
</head>
<body>
<table width="780" border="1" align="center">
<tr>
<td class="as_external"colspan="3"align="center"><h4 class="as_external">penggunaan style sheet external</h4></td>
</tr>
<tr>
<td class="as_internal"colspan="3"align="center"><h4 class="as_internal">penggunaan style sheet internal</h4></td>
</tr>
<tr>
<td style="background-color:lightskyblue;"colspan="3"align="center"><h4 style="color:#0000ff;
font-family:tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;font-size:
14px;font-weight:bold;">penggunaan style sheet inline</h4></td>
</tr>
<tr>
<td colspan="3"align="center"><h4>tanpa penggunaan style sheet</h4></td>
</tr>
<tr align="center">
<td class="as_internal"colspan="3"align="center"><a href="internal1.htm"><b>internal</b></a></td>
<tr>
<td colspan="3"><hr></td></tr>
<tr>
<td>nama</td>
<td colspan="2"><input type="text" name="text1" class="inputbox" value=""
</td>
</tr>
<tr>
<td>alamat</td>
<td colspan="2"><input type="text" name="text2" class="inputbox" value=""
size="100"></td>
</tr>
<tr>
<td colspan="3"><hr></td></tr>
<tr>
<td colspan="3">
<input type="submit" class="button" value="submit">
<input type="reset" class="button" value="reset"></td>
</tr>
</table>
</body>
</html>
Tag CSS :
body{
background:#d4d0c8;
margin:opx;
}
h4.as_external{
color:#09fd2b;
font-family:tahoma,verdana,geneva,lucida, 'lucida grande', arial, helvetica, sans serif;
font-size:14px;font-weight:bold;
}
a:link, a:visited{
font-size:14px;
color:#333333;
text-decoration:bold;
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
}
a:hover{
color:#ff0000; text-decoration:bold, underline;
}
hr{
background:#0000ff; height:15px; border:1px solid#000000;
}
.button{
font-family:verdana, arial, helvetica, sans serif;
font-style:normal;
font-size:12px;
border-style:solid;
padding:1;
height:16px;
border:1px solid#999;
color:#30348d;
cursor:hand;
}
.inputbox{
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
font-size:x-small;
color:#333333;
background:#ffffff;
border:1px solid;
height:18px;
line-height:13px;
}
td.as_external{
background-color:#edf5fe;
}
background:#d4d0c8;
margin:opx;
}
h4.as_external{
color:#09fd2b;
font-family:tahoma,verdana,geneva,lucida, 'lucida grande', arial, helvetica, sans serif;
font-size:14px;font-weight:bold;
}
a:link, a:visited{
font-size:14px;
color:#333333;
text-decoration:bold;
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
}
a:hover{
color:#ff0000; text-decoration:bold, underline;
}
hr{
background:#0000ff; height:15px; border:1px solid#000000;
}
.button{
font-family:verdana, arial, helvetica, sans serif;
font-style:normal;
font-size:12px;
border-style:solid;
padding:1;
height:16px;
border:1px solid#999;
color:#30348d;
cursor:hand;
}
.inputbox{
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
font-size:x-small;
color:#333333;
background:#ffffff;
border:1px solid;
height:18px;
line-height:13px;
}
td.as_external{
background-color:#edf5fe;
}
Simpan tag HTML dengan nama myweb.htm dan tag css dengan nama mystyle.css
Hasilnya :
Sekian postingan materi pemrograman web tentang CSS dari saya.
See You Next Time... :))
0 komentar:
Posting Komentar
Berikan Komentar...!!!