Panduann Lengkap HTML Dan CSS Bagian 2

Panduan HTML dan CSS bagian 2
A. Apa itu CSS

CSS (Cascading Style Sheets) merupakan kde pemrgraman untuk membuat tampilan pada
HTML. Selain menggunakan HTML para prgramer !ebsite sering menggunakan kde CSS
untuk mengedit sebuah halaman !ebsite. "aktr kemudahanlah yang di gunakan para
prgramer. Hanya mengedit CSS pada satu #ile maka seluruh knten yang ditampilkan akan
berubah.
CSS digunakan untuk mende#inisikan tampilan HTML di layar mnitr. $ari knten
gambar% teks% bilah sisi% !arna% backgrund% spasi penulisan% <h1> dan lain&lain. Pembuatan
CSS ini mendukung semua br!ser.
'. Struktur (de CSS
(de CSS dituliskan dengan struktur sebagai berikut)
menggunakan *ariable
body{ isi kode css}
konten { isi kode css}
nilai prperti tidak menggunakan tanda petik
body{
background:#eee;
font-family:Arial Arial Arial;
color:#fff;
margin:0 auto;
}
nama prperti bersi#at cas atau sensiti#
Pen+elasan kde CSS di atas)
*ariable,selectr ) bdy
prperti ) backgrund% #nt&#amily% margin% clr
*alue ) -eee% Arial% -###% . aut
C. Cara Memanggil CSS
/ntuk membuat halaman HTML agar tersusun rapih dan tidak terlalu pan+ang% simpan
kde,script yang telah dibuat dalam satu #lder yang sama dengan #ile HTML tersebut. Hal
ini memudahkan untuk pemanggilan kde CSS pada halaman HTML. (de yang digunakan
adalah sebagai berikut)
anduan !engka"" #$%! dan &'' bagian ( ) *ahyu 'etiyono
0link rel12stylesheets2 type12te3t,css2 hre#12nama4#ile.css25
Penempatann kde pemanggila CSS diantara kde <head> dan <+head>. Ada cara lain
untuk memanggil kde CSS pada HTML yakni)
<html>
<head>
<title>,ela-ar &''<+title>
<syle type=text/css>
body{
background:#eee;
font-family:ene!a" #rial;
dont-si$e:%&px;
color:#fff;
'
<+head>
<body>
.si /onten
<+body>
<+html>
$. 'eberepa Penulisan CSS
Ada beberapa cara penulisan CSS pada dkumen HTML% antara lin sebagai berikut)
6. Penulisan CSS bebas
Maksud dari penulisan bebas adalah penempatan CSS berada di antara berbagai kde tag
yang diinginkan. Sebagai cnth% perhatikan penulisan CSS di ba!ah ini.
<html>
<head>
body{
background:#eee;
dont-si$e:%&px;
color:#fff;'
gba(a){
text-decoration:underline;'
<+head>
<body>
<gba0ah> .si /onten yang bergaris ba0ah<+gba0ah>
<+body>
<+html>
2. Penggunaan CLASS pada CSS
<html>
<head>
body{
background:#eee;
dont-si$e:%&px;
color:#fff;'
*paragraf{
text-align:center;
color:#ffae++;
'
<+head>
<body>
<h1 clas12"aragraf2> .si /onten rata tengah dan
ber0arna<+h1>
<+body>
<+html>
7. Penggunaan 8$ pada CSS
<html>
<head>
body{
background:#eee;
font-si$e:%&px;
color:#fff;'
#content{
(id)t:,-+px;
background:#fff;
border:.px solid #&b&b&b;
margin:+ auto;
color:#ffa+++;
'
<+head>
<body>
<di3 id12content2>
<h1> .si /onten rata tengah dan ber0arna<+h1>
<+di3>
<+body>
<+html>
Apabila #ile CSS terpisah dengan kde HTML maka perlu kde untuk memanggil script
CSS tersebut. Sebagai cnth perhatiakan script di ba!ah ini.
<html>
<head>
<link rel=styles)eets )ref=style*css type=text/css>
<+head>
<body>
<di3 id12content2>
<h1> .si /onten rata tengah dan ber0arna<+h1>
<+di3>
<+body>
<+html>
Simpan script di atas dengan nama #ile inde3.html dan buat dkumen baru seperti
berikut.
body{
background:#eee;
font-si$e:%&px;
color:#fff;'
#content{
(id)t:,-+px;
background:#fff;
border:.px solid #&b&b&b;
margin:+ auto;
color:#ffa+++;
'
Simpan kde CSS di atas dengan nama #ile style.css. "ile ini di simpan,berlkasi pada
satu #lder dengan dkumen HTML yang telah dibuat.
9. "rmat margin untuk mengatur tata letak halaman !eb
/ntuk mengatur tata letak !eb dapat menggunakan margin dalam pi3el maupun em.
Penggunaan masing&masing ukuran margin maupun yang lainnya tergantung pada si
pembuat halaman !ebsite.
Penggunaan pi3el sering digunakan untuk pembuatan halaman !eb. Pi3el merupakan
ukuran dari pan+ang dan lebar 6 pi3e layar. (eakuratan ini membuat bentuk dan ukuran
yang tetap saat merubah ukuran halaman !eb. :amun untuk pengaturan teks%
penggunaan pi3el tidak akurat. (etika spasi yang dibuat untuk memisahkan paragra#
pertama dan kedua tetapi akan ada perubahan ukuran huru# seperti dari ;p3 ke 69p3.
Secara tmatis huru# berganti ukuran namun pemisah paragra# tetap pada ukurannya.
Penggunaan em ini adalah ukuran yang dipengaruhi leh ukuran sekitar. /kuran em
pada umumnya 6 em adalah 6< pi3el. Peruntukan ukuran ini bisa dirubah ketika de#ault
ukuran +uga diganti. Sebagai cnth ukuran de#ault pemisah antar baris teks adalah
7.p3% secara tmatis 6 em +uga bernilai 7. pi3el. (euntungan penggunaan em pada
aturan teks sangat baik. Perubahan ukuran huru# yang dirubah dan spasi antar paragra#
yang diatur pada ukuran em akan mengikuti secara de#ault. Sehingga spasi antar
paragra# berubah tidak tetap seperti penggunaan ukuran pi3el.
=. Latihan
/ntuk memperlancar dan paham tentang kde CSS% seringlah membuat dan eksperimen
untuk menghasilkan tampilan pada halaman !eb. >angan mengha#alkan kde CSS karena
akan men+adi beban% biarkanlah mngalir dengan sendirinya.
'uatlah menu sebuat halaman !eb.
<html>
<head>
<title>,ela-ar %embuat *eb<+title>
<link href14style5css4 rel14stylesheet4 ty"e14te6t+css4 +>
<+head>
<body>
<di3 class14menu7na34>
<ul>
<li><a href12#2>#ome<+a><+li>
<li><a href12#2>,log<+a><+li>
<li><a href12#2>$entang<+a><+li>
<li><a href12#2>/ontak<+a><+i>
<+ul>
<+di3>
<+body>
<+html>
$ari gambar di atas akan dibuat kde CSS untuk merubah tampilan agar lebih menarik pada
halaman !eb. Simpan dengan #ile nama style.css
5menu7na3 {
background: #1b1b1b;
margin:0 auto;
float: left;
"adding:0 0 0 (0"6;
height: (00"6;
0idth:(00"6;
o3erflo0: hidden;
}
5menu7na3 ul {
list-style:none;
0idth:80"6;
float:left;
"adding:0 10"6 10"6 10"6;
}
5menu7na3 ul li {
margin:0;
"adding:0 0 0 0;
float:none;
}
5menu7na3 ul li a {
dis"lay:block;
margin:0;
"adding:10"6 18"6;
color:#ffffff;
te6t-decoration:none;
font:normal 19"6 Arial: #el3etica: sans-serif;
}
5menu7na3 ul li5acti3e a: 5menu7na3 ul li a:ho3er {
dis"lay: block;
height: 10"6;
0idth: (00"6;
color:#1b1b1b;
te6t-decoration:none;
}
5menu7na3 ul li a:ho3er {
background: #(9aef9;
height: 18"6;
}
Hasil dari tampilan yang telah di buah dengan kde CSS di atas adalah)
Tentang Penulis
:ama ) ?AH@/ S=T8@A:A
(elahiran tahun ) 6BB7
'idang peker+aan ) $esain Cra#is
"acebk ) !!!.#acebk.cm,!ahyuninggusti
T!itter ) !!!.t!itter.cm,!hy4usetiyn
?ebsite ) http),,!!!.!eb!ahyu.!eb.id
http),,!eb!ahyu.!rdpress.cm
$eskripsi lain ) (esukaan dan hbi pada pemrgraman !ebsite membuat saya bisa
mengutak&atik. 'ukannya saya bisa namun karena suka.

Panduann Lengkap HTML Dan CSS Bagian 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Panduann Lengkap HTML Dan CSS Bagian 2

Uploaded by

Copyright:

Available Formats

Panduan HTML dan CSS bagian 2

A. Apa itu CSS

You might also like