Css

CSS
CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan kita untuk mendesain tampilan
dokumen HTML. HTML bisa dikendalikan oleh CSS, CSS bisa berada di luar file HTML atau menyatu dengan file
HTML. Jadi pada dasarnya CSS adalah sebuah perintah yang mampu berjalan diantara tag HTML Jika kita memiliki
banyak file HTML, maka kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka
semua file HTML yang berhubungan pada file CSS tersebut akan berubah.
Syntax CSS.
Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.
selector {
property : value;
}
1. Selector adalah elemen HTML yang akan diberikan style.

2. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan
3. Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
Arti kode CSS diatas

Elemen body (<body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abuabu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri
tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan
petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS
sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal
Times New Roman.
Macam macam selector
Class : selector yang dapat digunakan berulang pada tag HTML manapun. Untuk membuat class dapat diberi nama
apapun secara bebas namun diawali dengan karakter titik.
.gaya {
color: #009900;
font-family: Georgia, sans-serif;
}
Tag : digunakan untuk penyesuaian ulang tag HTML tanpa membuat class baru. Perubahan yang dilakukan akan
mempengaruhi tag yang sama di dalam dokumen. Penamaannya cukup nama TAG HTML.
h1 {
color: #009900;
font-family: Arial, sans-serif;
}
Advanced : selector ini digunakan untuk mengatur tampilan pada tag dengan ID tertentu, dan hanya dapat digunakan
1 kali pada dokumen yang sama. Untuk penamaan advanced ID dapat menggunakan apapun namun diawali
tanda pagar #.
Kombinasi Selector
Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan
selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contohnya :
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Arial, sans-serif;
}
Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.
Memberikan Komentar pada CSS
Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:
/* Ini adalah komentar */
Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS
tapi tidak ingin teks tersebut diproses.
Cara menggunakan CSS ada 3 yaitu External Style Sheet, Internal Style Sheet dan Inline Style Sheet.
1. External Style Sheet
External Style Sheet, dari kata external saja sudah bisa ditebak artinya, yang berarti di luar, maksudnya file CSS
terpisah dengan file HTML istilah ini sering disebut dengan Link Style Sheet. Nah cara memanggil CSSnya adalah
<link rel=stylesheet type=text/css href=namafile.css>
Baris di atas diletakan di dalam tag <head> </head>. Maksud dari baris di atas adalah :
<link = merupakan tag pembuka dan diakhiri dengan tanda >
Rel= stylesheet fungsinya menyatakan bahwa halaman ini akan dikenai efek stylesheet
Type=text/css menunjukkan bahwa file yang akan dipanggil adalah file CSS
Href= namafile.css menunjukan alamat dan nama file CSS yang dipanggil.
Latihan 1
Buat file berikut
body {
color : black;
background: green;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Body.c
ss
Buat file berikut
Latcss1.ht
ml
<html>
<head>
<title>BumenNet Online</title>
<link rel=stylesheet type=text/css href=body.css>
</head>
<body>
<h4>ini adalah latihan css pertama saya. Jadi saya haruz sukses !!!!!!</h4>
</body>
</html>
Jika dijalankan di browser maka hasilnya akan tercetak background web berwarna hijau dan text ini adalah latihan css
pertama saya. Jadi saya haruz sukses !!!!!! Akan tercetak dengan huruf Verdana berwarna hitam.
2. Internal Style Sheet
Internal Style Sheet sering disebut juga dengan Embeding Style Sheet adalah sebuah metode penulisan CSS pada
halaman HTML. Dokument tersebut diletakkan diantara tag <head>.</head>.
Latihan 2 :
Buat file berikut
<html>
<head>
Latcss2.ht
ml
<style type=text/css>
body {
color : black;
background: green;
}
</style>
</head>
<body>
<h4> ini adalah latihan css kedua saya. Jadi saya haruz lebih sukses !!!!!!</h4>
</body>
</html>
Dari contoh script di atas bisa dilihat penulisan Internat Style Sheet CSS dimulai dengan menggunakan <style> dan
diakhiri dengan </style>
3. Inline Style Sheet
Inline Style Sheet adalah metode penulisan CSS yang langsung diletakkan pada element HTML.
Latihan 3 :
<html>
<head>
Latcss2.ht
ml
</head>
<body style=color:black;background:green;font-family:Verdana, Arial, Helvetica, sans-serif>
<h4> ini adalah latihan css ketiga saya. Jadi saya haruz lebih sukses lagi !!!!!!.</h4>
</body>
</html>
Latihan 4. Membuat style Class

Buat file berikut css berikut
.judul {
gaya.css
font-size: 16px;
color:#FF00FF;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
.isi {
font-size: 13px;
color:#0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
}
.penutup {
font-size:13px;
color:#FF0000;
font-family:Arial, Helvetica, sans-serif;
}
Buat file HTML berikut

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="gaya.css">
</head>
<body>
<font class="judul">Halo dunia</font>
<p class="isi">Macam macam selector dalam CSS</p>
<ul class="isi" type="disc">
<li>Class</li>
<li>Tag</li>
<li>Advance</li>
</ul>
<font class="penutup">Terimakasih</font>
</body>
</html>
webgaya.ht
ml
Latihan 5. Membuat style Tag

Buat file berikut css berikut
h1 {
Gaya2.css
font:Arial, Helvetica, sans-serif;

color:#FF0000;
}
p {
font-family:Arial, Helvetica, sans-serif;
color:#0000FF;
background-color:#00CCFF;
}
ul {
font-size:14px;
color:#0000FF;
}
font {
font-size:14px;
font-weight:bold;
font-style:italic;
}

<html>
webtag.htm
l
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="csstag.css">
</head>
<body>
<h1>Cara mengganti style tag</h1>
<p>digunakan untuk penyesuaian ulang tag HTML tanpa membuat class baru. Perubahan yang
dilakukan akan mempengaruhi tag yang sama di dalam dokumen.
Penamaannya cukup nama TAG HTML.</p>
<p>digunakan untuk penyesuaian ulang tag HTML tanpa membuat class baru. Perubahan yang
dilakukan akan mempengaruhi tag yang sama di dalam dokumen.
Penamaannya cukup nama TAG HTML. contoh :</p>
<ul type="disc">
<li>H1</li>
<li>H2</li>
<li>H3</li>
<li>H4</li>
<li>P</li>
<li>UL</li>
</ul>
<font>Terimakasih</font>
</body>
</html>
Membuat style dengan advance. Buat file css berikut
#halaman {/* "id" dilambangkan dengan "#" */

width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
advan.css
height: 300px;
float: right;
<html>
background: #ADD8E6;
<head>
}
<title>Titel websiteku</title>
webadvan.c
ss
<link
href="advan.css" rel="stylesheet" type="text/css">
.footer{
</head>
height: 40px;
<body>
background: #8FBC8F;
<div id="halaman">
clear: both;
}
<div id="judul">
<h1 class="judul">Disini judul websiteku</h1>

.judul {
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
color: Red;
</div>
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
<div id="konten">
<div class="kiri">

.sub-judul {
<p>Disini navigasi bagian kiri</p>
color: #ff0; <table cellspacing="0" align="center">
<tr><td>menu
padding: 0 10px
10px;
<tr><td>menu
}
<tr><td>menu
p{
<tr><td>menu
1</td></tr>
2</td></tr>
3</td></tr>
4</td></tr>
padding-left: </table>
10px;/* penulisan untuk satu sisi saja */
}
</div>

<div class="tengah">
<p>Disini konten websiteku</p>
</div>
<div class="kanan">
<p>Disini navigasi bagian kanan</p>
</div>
</div>

<div class="footer">
<p>Disini Footer websiteku</p>
</div>
</div>
</body>
</html>

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

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

CSS

1. Selector adalah elemen HTML yang akan diberikan style.

Arti kode CSS diatas

Buat file berikut

Latihan 4. Membuat style Class

Buat file HTML berikut

Latihan 5. Membuat style Tag

font:Arial, Helvetica, sans-serif;

Buat file HTML berikut

Membuat style dengan advance. Buat file css berikut

#halaman {/* "id" dilambangkan dengan "#" */

<div id="judul">

<h1 class="judul">Disini judul websiteku</h1>

<div id="konten">

<div class="kiri">

</div>

</div>

Anda mungkin juga menyukai