Materi CSS | Catatan Kecil

(1)

(2)

Styles sheets define How HTML elements are to be displayed,

just like the font tag and the color attribute in HTML 3.2.

Styles are normally saved in external .css files. External style

sheets enable you to change the appearance and layout of all

the pages in your we, just by editing one single CSS document

CSS is a breakthrough in Web design because it allows

developers to control the style and layout of multiple Web

pages all at once. As a web developer you can define a style

for each HTML element and apply it to as many web pages as

you want. To make a global change, simple change the style,

and all elements in the Web are updated automatically

ABOUT CSS

(3)

Syntax CSS dibentuk dari tiga bagian: selector, property dan

value

CSS SYNTAX

selector {property: value}

selector

: tag/element HTML yang ingin didefinisikan.

property

: atribut yang ingin diubah dan case sensitive.

value

: nilai dari atribut.

Property dan value biasanya dipisahkan oleh titik dua dan

diapit oleh kurung kurawal.

Contoh:

(4)

Jika value terdiri dari dua kata atau lebih, gunakan tanda petik

dua

p { font-

fa il : Ti es New Ro a }

Jika Anda ingin menentukan lebih dari satu property, Anda

harus memisahkan tiap-tiap property dengan titik koma.

p { text-align: center; color : red}

Penulisan di atas dapat juga ditulis dalam bentuk yang mudah

dibaca seperti berikut.

p

