MODUL 4-css

MODUL 4
STYLE SHEET
I. RINGKASAN
Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba
saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan
tersebut, Anda dapat menggunakan style sheet/CSS .
Style Sheet dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:
1. Dengan membuat link ke file Style Sheet dari file HTML. Metode seperti ini
memungkinkan anda mengubah style sejumlah halaman web dengan hanya
mengedit satu file Style Sheet.
Contoh:
a. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small;}
h1 {color: red; }
b. Langkah kedua adalah memanggil file style.css dari semua halaman web.
Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan
</head> seperti dibawah ini.
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
2. Dengan menyisipkan Style Sheet pada file HTML. Metode seperti ini memungkinkan
anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris
Style Sheet.
Contoh :
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
CSS : Syawaluddin.ST Page 1

3. Dengan menyisipkan secara inline pada tag dalam file HTML. Hal ini memberi cara
tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada
halaman web. Contoh :
<P style=”color:blue”>
Isi paragraf.
</p>
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali
saja. Anda dapat menggunakan satu, dua, atau ketiga cara tersebut pada halaman web.
Start Tag Kegunaan

<style> Mendefinisikan style dalam sebuah dokumen
<link> Mendefinisikan relasi antara dua dokumen yang berhubungan
LATIHAN
1. Pengaturan latar belakang

<html>
<head>
/*Mendefinisikan sintaks css*/
<style type="text/css">
/*Pengaturan background dengan css*/
body
{
background: #00ff00
url("gbr4.png")
no-repeat fixed
center center
}
</style>
</head>
<body>
<p>
<b>Catatan:</b>
Properti background-attachment dan background-position digunakan dalam browser
</p>
<p>Ada teks disini</p>
<p>Tuliskan sekehendak kalian</p>
<p>Terserah apa saja</p>
<p>Yang penting ada tulisannya</p>
</body>
</html>
2. Penanganan font

<html>
<head>
p.normal {font-weight: normal}
p.tebal {font-weight: bold}
p.teballl {font-weight: 900}
p.lengkap
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p class="normal">
Perhatikan paragraf ini</p>
<p class="tebal">
Bandingkan dengan paragraf diatasnya</p>
<p class="teballl">
Bandingkan yang ini juga</p>
<p class="lengkap">
Paragraf dengan semua atribut font dimasukkan</p>
</body>
</html>
3. Pembuatan border
<html>
<head>
p.borderous
{
border-style: double;
border-width: 5px 10px 1px medium;
border-color: #ff0000
#00ff00 #0000ff
rgb(250,0,255)
}
</style>
</head>
<body>
<p class="borderous">

<b>Catatan:</b> Properti "border-color" dan "border-width" tidak dikenali oleh
browser Internet Explorer bila digunakan secara langsung. Gunakan properti
"border-style" untuk menyiapkan border dalam Internet Explorer.<br>
Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 - 5.0 tidak
mendukung nilai "dotted" dan "dashed" </p>
</body>
</html>
4. Pengaturan margin
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 80px}
</style>
</head>
<body>
<p>
Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.
</p>
<p class="margin">
Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window
browser agar terlihat lebih jelas perbedaannya.
</p>
<p>
This is a paragraph
</p>
</body>
</html>
5. Mengatur padding pada sel tabel

<html>
<head>
td {padding: 1.5cm}
td.value2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>

Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap sisinya
(1,5cm).
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="value2">
Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki nilai 0,5cm,
sedangkan padding kanan dan kiri nilainya 2,5cm.
</td>
</tr>
</table>
</body>
</html>
6. Menggunakan list
<html>
<head>
ul
{
list-style: square outside url("gambarkecil.gif")
}
/*jangan lupa gambarkecil.gif harus ada*/
</style>
</head>
<body>
<p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list.
Properti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas item yang
berupa kalimat panjang dan window browser berukuran kecil.</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

