1.
CSS
CSS adalah kependekan dari
Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau
menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi,
merubah warna teks atau background dan lain sebagainya.
Gambar
1. Contoh Kode CSS
HTML & CSS : Tutorial
Fundamental dalam mempelajari HTML & CSS
Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Anda
dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu
menambahkan tanda <>
Jika tag HTML yang ingin diberi style memilik tersebut dengan
diawali tanda kress (#) #header dan jika tag yang diberi style memiliki Class,
dengan tanda titik (.) diikuti dengan nama class .artikel
Property dan value
Property adalah sifat-sifat yang ingin diterapkan pada selector,
seperti warna text, warna background, jarak antar elemen, garis pinggir dan
lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tanda
titik dua ( : ). Setiap property diakhiri dengan titik koma (;)
Penulisan CSS
Ada tiga cara penulisan kode
CSS, yaitu
1.
Inline
Penulisan
kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin
diberi style dengan menggunakan atribut style.
<h1 style=‚color : red; ‚> Judul Situs
</h1>
2. Internal
Metode CSS internal ditulis di dalam tag
style yang ditempatkan pada tag head.
<HTML>
<head>
<title>Judul HTML</title>
<style>
h1 {color
: red;}
</style>
</head>
......
3. External
Metode yang terakhir adalah dengan membuat file CSS dan
dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.
Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>
<head>
<title>Judul HTML</title>
<link rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
</head>
...
Atribut rel adalah informasi hubungan (relationship) dari
tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS
yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link
Properti
|
Keterangan
|
Cara penulisan
|
Color
|
Mengatur warna dari teks
|
Selector {color:nilai
warna}
|
Letter-spacing
|
Menambah ataupun
mengurangi spasi antar karakter dalam teks
|
Selector {letter-spacing:nilai
spasi;}
|
Line-height
|
Mengatur tinggi baris teks
|
Selector {line-height:nilai
text line-height;}
|
Text-align
|
Menentukan batas teks
secara horisontal
|
Selector {text-align:nilai
text-align;}
|
Text-
decoration
|
Menentukan dekorasi/hiasan
pada teks
|
Selector {text-decoration
: nilai text-decoration }
|
Text-indent
|
Menentukan jarak inden
dari baris pertama dalam teksblok
|
Selector { text-indent: nilai
indent}
|
Text-shadow
|
Menentukan efek bayangan
pada teks
|
Selector { text-shadow: koordinatx
koordinat Y nilai Warna Teks Bayangan;}
|
Text-transform
|
Mengatur huruf besar-huruf
kecil dari teks
|
Selector {text-transform:
nilai text transform}
|
Word-spacing
|
Menambah ataupun
mengurangi spasi antar kata dalam teks
|
Selector {word-spacing:nilai spasi;}
|
Border
|
Untuk memberikan garis
pinggir pada elemen, setidaknya
Ada tiga property yang
harus anda set, yaitu color, style dan width
|
Selector {Border color:nilai color;}
Selector {Border style:nilai style;}
Selector {Border width:nilai width;}
|
Font
|
Untuk mengatur huruf .Ada
tiga property yang harus anda set, yaitu family,color, style,weight
|
Selector {Font-color:nilai color;}
Selector {Font-style:nilai style;}
Selector {Font-weight:nilai weight;}
Selector {Font-family:jenis font;}
|
Image
|
Untuk menampilkan gambar
|
selector <img>
|
Video
|
Untuk menampilkan video
|
selector <video>
|
Contoh
<html>
<head>
<title>Halaman HTML</title>
<style type="text/css">
#headline1 {
background-image:url(mtk.jpg);
width:500px;
height:4px;
background-repeat: no-repeat;
background-position: left top;
padding-top:96px;
margin-bottom:10px;
}
h1
{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color:red;
text-decoration
: underline
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:orange;
Border: solid; Padding: 5px;
text-indent: 0.5cm;
text-transform: capitalize;
}
ac
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:30px;
color:blue;
Background-color: #ccff66;
word-spacing: 30px;
text-decoration : overline;
}
cc{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
color:black;
letter-spacing: -2px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div
id="headline1"></div>
<h1>Bengawan
Solo Cipt Gesang</h1>
<p> Bengawan Solo, Riwayatmu ini<br>
Sedari dulu jadi perhatian
insani<br>
Musim kemarau, tak seb'rapa
airmu<br>
Di musim hujan air meluap
sampai jauh</p>
<ac>Mata airmu dari Solo,
Terkurung gunung serbu<br>
Air meluap sampai jauh,
Akhirnya ke laut</br></ac>
<cc>Itu perahu, riwayatmu dulu<br>
Kaum pedagang slalu naik
itu perahu</cc></br>
<video controls="controls"
style="display:block; margin: 0 auto; width:400px ; heigth:400;" >
<source src="tutor.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
0 komentar:
Posting Komentar