Pendahuluan Pemrograman Web -5

MODUL PRAKTIKUM KE – 5

1. Teori

PENGENALAN CSS

5. 1. Definisi CSS

Cascading Style Sheet (CSS) adalah bahasa yang digunakan untuk mendefinisikan tampilan dan format sebuah dokumen yang ditulis dalam bahasa markup. Dalam hal ini CSS mendefinisikan bagaimana sebuah halaman web akan ditampilkan.

Ada 3 cara menggunakan CSS dalam sebuah dokumen HTML.

a. Inline Style, yaitu dengan menambahkan atribut style pada elemen yang akan diformat.

b. Embedded Style, yaitu dengan menuliskan style didalam tag <style> yang berada pada tag <head>.

c. External Style, yaitu menuliskan style dalam dokumen CSS yang terpisah dari HTML. Cara ini lebih direkomendasikan.

Perhatikan beberapa contoh berikut ini yang menunjukkan 3 cara di atas.

File : Democss01.html

//<head>

<title>Demo Stylesheet 02</title>

body {

width:720px;margin:100px auto;

}

h1 {

text-align :center;

}

p {

border: 1px solid;

font-family: arial;

padding: 5px;

}

</style>

<h1 style="text-align: center;">Spongebob Squarepants</h1>

<b> Spongebob Squarepants</b> , adalah tokoh utama di film

Spongebob Squarepants.

Dia tinggal di dalam rumah berbentuk nanas di laut, beralamat

di 124 conch Street, bikini bottom.

</p>

</body>

File : Democss02.html

</head>

<body>

<h1>Spongebob Squarepants</h1>

<p>

<b> Spongebob Squarepants</b> , adalah tokoh utama di film

Spongebob Squarepants.

Dia tinggal di dalam rumah berbentuk nanas di laut, beralamat

di 124 conch Street, bikini bottom.

</p>

</body>

Contoh untuk cara ke 3 hampir sama dengan yang ada di file Democss02.html. perbedaannya adalah isi tag <style> disimpan secara terpisah dalam file style.css. kemudian file style.css tersebut dipanggil di dalam tag <head> sebagai nilai atribut href pada tag <link> yang ada didalamnya.

<head>

<title> Demo Stylesheet 03</title>

</head>

5. 2. Aturan Penulisan

Secara umum CSS memiliki dua bagian penting, yaitu sebuah selector dan satu atau lebih deklarasi properti beserta nilainya. Berikut adalah salah satu contoh penulisan CSS.

Nilai

Selector ------------p { -------------- ------------------------
: 1px solid ;

Property-------------------------------- ------------------------

: arial ;

: 5 px;

}

Normalnya selector adalah sebuah elemen html. Contoh diatas tag <p> (elemen paragraf) digunakan sebagai selektor sehingga semua yang ada didalamnya akan berlaku style seperti yang dideklarasikan.

Selain elemen html selector dapat juga dibuat sendiri menggunakan id dan class.

Selector id digunakan untuk memformat style pada sebuah elemen tunggal dan unik. Selector ini menggunakan nilai dari atribut id elemen sebagai nama, yang diawali dengan tanda #.

File : style01.css

# {

:white;

: 50 px auto;

: 5 px;

: 1 px solid #ccc;

: 720 px;

: verdana;

: 11 px;

: #999;

}

Style di atas akan diterapkan pada elemen yang memiliki id elm01.

File : democss04.html

<h3>Patrick Star</h3>

<b>Patrick Star</b> adalah seekor bintang laut berwarna merah muda sahabat baik Spongebob.

Patrick merupakan hewan paling bodoh dibikini Bottom karena dia sering melakukan perbuatan yang konyol dan bodoh.

</div>

Berikutnya adalah selector class. Selector ini digunakan untuk memformat style untuk sekelompok elemen. Nama selector adalah nilai atribut class pada elemen yang diawali dengan tanda titik. Berbeda dari ID selector ini lebih sering digunakan untuk bermacam elemen.

File : style01.css

.gal {

: 2 px;

: 3 px;

: 1 px solid #ddd;

: 110 px;

left;

}

.gal img {

: 100 px;

}

Style di atas akan memformat elemen yang memiliki class gal dan semua elemen image pada class gal.

File : democss05.html

<h3>Galeri Karakter</h3>

</div>

Daftar Referensi

TAG	DESKRIPSI
Basic
<IDOCTYPE>	Tipe Dokumen
<html>	Mendefinisikan dokumen html
<body>	Body dokumen
<h1> s/d <h6>	HTML heading
<p>	Paragraf
<br/>	Menyisipkan baris baru
<hr/>	Haris horisontal
<\|--...-- >	Komentar
Format
<b>	Teks tebal
<code>	Teks kode komputer
<em>	Teks miring
<i>	Teks miring
<pre>	Preformatted teks
<small>	Teks kecil
<strong>	Teks tebal
<sub>	Teks subscript (cetak ke bawah)
<sup>	Teks superscript (cetak ke atas)
Form
<form>	Mendefinisikan form untuk input
<input/>	Elemen input
<textarea>	Elemen input teks banyak baris
<button>	Tombol
<select>	Select list (combo box)
<optgroup>	Mengelompokkan option list dalam select list
<option>	Daftar pilihan dari select list
<label>	Label untuk elemen input
Frame
<frame/>	Jendela (frame) dalam frameset
<frameset>	Mendefinisikan set frame
<iframe>	Inline frame
Image
<img/>	Elemen image
Link
<a>	Hyperlink / anchor
Lists
<ul>	Unordered list (list tidak terururt)
<ol>	Ordered list (list terurut)
<li>	Item dalam list
Tabel
<table>	Mendefinisikan tabel
<th>	Header tabel
<tr>	Baris tabel
<td>	Kolom tabel
Style
<style>	Mendefinisikan style dokumen
<div>	Mendefinisikan section (bagian) dokumen
<span>	Mendefinisikan section (bagian) dokumen
Meta info
<head>	Mendefinisikan informasi dokumen
<title>	Judul dokumen
<meta>	Metadata dokumen
Pemrograman
<script>	Mendefinisikan client-side script
<object>	Mendefinisikan objek yang disertakan dalam dokumen
<param/>	Mendefinisikan parameter objek