7. Elemen latar depan dan latar belakang
<html>
<head>
img.x1
{
position:absolute;
left:0;
top:0;
z-index:1
}
img.x2
{
position:absolute;
left:0;
top:100;
z-index:-1
}
</style>
</head>
<body>
<p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p>
<h1>Sepertinya Heading ini terhalang oleh gambar</h1>
<img class="x1" src="gambar.bmp" width="100" height="80">
<p>Nilai default z-index adalah 0. Z-index 1 memiliki prioritas lebih tinggi, sedangkan
Z-index –1 memiliki prioritas lebih rendah.</p>
<p></p>
<img class="x2" src="gambar.bmp" width="100" height="80">
<p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini.
Apakah masih terhalang gambar?</p>
</body>
</html>
8. Mengubah tampilan Link

<html>
<head>
a:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:visited {color: #0000ff}
a.four:hover {font-family: fixedsys}
a.five:visited {color: #0000ff; text-decoration: line-through}
a.five:hover {text-decoration: overline}
</style>
</head>
<body>
<p>Gerakkan pointer mouse di atas link-link di bawah ini untuk membuat link
tersebut berubah tampilannya.</p>
<p><a class="one" href="hlm1.htm"">Mengubah properti color</a></p>
<p><a class="two" href="hlm2.htm"> Mengubah properti font-
size</a></p>
<p><a class="three" href="hlm3.htm"> Mengubah properti background-
color</a></p>
<p><a class="four" href="hlm4.htm"> Mengubah properti font-
family</a></p>
<p><a class="five" href="hlm5.htm"> Mengubah properti text-
decoration</a></p>
</body>
</html>
II. Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari
satu kali. Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class
selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di
akhiri dengan tag </div>.

Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS

<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
III. ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID
selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman
web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector
di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag
</div>.
Referensi Style sheet :

Latihan Menu 1.
Buatlah terlebih dahulu sebuah folder untuk menampung file latihan anda, dan buatlagi
sebuah folder bernama : images untuk menampung gambar. Kemudian ketik kode
berikut ini :
1. Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-
8" />
<title>Latihan Membuat Menu dengan CSS</title>

<link rel="stylesheet" type="text/css" media="screen"
href="demo.css" />
</head>
<body>
<div id="content">

<div class="block">
Latihan 1 Menu Bergerak Dengan CSS<br/>

<ul id="fly-menu">
<li><a href="http://www.webstuffshare.com">
<img src="images/heart.png"alt="webstuffshare">
Home</a></li>
<li><a href="http://feeds.feedburner.com/webstuffsharecom">
<img src="images/rss.png" alt="rss">Berita</a></li>
<li><a href="http://feedburner.google.com ">
<img src="images/email.png" alt="email">Kirim Email</a></li>
<li><a href="http://twitter.com/hdytsgt"><img
src="images/twitter.png" alt="twitter"> Follow
Twitter</a></li>
</ul>
<div class="cleaner"></div>
<br/><br/>Latihan 2 Menu Bergerak & Bersinar Dengan CSS<br/>

<ul id="fly-glow-menu">
<li><a href="http://www.webstuffshare.com"><img
src="images/heart.png" alt="webstuffshare">Home</a></li>
<li><a href="http://feeds.feedburner.com "><img
src="images/rss.png" alt="rss">Berita</a></li>
<li><a href="http://feedburner.google.com "><img
src="images/email.png" alt="email"> Kirim Email</a></li>
<li><a href="http://twitter.com/hdytsgt"><img
src="images/twitter.png" alt="twitter"> Follow
Twitter</a></li>
</ul>
<div class="cleaner"></div>
</div>
<br/>
</div>
</body>
</html>
2. demo.css (Untuk mengatur style dan gaya menu ).

* {
margin:0; padding:0;
}
body {
font-family: Georgia;
background: #eaeaea;
text-align: center;
color: #464530;
text-shadow: 0px 1px 0px #fff;
font-size: 30px;
font-weight: bold;
letter-spacing: -1px;
margin-top: 5%;
}
a, a:visited {
color: #464530;
text-decoration: none;
}
label {
font-size: 20px;
}
#content {
display: block;
width: 730px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.block {
font-size: 30px;
background: #eaeaea;
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-webkit-border-radius: 3px;
padding: 40px 15px;
}
.cleaner {
clear: both;
}
#fly-menu, #fly-glow-menu {
margin: 1em auto 0 auto;
}
#fly-menu li, #fly-glow-menu li {
/* Membuat style */
list-style-type: none;
margin-right: .5em;
float: left;
font-size: 15px;
background: #cacaca;
padding: 10px;
cursor: pointer;
/* Membuat shadow/bayangan */
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);

