Memberikan Style ke dalam Sebuah Kata
 |
| CSS |
Kata akan lebih menarik jika kata tersebut memiliki warna yang indah, bentuk yang menarik. Dalam dunia Web untuk memberikan style ke dalam sebuah kata digunakanlah CSS. Dalam menggunakan CSS saya biasanya menggunakan metode Inline Style Sheet atau Internal Style Sheet.
Untuk belajar CSS, Anda harus menguasai HTML.
Membuat HTML dengan Metode Inline Style Sheet dan Internal Style Sheet
A. Memberikan Warna
a. Inline Style Sheet
<html>
<head><title>Belajar CSS</title></head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 style="color:red; text-align:center;">Taufan Prihantoro</h1>
<h1 style="color:green;">Taufan Prihantoro</h1>
<h1 style="color:red; text-align:center;">Taufan Prihantoro</h1>
<h1 style="color:green;">Taufan Prihantoro</h1>
</body>
</html>
b. Internal Style Sheet
<html>
<head>
<style>
body
{
color:blue;
}
h1.taufan
{
color:red;
text-align:center;
}
h1.prihantoro
{
color:green;
}
</style>
<title>Belajar CSS</title>
</head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 class="taufan">Taufan Prihantoro</h1>
<h1 class="prihantoro">Taufan Prihantoro</h1>
</body>
</html>
<head>
<style>
body
{
color:blue;
}
h1.taufan
{
color:red;
text-align:center;
}
h1.prihantoro
{
color:green;
}
</style>
<title>Belajar CSS</title>
</head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 class="taufan">Taufan Prihantoro</h1>
<h1 class="prihantoro">Taufan Prihantoro</h1>
</body>
</html>
B. Memberikan Garis
a. Inline Style Sheet
<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-decoration:underline;">Teks bergaris bawah</h1>
<h1 style="text-decoration:overline;">Teks bergaris atas</h1>
<h1 style="text-decoration:line-through;">Teks dicoret</h1>
<h1 style="text-decoration:overline;">Teks bergaris atas</h1>
<h1 style="text-decoration:line-through;">Teks dicoret</h1>
</body>
</html>
b. Internal Style Sheet
<html>
<head>
<style>
h1.bawah
{
text-decoration:underline;
}
h1.atas
{
text-decoration:overline;
}
h1.dicoret
{
text-decoration:line-through;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1 class="bawah">Teks bergaris bawah</h1>
<h1 class="atas">Teks bergaris atas</h1>
<h1 class="dicoret">Teks dicoret</h1>
</body>
</html>
C. Huruf Awal Teks Berhuruf Kapital
a. Inline Style Sheet
<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-transform:capitalize;">huruf awal di seluruh teks ini berhuruf besar</h1>
</body>
</html>
b. Internal Style Sheet
<html>
<head>
<style>
h1
{
text-transform:capitalize;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1>huruf awal di seluruh teks ini berhuruf besar</h1>
</body>
</html>
D. Memberikan Background Pada Teks
a. Inline Style Sheet
<html>
<head><title>Belajar CSS</title></head>
<body>
<p style="background:yellow;">Taufan Prihantoro</p>
<p style="background:lightblue;">Taufan Prihantoro</p>
<p style="background:lightblue;">Taufan Prihantoro</p>
</body>
</html>
b. Internal Style Sheet
<html>
<head>
<style>
p.yellow
{
background:yellow;
}
p.birumuda
{
background:lightblue;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="yellow">Taufan Prihantoro</p>
<p class="birumuda">Taufan Prihantoro</p>
</body>
</html>
E. Margin dan Padding
<html>
<head>
<style>
p.margin
{
margin:50px;
background:lightgreen;
}
p.padding
{
padding:50px;
background:lightblue
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="margin">Teks dengan margin 50px</p>
<p class="padding">Teks dengan padding 50px</p>
</body>
</html>
F. Memberikan Efek Shadow
<html>
<head><title>CSS</title>
<style>
h1
{
text-shadow:15px 15px 15px blue ;
text-align:center;
font-size:100px;
color:red;
}
</style>
</head>
<body>
<h1>Taufan Prihantoro</h1>
</body>