5 CSS

MODUL KULIAH
PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH
Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester
Kelas PKKP
Dosen Jefri Rahmadian S.Kom
Pertemuan : 5 (Lima) Waktu : Sabtu…….. 2012
Modul 5 (Lima)
Topik Pengenalan CSS

Sub Topik Dasar-dasar CSS
Materi  Syntax CSS

 Pengaturan CSS
Tujuan Mahasiswa memahami apa yang dimaksud dengan CSS

dan mengetahui cara penerapannya serta mampu
memodifikasi dan menerapkan penggunaan CSS
Pengenalan CSS
CSS singkatan dari Cascading Style Sheets, styles yang mendefinisikan bagaimana
menampilkan elemen HTML. CSS mendefinisikan cara elemen HTML yang harus
ditampilkan dan merupakan tempat dimana anda mengontrol dan memanage style-style
yang ada. Styles biasanya disimpan dalam file eksternal css. External style sheet
memungkinkan Anda untuk mengubah tampilan dan tata letak semua halaman dalam
sebuah situs web, hanya dengan mengedit satu file tunggal.
Syntax CSS
Aturan CSS memiliki dua bagian utama yaitu selector, dan satu atau lebih declaration.
Contoh :
h1 {color:red;font-size:12px;}
atau
p {color:red;text-align:center;}
h1 = Selector
color:red = Declaration
font-size:12px;} = Declaration
color = Property
red = Value
font-size = Property
12px = Value
 Selector biasanya elemen HTML yang ingin diberi style.

 Setiap deklarasi terdiri dari properti (property) dan nilai (value).
 Properti ini merupakan style atribut yang ingin di ubah. Setiap properti memiliki nilai
(value).
 CSS deklarasi selalu diakhiri dengan tanda titik koma, dan kelompok deklarasi