/*
Pengaturan animasi transisi :
-webkit : Safari & Chrome.
-moz : Firefox
-o : Opera
*/
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
#fly-menu li img, #fly-glow-menu li img {

border: 0;
}
#fly-menu li:hover {
margin-top: -1em;
}
#fly-glow-menu li:hover {
margin-top: -1em;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);

-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}
Latihan Menu 2 (Vertical Menu) :

Simpan dengan nama file : vertikal.html
<html>
<head><title>Latihan Menu dengan CSS</title>
menu{font-family:"Comic Sans MS"; font-size:12px;
display:none;
text-decoration:none;
width:150px;
}
.menu1{
background-color:#000000;
color:#FFFFFF;
display:block;
margin: 2px;
padding: 5px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
.menu1:hover{
color:#FFFFFF;
background-color:#0000FF;
display:block;
}
#mm:hover, #mm:hover menu{
display:block;
}
.mu{

background-color:#0000FF;
font-family:'Comic Sans MS';
font-size:14px;color:#FFFFFF;
width:150px;
display:block;
height:25px;
padding:5px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
</style>
</head>
<body>
<div id="mm">
<a href="#" class="mu">Menu</a>
<menu>
<a href="#" class="menu1">Sub Menu 1</a>
</menu>
</div>
</body>
</html>
Latihan Menu 3 (Horizontal Menu)

Simpan dengan nama file : Horizontal.html
<html>
<head>
<title>Drop Down Menu</title>
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {

color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav
li:hover ul li a:link, #place-nav #nav li:hover ul li
a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav
li ul li a:hover {
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,

div#place-nav li li:hover ul

{display:block;}
</style>
</head><body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body></html>
Latihan page 1( membagi halaman menjadi 2 kolom).
1. Dua_halaman.html
<html>
<head>
<title>2 kolom</title>
<link rel="stylesheet" href="style_kolom.css"
type="text/css" media="screen" />
<style type="text/css" media="screen">
/* <![CDATA[ */ @import url(style_kolom.css); /* ]]> */
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Contoh Link 1</a></li>
</ul>
</div>
<div id="content">
<h1>Layout dua kolom sederhana</h1>
<p><strong>Step x - bold text here...</strong> More text
here...</p>
<p>More text here...</p>
</div>
</body>
</html>
2. Style_kolom.css
body {margin:0px; padding:0px; font: 1em verdana, arial,
sans-serif;}
div#nav {position:absolute; left:0px; top:0px; width:150px;
padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px
solid #069; border-bottom:1px solid #069;}

div#nav ul {margin-top:0px; margin-bottom:.8em;}
div#nav li {margin-bottom:.5em; font-weight:bold; font-
size:.75em;}
div#content {margin:20px 0 0 165px; padding: 0 1em;}
div#content h1{font-size:1em;}
div#content p {font-size:.8em;}
div#content li {font-size:.75em;}
Latihan Page 2 ( membagi halaman menjadi 3 kolom).

1. Tiga_halaman.html
<html>
<head>
<title>Layout Website 3 Kolom</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar_kiri">
</div>
<div id="center">
</div>
<div id="sidebar_kanan">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
2. Style.css
*{margin:0 auto; padding:0}
body{background:#c0c0c0;
font-family:verdana;
font-size:10px; color:#4c4e55;
}
#container{width:1007px; height:1369px;
background:url('bg.jpg') no-repeat;
}
#header{height: 150px;
border: 1px solid #009900;
}
#sidebar_kiri{float:left; width:250px;
height:1000px; margin:3px 0;
padding:3px; border:1px solid #009900;
}
#center{float:left; width: 577px; height:1000px;