{

font-family: calibri;

text-align: center;

color : red

(5)

Grouping

Anda dapat mengelompokkan beberapa selector dengan

property dan value yang sama. Tiap-tiap selector dipisahkan

oleh koma.

h1, h2, h3, h4

{

color: green

}

The class selector

Dengan class selector, anda dapat mendefinisikan style yang

berbeda untuk tipe yang sama dari elemen HTML.

(6)

p.kanan {text-align: right}

p.tengah {text-align: center}

Dalam dokumen HTML Anda menuliskan sebagai berikut:

<p lass=

kanan

>

Paragraf ini menggunakan rata kanan</p>

<p lass=

tengah

>

Paragraf ini menggunakan rata tengah</p

id selector

Anda dapat mendefinisikan style untuk elemen HTML dengan

id selector. Id selector didefinisikan dengan menggunakan

tanda #.

Contoh:

(7)

Memberikan Komentar

Komentar digunakan untuk memberi keterangan/penjelasan

dari kode yang Anda buat. Komentar ini membantu Anda

dalam mengedit kode yang Anda buat. Untuk membuat

komentar dimulai dengan tanda

/*

dan diakhiri dengan

tanda

*/

Contoh:

/* mengatur tag p pada HTML */

P

{

text-align: center;

/* mengatur warna */

color: red;

(8)

Aturan Penulisan CSS

Ada tiga jenis penulisan CSS, yaitu:

1. External Style Sheet

CSS ditulis diluar file HTML. File yang terbuat disimpan

dalam format .css

contoh:

<head>

<link rel

=

stylesheet

t pe= te t/

css

href

= desai . ss />

</head>

2. Internal Style Sheet

(9)

3. Inline Styles

Kode CSS ditulis langsung dalam tag HTML.

Contoh:

<p st le= olor: red; argi

-

left : 20p >

teks HTML yang akan ditampilkan

</p>

Contoh:

<head>

<st le t pe= te t/

css

>

hr {color: red}

p {margin-left: 20px}

body {background-image: url

i ages/ga

ar.gif }

(10)

Body

{

background: #125084;

color: white;

}

H1

{

color: #00ff00;

}

p.versi2

{

color: #e2ff5a;

font-family: calibri;

font-size: 24px;

}

efek.css

<HTML>

<HEAD>

<TITLE>Desain Web Dengan CSS</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css"

HREF="efek.css">

</HEAD>

<BODY>

<H1>MEMPERINDAH TAMPILAN DENGAN CSS</H1>

<P>Latihan Desain Web Dengan CSS. <br>

Paragraf ini merupakan paragraf biasa. Perhatikan

bahwa warna tulisan adalah putih. <br>

Secara default untuk halaman web ini warnanya

diatur sesuai dengan selector body pada file

efek.css</p>

<p class="versi2">Paragraf ini adalah paragraf

dengan class "versi2" yang diatur

oleh file efek.css.</p>

</BODY>

</HTML>

Latihan1.html

(11)

<HTML>

<HEAD>

<TITLE>Mendesain Web dengan CSS</TITLE>

body {

color: white;

background: green;

font-family : arial;

}

</STYLE>

</HEAD>

<BODY>

<H1>BROWSER</H1>

<P>Browser adalah aplikasi untuk mengakses halaman web.</p>

Halaman ini didesain dengan menggunakan CSS.

</BODY>

</HTML>

(12)

<HTML>

<HEAD>

<TITLE>Desain Web</TITLE>

</HEAD>

<BODY style="color: white;

background: green;

font-family : arial;" >

<H1 style="color: yellow;">BROWSER</H1>

<P style="color: red; font-family: calibri; font-size: 24px;">Tulisan ini

menggunakan CSS dengan gaya penulisan inline style sheet</p>

paragraf ini menggunakan property yang didefinisikan di dalam tag body.

</BODY>

</HTML>

(13)

MEMBUAT BACKGROUND PADA CSS

<TITLE>Menggunakan Background Warna</TITLE>

<STYLE type="text/css">

body {background-color : #99CCFF} h2 {background : green}

h3 {background-color : transparent} p {background : rgb(240,248,255)} </STYLE>

</HEAD>

<BODY>

<h2>Header 2, Background Hijau</h2>

<h3>Header 3, Bakground Transparan</h3> <p>Background pada paragraph</p>

</BODY> </HTML>

1. BACKGROUND WARNA

(14)

MEMBUAT BACKGROUND PADA CSS

Properties Value Keterangan

background-image url Alamat gambar yang dituju

background-repeat repeat repeat-x repeat-y no-repeat

Diulang dalam halaman Diulang sumbu x

Diulang sumbu y Tampil 1 gambar

Background-position top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

Atas kiri halaman Atas tengah halaman Atas kanan halaman tengah kiri halaman Pusat halaman

tengah kanan halaman bawah kiri halaman bawah tengah halaman bawah kanan halaman Pakai nilai %

(15)

<TITLE>Menggunakan Background Gambar</TITLE>

<STYLE type ="text/css"> BODY

{

background-image: url(“bg.jpg"); background-repeat: repeat-x;

} </STYLE>

</HEAD>

<BODY>

Background Berulang pada Sumbu X </BODY>

</HTML> Latihan5.html

(16)

<TITLE>Menggunakan Background Gambar</TITLE>

<STYLE type = "text/css"> BODY

{background-image:url (“logo.jpg"); background-repeat: no-repeat;

background-position: center center; }

</STYLE>

</HEAD>

<BODY>

Background di Pusat Halaman </BODY>

</HTML> Latihan6.html

(17)

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

Margin Properties

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

(18)

PENGATURAN HALAMAN MENGGUNAKAN MARGIN

<TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css">

BODY {

margin-top : 1cm; margin-right : 2cm; margin-bottom : 1cm; margin-left : 2cm; }

</STYLE> </HEAD>

<BODY>

Pengaturan Batas Halaman (atas 1cm, kanan 2cm,bawah 1cm, kiri 2cm)

(19)

PENGATURAN HALAMAN MENGGUNAKAN PADDING

<TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css">

BODY {

padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; }

</STYLE> </HEAD>

<BODY>

Text ini berada di tengah halaman , karena di lakukan pengaturan halaman

dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%.

(20)

FORMAT TEKS

Properties

Value

Keterangan

Pengaturan warna

color

green, dll

Pengaturan Spasi (jarak antar karakter)

letter-spacing

Normal

Length

Ukuran standar HTML

Ukuran panjang (cm,px)

Perataan Text

text-align

Left, right, center, justify

text-decoration

none

underline

overline

line-through

blink

Bentuk standar

Bergaris bawah

Bergaris atas

Text dicoret

Text berkedip

Pengaturan text indentasi

text-indent

length

%

Dengan cm, px

Dengan persentase

Pengubahan Bentuk Karakter

(21)

<TITLE>Format Text </TITLE> <STYLE type ="text/css">

p {color : green; letter-spacing: 0.5cm} h1 {letter-spacing: -2px}

h2 {text-align: center} h3 {text-align: left}

h4 {text-align: right}

</STYLE> </HEAD> <BODY>

<p>Pengaturan Spasi Pada Paragraph </p> <h1>Header 1</h1>

<h2>Header 2, Di tengah</h2> <h3>Header 3, Di kiri</h3> <h4>Header 4, Di kanan</h4> </BODY>

(22)

<TITLE>Format Text </TITLE> <STYLE type="text/css">

em {text-decoration : overline} h2 {text-decoration: blink}

h3 {text-decoration: underline} a {text-decoration: none}

<em>Bentuk Overline</em>

<h2>Header 2, Bentuk Line-through</h2> <h3>Header 3, Bentuk Underline</h3>

<p><a href="coba.htm">Penggunaan Dalam Link</a></p> </BODY>

</HTML>

(23)

<HTML>

<HEAD>

<TITLE>Format Text </TITLE> <STYLE type="text/css">

p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase}

</STYLE> </HEAD>

<BODY>

<p class="besar"> pengubahan kedalam huruf besar </p> <p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p> </BODY>

(24)

PENGATURAN FONT

Properties

Value

Keterangan

Jenis Font

font-family

arial, dll

Ukuran Huruf

Font-size

Small

Medium

Large

Length

%

Kecil

Menengah

Besar

Besar font (pt,px)

Persentase

Pengaturan gaya pada font

font-style

normal

italic

oblique

Ketebalan huruf

font-weight

normal

bold

(25)

<TITLE>Pengaturan Font</TITLE> <STYLE type="text/css">

p.italic {

font-size :200% ; font-style: italic; }

p.normal{

font-family : verdana ; font-style: normal;

}

p.oblique {font-style: oblique}

<P class="italic">Menggunakan Style Italic</P> <P class="normal">Menggunakan Style Normal </P> <P class="oblique">Menggunakan Style Oblieque</P> </BODY>

(26)

<TITLE>Pengaturan Font</TITLE> <STYLE type="text/css">

p.normal {

font-family : verdana ; font-weight: normal;} p.thick {

font-family : verdana ; font-weight: bold;}

p.thicker {

font-family : times ; font-weight: 900;} </STYLE>

</HEAD> <BODY>

<p class="normal"> Desain Web </p> <p class="thick"> Desain Web </p> <p class="thicker"> Desain Web </p> </BODY>

</HTML>

(27)

PENGATURAN TABEL

<TITLE>Pengaturan Table spec</TITLE>

<STYLE type="text/css"> TH {

color : #FFFFFF;

background-color : #336699; border-width: 1px ;

border-style:solid; border-color :red ; font-size: 9pt;} TD {

color : red;

background-color : #E6E6FA; border-width: 1px ;

border-style:solid; border-color :blue ; font-size: 9pt;}

</STYLE>

[image:27.720.43.468.68.520.2]

(28)

<BODY>

<th width="91"> No Test </th> <th width="96"> Nilai </th>

<th width="137”> Keterangan </th> </tr>

<tr> <td> Ali </td> <td> 001 </td> <td> 78 </td> <td> Lulus </td> </tr>

<td> Mengulang </td> </tr>

<tr> <td> Adi </td> <td> 003 </td> <td> 85 </td> <td> Lulus </td> </tr>

(29)

HYPERLINK

Selector Keterangan

a:link Keadaan awal pemicu link aktif

a:visited Keadaan pemicu link setelah dikunjungi a:active Keadaan pemicu yang sedang aktif

a:hover Kejadian pada pemicu link saat mouse digerakkan diatasnya

<TITLE>Pengaturan Hyperlink</TITLE>

<STYLE type="text/css">

a:link {text-decoration: none} a:visited {text-decoration: none} a:active {text-decoration: none}

a:hover {font-weight:none; color:red; background-color:blue;} </STYLE>

</HEAD> <BODY>

<a href="coba.htm">Klik disini</a> </BODY>

(30)

TUGAS

Buatlah web pribadi anda menggunakan css. Lengkapi dengan tombol fasilitas menu:

1. HOME: Informasi sekilas tentang diri anda.

2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training yang pernah diikuti.

3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas.

4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di luar.

(31)

Referensi:

[1]. Mamoun Nawahdah. CSS Tutorial. W3School.com

(32)

Sekian Terima Kasih