Keterangan : tag yang mengandung tanda slash berarti sebuah tag kosong.

Property	Description	CSS
Background	Mengatur semua style background dalam satu deklarasi	1
Background attachment	Mengatur background fix atau scroll	1
Background-color	Warna background elemen	1
Background image	Gambar background elemen	1
Background position	Mengatur posisi awal gambar background	1
Background repeat	Mengatur model perulangan	1

Property	Description	CSS
Border	Sets all the border properties in one declaration	1
Border bottom	Sets all the bottom border properties in one declaration	1
Border bottom color	Sets the color of the bottom border	1
Border bottom style	Sets the style of the bottom border	1
Border bottom width	Sets the width of the bottom border	1
Border color	Sets the color of the four border	1
Border left	Sets all the left border properties in one declaration	1
Border left color	Sets the color of the left border	1
Border left style	Sets the style of the left border	1
Border left width	Sets the width of the left border	1
Border right	Sets all the right border properties in one declaration	1
Border right color	Sets the color of the right border	1
Border right style	Sets the style of the right border	1
Border right width	Sets the width of the right border	1
Border style	Sets the style of the four borders	1
Border top	Sets all the top border properties in one declaration	1
Border top color	Sets the color of the top border	1
Border top style	Sets the style of the top border	1
Border top width	Sets the width of the top border	1
Border width	Sets the width of the four borders	1
Outline	Sets all the outline properties in one declaration	2
Outline color	Sets the color of an outline	2
Outline style	Sets the style of an outline	2
Outline width	Sets the width of an outline	2

Property	Description	CSS
Height	Sets the height of an element	1
Max height	Sets the maximum height of an element	2
Max width	Sets the maximum width of an element	2
Min height	Sets the minimum height of an element	2
Min width	Sets the minimum width of an element	2
Width	Sets the width of an element	1

Property	Description	CSS
Font	Sets all the font properties in one declaration	1
Font family	Specifies the font family for text	1
Font size	Specifies the font size of text	1
Font style	Specifies the font style for text	1
Font variant	Specifies whether or not a text should be displayed in a small caps font	1
Font weight	Specifies the weight of a font	1

Property	Description	CSS
List style	Sets all the properties for a list in one declaration	1
List style image	Specifies an image as the list item marker	1
List style position	Specifies if the list item markers should appear inside or outside the content flow	1
List style type	Specifies the type of list item marker	1

Property	Description	CSS
Margin	Sets all the margin properties in one declaration	1
Margin bottom	Sets the bottom margin of an element	1
Margin left	Sets the left margin of an element	1
Margin right	Sets the right margin of an element	1
Margin top	Sets the top margin of an element	1

Property	Description	CSS
Padding	Sets all the padding properties in one declaration	1
Padding bottom	Sets the bottom padding of an element	1
Padding left	Sets the left padding of an element	1
Padding right	Sets the right padding of an element	1
Padding top	Sets the top padding of an element	1

Property	Description	CSS
Bottom	Specifies the bottom position of a positioned element	2
Clear	Specifies which sides of an element where other floating elements are not allowed	1
Clip	Clips an absolutely positioned element	2
Cursor	Specifies the type of cursor to be displayed	2
Display	Specifies the type of box an element should generate	1
Float	Specifies whether or not a box should float	1
Left	Specifies the left position of a positioned element	2
Overflow	Specifies what happens if content overflows an elements box	2
Position	Specifies the type of positioning method used for an element (static, relative, absolute or fixed)	2
Right	Specifies the right position of a positioned element	2
Top	Specifies the top position of a positioned element	2
Visibility	Specifies whether or not an element is visible	2
Z-index	Sets the stack order of a positioned element	2

Property	Description	CSS
Border collapse	Specifies whether or not table borders should be collapsed	2
Border spacing	Specifies the distence between the borders of adjacent cells	2
Caption side	Specifies the placement of a table caption	2
Empty cells	Specifies whether or not to display borders and background on empty cells in a table	2
Table layout	Sets the layout algorithm to be used for a table	2

Property	Description	CSS
Color	Sets the color of text	1
Direction	Specifies the text direction/ writing direction	2
Letter spacing	Increases or decreases the space between characters in a text	1
Line height	Sets the line height	1
Text align	Specifies the horizontal alignment of text	1
Text decoration	Specifies the decoration added to text	1
Text indent	Specifies the indentation of the first line in a text block	1
Text transform	Controls the capitalization of text	1
Vertical align	Sets the vertical alignment of an element	1
White space	Specifies how white space inside an element is handled	1
Word spacing	Increases or decreases the space between words in a text	1

Satuan	Keterangan
%	Presentase
In	Inchi
Cm	Centimeter
Mm	Milimeter
Em	1 em = 1 x ukuran font sekarang
Ex	1 ex adalah x height dari sebuah font (x height biasanya setengah ukuran font)
Pt	Point (1 pt = 1/72 inchi)
Pc	Pica (1 pc = 12 points)
px	Pixels (titik di layar monitor)

Contact Us

Pendahuluan Pemrograman Web -5

Written By MDC Media on Saturday, 2 February 2013 | 23:25

0 komentar:

Labels

Popular Products

Contact Form