margin:3px; padding:3px;
border:1px solid #009900;
}
#sidebar_kanan{float:left; width:150px;
height:1000px; margin:3px 0;
padding: 3px; border: 1px solid #009900;
}
#footer{height:201px; border:1px solid #009900;
clear: both;
}

Latihan Page 3 ( 2 kolom dengan Background Image).
1. Web-colimg.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Bali Exotique Island</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="layout">
<div id="header"></div>
<div id="kolom1">Our Services
<ul><li>Travel and Tour Package</li>
<li>Wedding Reception</li>
<li>Event Organizer</li>
<li>Adventure Trip</li>
</ul>
</div>
<div id="kolom2">Bali as you know, is the most pleased place to
visit. Bali give you an aroma of paradise on earth. as you know,
is the most pleased place to visit. Bali give you an aroma of
paradise on earth. as you know, is the most pleased place to
visit. Bali give you an aroma of paradise on earth.
</div>
<div id="footer"></div>
</div>
</body>
</html>
2. Style.css
*{margin:0 auto; padding:2}
#layout {
height: auto;
width: 700px;
background:url('bg.jpg') no-repeat;
}
#header {
float: left;
height: 200px;
width: 700px;
background-image: url(bg3.jpg);
}
#kolom1 {
float: left;
height: auto;
width: 200px;
background-image: url(kol1.gif);

background-repeat: repeat;
}
#kolom2 {
float: left;
height: auto;
width: 500px;
background-image: url(kol2.gif);
background-repeat: repeat;
}
#footer {
float: left;
height: 50px;
width: 700px;
background-image: url(bg3.jpg);
}
Catatan : gambar yang kita buat sesuaikan dengan nama pada CSSnya seperti:
footer.jpg
header.jpg
kolom1.jpg
kolom2.jpg
Penggunaan CSS untuk Tabel

Pada saat pembuatan website, adakalanya kita memerlukan tabel untuk menyampaikan
sesuatu kepada pengunjung. CSS atau Cascading Style Sheet pada pembuatan tabel,
dapat kita berdayakan untuk memudahkan kita dalam mengatur tabel dan membuat
tabel menjadi lebih menarik.
Tabel dapat kita bagi menjadi baris judul dan baris isi dengan menggunakan tag <th>
dan <tr> dan tiap cell akan menggunakan tag <td>. Selanjutnya, perlu kita ketahui
terlebih dahulu beberapa properti yang melengkapi sebuah tabel dan dapat diatur
menggunakan CSS. Properti tersebut adalah:
1. Border, misal : table, th, td{border:1px solid red;}
maka hasilnya adalah sbb :
2. Collapse Border, tabel diatas mempunyai banyak border, apabila border untuk tabel
dan cell akan kita gabung maka kita menambahkan
table {border-collapse:collapse;}
table, th, td{border: 1px solid red;}
maka hasilnya adalah sbb:

3. Tinggi dan Lebar Tabel, kita dapat mengatur tinggi dan lebar total dari sebuah tabel.
Kita dapat menggunakan persentase dari ruang yang tersedia atau menggunakan
satuan px yang absolut. Misal, lebar tabel kita buat 75% dari ruang yang ada
(dibandingkan dengan tabel diatas yang lebarnya 100%) dan tinggi baris judul lebih
tinggi dari baris isi, dengan kode berikut:
table{width:75%;}
th{height:50px;}
hasilnya adalah sbb :
Penggunaan CSS untuk Form