dikelilingi oleh kurung kurawal
Untuk membuat CSS lebih mudah dibaca, deklarasi dapat diletakan pada setiap baris,
seperti contoh penulisannya dibawah ini:
h1
{
color:red;
font-size:12px;
}
Contoh Penggunaannya Seperti dibawah :
<html>
<head>
<style type="text/css">
p
{
text-align:center;
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p>Ini contoh penggunaan text css.</p>

</body>
</html>
Menambahkan komentar pada CSS

Komentar digunakan untuk menjelaskan kode yang dibuat, dan dapat membantu ketika
akan mengedit source code di kemudian hari. Komentar diabaikan oleh browser dan tidak
akan ditampilkan. Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/",
Contoh penunya :
/*Ini isi komentar*/

p
{
text-align:center;
/*Ini komentar yang lain*/
color:black;
font-family:arial;
}
Id dan class Selectors

 Penggunaan Id
Selain pengaturan style untuk elemen HTML, CSS memungkinkan Anda untuk menentukan
penyeleksi sendiri yang disebut "id" dan "class". Selector id digunakan untuk menentukan
style untuk elemen tunggal yang unik. Id selector menggunakan atribut id elemen HTML,
dan didefinisikan dengan "#". Aturan style dibawah ini akan diterapkan pada elemen dengan
id = "para1"
Contoh penggunaanya :
<html>
<head>
#teks1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="teks1">Teks dengan penggunaan Id</p>
<p>Teks ini tidak dipengaruhi oleh style.</p>
</body>
</html>
 Penggunaan Class Selector

Class Selector digunakan untuk menentukan style untuk sekelompok elemen. Berbeda
dengan selector id, Class Selector yang paling sering digunakan pada beberapa elemen.
Hal ini memungkinkan Anda untuk menetapkan style tertentu untuk elemen HTML yang
banyak dengan class yang sama. Class Selector menggunakan atribut class HTML, dan
didefinisikan dengan " . ". Pada contoh di bawah ini, semua elemen HTML dengan class =
"center" akan center-aligned
Contoh penggunaan :
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Anda juga dapat menentukan bahwa hanya HTML tertentu elemen harus dipengaruhi oleh
kelas. Pada contoh di bawah, elemen p semua dengan class = "center" akan center-aligned
Contoh penggunaan :
<html>
<head>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Text ini tidak berpengaruh dengan style</h1>
<p class="center">Paragraph ini akan center-aligned.</p>
</body>
</html>
 Penggunaan Selector bebas

Dengan menggunakan selector bebas kita mempunyai kebebasan dalam menggunakan
nama untuk selector tersebut.
Contoh penggunaanya :
<html>
<head>
<title> Selector </title>
gbawah{text-decoration: underline;}
</style>
</head>
<body>
<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah>
</body>
</html>
Cara menyisipkan CSS

Ada tiga cara untuk memasukkan style sheet:
 Inline style
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya
cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya
akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML
yang lain.
Contoh Penggunaan :
<html>
<body>
<p
style="color:blue;margin-left:20px">Ini adalah sebuah paragraph.
</p>
</body>
</html>
 Internal style sheet
Internal style sheet dapat digunakan jika CSS dan dokumen HTML berada dalam satu
file. Pendeklarasian CSS direkomendasikan diletakkan diantara tag <head> dan
</head>. Elemen head adalah wadah untuk semua elemen head. Elemen di dalam
<head> dapat termasuk script, menginstruksikan browser di mana bisa menemukan
style sheet, memberikan informasi. Cara penulisannya harus diawali dengan tag
<style> dan diakhiri dengan tag </style>.
Contoh penggunaan :
<html>
<head>
<style>
p
{
margin-left : 10px;
margin-top : 2px;
margin-bottom : 2px;
color:red;
}
</style>
</head>
<body>
<p>hallo semua</p>
</body>
</html>
Pendeklarasian CSS selalu diawali dengan tag <style> dan diakhiri dengan tag
</style>, semua kode CSS diletakkan diantara tag <style> dan </style>
 External style sheet

Sebuah external style sheet idealnya adalah ketika style diterapkan pada banyak
halaman. Dengan eksternal style sheet, Anda dapat mengubah tampilan sebuah situs
web seluruhnya dengan mengubah satu file. Setiap halaman harus link ke style sheet
menggunakan tag <link>. Tag <link> masuk ke dalam bagian head
Contoh penulisan
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 Attribut rel="stylesheet" mendefinisikan bahwa dokumen hanya berfungsi

sebagai style
 Attribut type="text/css" mendefinisikan bahwa dokumen berformat css
 Attribut href="" mendefinisikan letak/source dari file CSS
Sebuah style sheet eksternal dapat ditulis dalam editor teks apapun. File tidak boleh
mengandung tag html. style sheet Anda harus disimpan dengan ekstensi .css. Contoh
dari sebuah file style sheet adalah sebagai berikut :
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("pesawt.jpg");}
Contoh Penggunaan :
Berikut adalah isi file ext.css
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
Berikut adalah file html
<html>
<head>
<link rel="stylesheet"
type="text/css" href="ext.css" />
</head>
<body>
<h1>Header ini 36 pt</h1>

<h2>Header ini warna biru</h2>
<p>Paragraph ini left marginnya 50 pixels</p>
</body>
</html>
Format text CSS

Contoh penggunaan css untuk format text :
<html>
<head>
<title>Format Text </title>
<style ="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>Header 1,Di tengah</h1>
<h2>Header 2 , Di kiri</h2>
<h3>Header 3 ,Di kanan</h3>
</body>
</html>
Pengaturan Font
 Font Family
Generik family Font family Deskripsi
Serif Times New Roman font Serif memiliki garis-garis kecil di berakhir pada
beberapa karakter
Georgia
Sans-serif Arial "Sans" berarti tanpa - font ini tidak memiliki garis-
garis di ujung karakter
Verdana
Monospace Courier New Semua karakter monospace memiliki lebar yang
sama
Lucida Console
 Font Size
Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus
menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau
judul terlihat seperti paragraf. Selalu gunakan tag HTML yang tepat, seperti <h1> - <h6>
untuk judul dan <p> untuk paragraf.
Nilai font-size bisa menjadi ukuran absolut, atau relatif.
 Absolute size:
- Mengatur teks ke ukuran yang ditetapkan
- Tidak mengizinkan user untuk mengubah ukuran teks dalam semua browser
(buruk karena alasan aksesibilitas)
- Ukuran Mutlak berguna ketika ukuran fisik dari output diketahui
 Relatif size:
- Mengatur ukuran relatif terhadap elemen yang disekitarnya
- Memungkinkan user untuk mengubah ukuran teks dalam browser
 Font Style
Properti font-style banyak digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai:
 normal - Teks ditampilkan biasa
 italic - teks akan ditampilkan dalam huruf miring
 oblique - teks ini "condong" (miring sangat mirip dengan miring, tapi jarang
digunakan) hampir sama dengan italic
Contoh penggunaan css untuk pengaturan font :
<html>
<head>
<title>pengaturan font</title>
<style ="text/css">
p.italic
{
font-size :200 % ;
font-style: italic;
}
p.normal{
font-family : verdana ;
font-style: normal;
}
p.oblique {font-style: oblique}
</style>
</head>
<body>
<p class="italic">menggunakan style italic</p>
<p class="normal">menggunakan style normal </p>
<p class="oblique">menggunakan style oblieque</p>
</body>
</html>
Nilai Property
Nilai Deskripsi
normal Browser menampilkan gaya font normal. Ini adalah default
italic Browser menampilkan font style italic
oblique Browser menampilkan font style miring
inherit Menentukan gaya font yang harus diwariskan dari elemen induk
Pengaturan Tabel
Contoh Penggunaan :
<html>
<head>
<title>pengaturan padding table</title>
td.kiri{
padding-top: 2cm;
padding-right: 2cm;
padding-bottom: 2cm;
padding-left: 2cm ;
background-color : #f0f8ff;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="kiri">padding dengan jarak 2cm dari
kiri,atas,kanan,dan bawah</td>
<td>tanpa jarak </td>
</tr>
</table>
</body>
</html>
Pengaturan Background
properti background CSS digunakan untuk mendefinisikan efek latar belakang dari elemen.
Property Background CSS :

background Mengatur semua properti latar dalam satu deklarasi
background- Menentukan apakah gambar latar belakang tetap atau gulungan
attachment dengan sisa halaman
background-color Mengatur warna latar belakang suatu elemen
background-image Mengatur gambar latar belakang untuk elemen
background-position Mengatur posisi awal dari gambar latar belakang
background-repeat Mengatur bagaimana gambar latar belakang akan diulangi
 background
<html>
<head>
body
{
background: #00ff00 url('smile.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>Ini adalah Text</p>
</body>
</html>
 background-color
<html>
<head>
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>ini adalah paragraph.</p>
</body>
</html>
 background-image
<html>
<head>
body {background-image:url('smile.gif');}
</style>
</head>
<body>
<h1>Selamat belajar CSS</h1>
</body>
</html>
 background-repeat
<html>
<head>
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p>repeat-y background akan mengulang secara vertical.</p>
</body>
</html>
 background-attachment
<html>
<head>
body
{
background-image:url('smile.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p> background-image akan fixed pada tempatnya.</p>
</body>
</html>
 background-position
<html>
<head>
body
{
background-image:url('smile.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<p><b>Note:</b>
Untuk bekerja pada Firefox dan Opera, properti background-
attachment harus diset ke "fixed".</p>
</body>
</html>

5 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

5 CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Pertemuan : 5 (Lima) Waktu : Sabtu…….. 2012

Topik Pengenalan CSS

Materi  Syntax CSS

Tujuan Mahasiswa memahami apa yang dimaksud dengan CSS

 Selector biasanya elemen HTML yang ingin diberi style.

Contoh Penggunaannya Seperti dibawah :

<p>Ini contoh penggunaan text css.</p>

Menambahkan komentar pada CSS

/*Ini isi komentar*/

Id dan class Selectors

 Penggunaan Class Selector

 Penggunaan Selector bebas

Cara menyisipkan CSS

 External style sheet

 Attribut rel="stylesheet" mendefinisikan bahwa dokumen hanya berfungsi

<h1>Header ini 36 pt</h1>

<p>Paragraph ini left marginnya 50 pixels</p>

Format text CSS

Contoh penggunaan css untuk pengaturan font :

normal Browser menampilkan gaya font normal. Ini adalah default

italic Browser menampilkan font style italic

oblique Browser menampilkan font style miring

Property Background CSS :

Anda mungkin juga menyukai

/Ini isi komentar/