praktikum css

BAB 2

CSS (Cascading Style Sheet)

By:

Yunia ikawati

NEXT

Praktek Pemrograman WEB

• Tujuan:

Memahami dan mempelajari elemen web Cascading Style

Sheets (Syntax CSS, agaimana menggunakan CSS, Background

CSS, Text CSS,Font CSS,Border CSS,Margin CSS,Padding

CSS,List CSS,Dimensi CSS,Klasifikasi CSS)

CSS (CASCADING STYLE SHEET)


Manfaat:

• Memperindah tampilan halaman website.

• Mempermudah mengubah secara keseluruhan warna dan tampilan.

• Memformat ulang situs Anda secara cepat.

• Menghemat kode dan waktu dalam mendesain tampilan website.

NEXT


Ketentuan Mendasar

• Penulisan script CSS terletak diantara tag <HEAD>…</HEAD>

• Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration.

<HTML>

<HEAD>

<TITLE>…..</TITLE>

<STYLE TYPE=text/css>

selector { declaration }

</STYLE>

</HEAD>

<BODY>

……..

</BODY>

</HTML>

NEXTBACK


Tag Komentar

<html>

<head>

<title>……</title>

<style type=text/css>

…aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */

</style>

</head>

<body>

…………………

</body>

</html>

NEXTBACK


CSS dapat diimplementasikan dalam 3 cara:

1. Inline Style yaitu menjadi atribut dalam tag HTML, atributnya

adalah style.

2. Internal Style Sheet atau Embed Style yaitu berada di dalam tag

<HEAD> .

3. External Style Sheet atau Linked Style Sheet yaitu style CSS

berada terpisah pada sebuah file.css, sedangkan untuk

pemanggilannya dalam document HTML yang akan

menggunakannya dilakukan dengan cara:

<link rel=“stylesheet” href=“file.css” type=“teks/css” />

1. Inline Style:

<html>

<head><title>contoh:Inline Style

Sheet</title>

</head>

<body>

<p style='color:red; font-

size:200%'>Selamat Belajar CSS</p>

</body>

</html>


2. Internal Style Sheet atau Embeded Style

<html>

<head><title>contoh:Embedded Style Sheet</title>

<style>

h1 {color:red}

</style>

</head>

<body>

<h1> Selamat Belajar CSS</h1>

</body>

</html>


- linked.css

h1{

color:blue;

}


3. External Style Sheet atau Linked

Style Sheet

- linked.html

<html>

<head><title> contoh:Linked Style Sheet </title>

<link href="linked.css" rel="stylesheet"

type="teks/css" />

</head>

<body>

<h1> Selamat Belajar CSS</h1>

</body>

</html>

CSS (Cascading Style Sheet)Konsep:

• Pewarisan (inheritance)

• Selektor-Kontekstual (Contextual Selector)

• Kelas (classes)

NEXTBACK

CSS Pewarisan (inheritance)

Text

<html>

<head>

<title>CSS_01</title>


b { color:blue }

i { color:#3333CC }

</style>

</head>

<body>

<i>Akademi Komunitas Negeri Lamongan </i><br>

<b>Teknik Informatika</b>

</body>

</html>

Catatan: Untuk declaration color dapat juga menggunakan kode heksa NEXTBACK

CSS Selektor-Kontekstual (Contextual Selector)

Text

<html>

<head>



b,i { color:ff00ff;

text-decoration:underline;

}

</style>

</head>

<body>

<b>Akademi Komunitas Negeri Lamongan</b>

<br>

<i>Teknik Informatika</i>

</body>

</html>

Catatan: selector ini kesemuanya untuk bold+italic text NEXTBACK


Perbedaan CSS pewarisan (inheritance) dengan

CSS Selektor-Kontekstual (Contextual Selector) !!!

<html><head><title>CSS Inheritance</title><style type=text/css>

b { color:blue; text-decoration:underline }

i { color:blue; text-decoration:underline }</style></head><body>


<br><i><Teknik Informatika</i>

</body></html>

<html><head><title>Selektor-Kontekstual</title><style type=text/css>

b,i { color:blue; text-decoration:underline;

}</style></head><body>


<br><i>Teknik Informatika</i>

</body></html

Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector)

NEXTBACK


Deklarasi :

• font-family:Tahoma,Arial etc

• font-size:14px, 23px etc

• font-weigth: bold

• font-style:italic,underline

• font-variant:small-caps

(mengganti semua kar.lower-case

dengan kar.upper-case),none

(tanpa efek)

• text-indent:30px (membuat

indent awal paragraf)

• text-transform: capitalize

(Kar.pertama huruf besar),

uppercase (Semua kar. huruf

besar), lowercase (Semua kar.

Huruf kecil)

• letter-spacing:10px, 14px

(mengendalikan jumlah spasi

karakter)

• text-decoration:underline

(tampil garis dibawah text),

overline (tampil garis diatas text),

line-trough (tampil garis melalui

text), none (non-efek)

CSS (Cascading Style Sheet)<html>

<head>



h4 { color:blue;font-family:Tahoma;

letter-spacing:10px;}


text-indent:30px;}


text-transform: capitalize;}

b { color:blue;font-family:Tahoma;

text-transform: uppercase;}

i { color:blue;font-family:Tahoma;

text-decoration:line-through;}

</style>

</head>

NEXTBACK

<body>

<h4>Teknik Informatika</h4>



<b>Teknik Informatika</b>

<i>Teknik Informatika</i>

</body>

</html>

FONT


Catatan:

Nilai list-style-type:

disc -> efek lingkaran

square -> efek persegi empat

circle-> efek lingkaran yang transparan

decimal -> 1,2,3,…dst

lower-roman -> i,ii,iii,…dst

upper-roman -> I,II,III,…dst

lower-alpha -> a,b,c,…dst

upper-alpha -> A,B,C,…dst

None -> Tanpa Efek

NEXTBACK


<html>

<head>



body{background-image:url(bunga.jpg);}

li { list-style-type:square;

font-weight:bold;background-color:blue;

}

h3{background-color:yellow;}

</style>

</head>

<body>

<h3>Teknik Informatika </h3>

<ol>

<li>Pemrograman Web</li>

<li>Praktek Pemrograman Web</li>

</ol>

</body>

</html>

NEXTBACK

List & Background


<html>

<head>

<style type="text/css">

p1

{border: medium double rgb(300,0,255)}

p2

{border: dashed rgb(200,450,200)}

</style>

</head>

<body>

<p1>Pemrograman Web</p1>

<br><br>

<p2>Pemrograman Web</p2>

</body>

</html>

Border


<html>

<head>

<style type="text/css">

h1 { background: yellow;padding: 100px 20px

20px 100px;}

h2 { background: red;padding-left:150px;}

h3 { background: green; margin-top: 50px;

margin-right: 5px; margin-bottom: 5px;

margin-left: 10px;}

h4 { background: orange; margin: 80px 20px

80px 55px; }

</style>

</head>

<body>

<h1>AKNELA</h1>

<h2>AKNELA</h2>

<h3>AKNELA</h3>

<h4>AKNELA</h4>

</body>

</html>

Margin & Padding


1. Tuliskan source code tampilan berikut dengan CSS Internal

Style Sheet atau Embeded Style


2. Tuliskan source code tampilan berikut dengan CSS Internal

Style Sheet atau Embeded Style


3. Tuliskan source code tampilan berikut dengan CSS

External Style Sheet atau Linked Style Sheet

praktikum css

Education