<head>
body { background-color: #FFFFFF; margin: 10px 10px 10px 10px; }
#BlueSky { background-color: #F2F9FF; padding: 30px; margin-
bottom:5px; width:350px; border:1px solid #91CBF7; }
#FormBox { margin:0px;padding:0px; }
#FormBox h1 { color:#333399; font-size:13px;margin-
bottom:10px;padding:0px; }
#FormBox p { color:#777777; font-size:10px;margin-
bottom:20px;padding:0px; }
#FormBox label { margin-bottom:10px;
color:#555555;display:block;font-weight:bold; font-size:12px; }
#FormBox .input {
margin-bottom:20px; border: 1px solid #cdcdcd;
padding: 0.2em; background: #FFFFFF repeat-x 0 1px;
color:#666666;
}
#FormBox .input:hover {
margin-bottom:20px; border: 1px solid #FF0000;
padding: 0.2em; background: #FFFFFF repeat-x 0 1px;
color:#666666;
}
#FormBox .submit { width:117px; height:40px; border:none;
background: #FF01B3 no-repeat 0 0; }
#FormBox .spacer { margin-bottom:10px; }

</style>
</head>
<body>
<div id="BlueSky">
<div id="FormBox">
<h1>CONTOH FORM PAKEK GAYA CSS</h1>
<form action="" method="get">
<label>Nama:</label>
<input class="input" type="text" size="50" />
<label>E-Mail:</label>
<input class="input" type="text" size="50" />
<label>Website:</label>
<input class="input" value="http://" type="text" size="50" />
<label>Message:</label>
<textarea class="input" cols="38" rows="5"></textarea>
<div class="spacer"></div>
<input name="SUBMIT" value="KIRIM" class="submit"
type="submit"/>
</form>
</div>
</div>
</body>
CSS untuk membentuk sudut lengkung
Untuk membuat sudut lengkung (rounded corner) gunakan pengaturan css berikut :
.contoh div {
background:#0CF;
height:40px;
width:400px;
border:2px solid #F90;
/* Property untuk membuat sudut lengkung : */
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
Hasilnya :
Gunakan <div class=”contoh></div>

MODUL 4-css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

MODUL 4-css

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 4

p {font-family: arial; font-size: small;}

<link rel=”stylesheet” href=”style.css” type=”text/css”>

<style type="text/css" media=screen>

CSS : Syawaluddin.ST Page 1

Start Tag Kegunaan

1. Pengaturan latar belakang

CSS : Syawaluddin.ST Page 2

CSS : Syawaluddin.ST Page 3

5. Mengatur padding pada sel tabel

CSS : Syawaluddin.ST Page 4

CSS : Syawaluddin.ST Page 5

8. Mengubah tampilan Link

CSS : Syawaluddin.ST Page 6

II. Class Selector

Untuk menempelkan class ke dalam tag HTML:

CSS : Syawaluddin.ST Page 7

Penulisan kode CSS:

Pemakaian kode CSS

Cara penulisan ID Selector:

Untuk menempelkan ID selector ke dalam tag HTML:

Referensi Style sheet :

CSS : Syawaluddin.ST Page 8

CSS : Syawaluddin.ST Page 9

2. demo.css (Untuk mengatur style dan gaya menu ).

CSS : Syawaluddin.ST Page 10

#fly-menu li, #fly-glow-menu li {

CSS : Syawaluddin.ST Page 11

#fly-menu li img, #fly-glow-menu li img {

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);

Latihan Menu 2 (Vertical Menu) :

CSS : Syawaluddin.ST Page 12

Latihan Menu 3 (Horizontal Menu)

CSS : Syawaluddin.ST Page 13

div#place-nav li:hover ul,

CSS : Syawaluddin.ST Page 14

Latihan page 1( membagi halaman menjadi 2 kolom).

CSS : Syawaluddin.ST Page 15

Latihan Page 2 ( membagi halaman menjadi 3 kolom).

#center{float:left; width: 577px; height:1000px;

CSS : Syawaluddin.ST Page 16

<link href="style.css" rel="stylesheet" type="text/css" />

CSS : Syawaluddin.ST Page 17

Penggunaan CSS untuk Tabel

maka hasilnya adalah sbb:

CSS : Syawaluddin.ST Page 18

hasilnya adalah sbb :

Penggunaan CSS untuk Form

CSS : Syawaluddin.ST Page 19

CSS untuk membentuk sudut lengkung

/* Property untuk membuat sudut lengkung : */

Gunakan <div class=”contoh></div>

CSS : Syawaluddin.ST Page 20

Anda mungkin juga menyukai