aplikasi berbasis web
Download
Skip this Video
Download Presentation
Pertemuan 9 Cascading Style Sheet ( css )

Loading in 2 Seconds...

play fullscreen
1 / 30

Pertemuan 9 Cascading Style Sheet ( css ) - PowerPoint PPT Presentation


  • 159 Views
  • Uploaded on

APLIKASI BERBASIS WEB. Pertemuan 9 Cascading Style Sheet ( css ). STTI I-Tech Susana Dwi Yulianti , SKom. PENGENALAN CSS. CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen HTML

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Pertemuan 9 Cascading Style Sheet ( css )' - cutter


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
pengenalan css
PENGENALAN CSS
  • CSS singkatan dari Cascading Style Sheets
  • Styles mendefinisikan bagaimana menampilkan elemen HTML
  • Style sheet mendeskripsikanbagaimanatampilan document HTML dilayar
  • Styles biasanya disimpan dalam file eksternal css.
syntax css
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

syntax css1
SYNTAX CSS
  • 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
menambahkan komentar pada css
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 "*/",
menambahkan komentar pada css1
Menambahkan komentar pada CSS
  • Contoh:

/*Ini isi komentar*/

p

{

text-align:center;

/*Ini komentar yang lain*/

color:black;

font-family:arial;

}

id dan class selectors
Id dan class Selectors
  • CSS memungkinkan 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 "#".
id dan class selectors1
Id dan class Selectors
  • Contoh:

<html>

<head>

<style type="text/css">

#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>

id dan class selectors2
Id dan class Selectors
  • Class Selector digunakan untuk menentukan style untuk sekelompok elemen.
  • Berbeda dengan selector id, Class Selector yang paling sering digunakan pada beberapa elemen.
  • Class Selector menggunakan atribut class HTML, dan didefinisikan dengan " . "
id dan class selectors3
Id dan class Selectors
  • Contoh:

<html>

<head>

<style type="text/css">

.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html>

id dan class selectors4
Id dan class Selectors
  • Anda juga dapat menentukan bahwa hanya HTML tertentu elemen harus dipengaruhi oleh kelas.

<html>

<head>

<style type="text/css">

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>

class pada css
Class Pada CSS
  • Class digunakanuntukmembuat style-style yang berbedauntukjenis tag yang sama (disebut private class)
  • Class jugadapatdigunakanuntukmembuat style yang samauntuksemuajenis tag yang berbeda (disebut public class)
  • Contohpenulisan private class :
  • Penerapannyaadalahdenganmenggunakanatribut class, sepertiberikut:

H1.batman {color: red;}

H1.biru {color: blue;}

<H1 class="batman">Batman</H1>

<H1 class="biru">Jogja</H1>

class pada css1
Class Pada CSS
  • Contohpenulisan public class :
  • Penerapannyaadalahdenganmenggunakanattributclass pada tag HTML yang menggunakanCSS tersebut, sepertiberikut:

.warnatengah

{

color: red:

text-align: center;

}

<H1 class="warnatengah">Pemrograman</H1>

<P class="warnatengah">Ternyatapemrogramanasyik</P>

<body class=”warnatengah”></body>

penggunaan selector bebas
Penggunaan Selector bebas
  • Dengan menggunakan selector bebas kita mempunyai kebebasan dalam menggunakan nama untuk selector tersebut.
  • Contoh:

<html>

<head>

<title> Selector </title>

<style type="text/css">

gbawah{text-decoration: underline;}

</style>

</head>

<body>

<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah>

</body>

</html>

pemanggilan css
Pemanggilan CSS
  • Inline Style Sheet
    • CSS didefinisikanlangsungpada tag HTML yang bersangkutan
    • penulisannyacukupdenganmenambahkanatributstyle="..."dalam tag HTML tersebut
    • Style hanyaakanberlakupada tag yang bersangkutan, dantidakakanmempengaruhi tag HTML yang lain
    • Contoh:

<html>

<body>

<p style="color:blue;margin-left:20px">Ini adalah sebuah paragraph.</p>

</body>

</html>

pemanggilan css1
Pemanggilan CSS
  • Embedded Style Sheet
    • CSS didefinisikanterlebihdahuludalam tag <style> ... </style>dimana tag tersebutdidefinisikandiantara tag <head>dan tag </head>
    • Contoh:

<head>

<title>ContohBentuk Embedded/title>

<style>

body {background:yellow; color:green; margin-left:0.5in}

h1 {font-size:18pt; color:red}

p {font-size:12pt; font-family:arial; text-indent:0.5in}

</style>

</head>

<body>

<h1>Welcome</h1>

<p>hallo semua</p>

</body>

pemanggilan css2
Pemanggilan CSS
  • Linked Style Sheet
    • CSS dibuatpadaberkasterpisahdariberkas HTML
    • File CSS disimpandenganekstension.css
    • Padaberkas HTML yang akanmenggunakanberkas CSS, harusdibuat tag <link>dan<href> yang dituliskandiantara tag <head> ... </head>
    • Contohpenyisipanpadadokumen HTML :

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

grouping pada css
Grouping Pada CSS
  • Dalampendefinisian selector terdapatsuatucara yang disebut grouping selector ataupengelompokan selector
  • Manfaatdaripenggunaan grouping selector iniadalahpenggunaan selector dari tag HTML yang akandikenai property yang samacukuphanyadibuatsekalisaja
  • Penggunaan grouping inicukupdenganmemberikantandakoma (,) antara selector
  • Contoh :

P,h1,body

{

Text-decoration:underline;

}

contoh penggunaan css untuk format text
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>

contoh penggunaan css untuk pengaturan font
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>

pengaturan tabel
Pengaturan Tabel

<html>

<head><title>pengaturan padding table</title>

<style type="text/css">

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
Pengaturan Background
  • Property Background CSS :
background
background

<html>

<head>

<style type="text/css">

body{ background: #00ff00 url(image/smile.png) no-repeat fixed center;}

</style>

</head>

<body>

<p>Iniadalah Text</p>

<p>Iniadalah Text</p>

<p>Iniadalah Text</p>

<p>Iniadalah Text</p>

<p>Iniadalah Text</p>

</body>

</html>

background color
background-color

<html>

<head>

<style type="text/css">

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
background-image

<html>

<head>

<style type="text/css">

body {background-image:url(image/smile.png);}

</style>

</head>

<body>

<h1>Selamat belajar CSS</h1>

</body>

</html>

background repeat
background-repeat

<html>

<head>

<style type="text/css">

body

{background-image:url(image/smile.png);

background-repeat:repeat-y;}

</style>

</head>

<body>

<p>repeat-y background akan mengulang secara vertical.</p>

</body>

</html>

background attachment
background-attachment

<html>

<head>

<style type="text/css">

body

{

background-image:url(image/smile.png);

background-repeat:no-repeat;

background-attachment:fixed;

}

</style>

</head>

<body>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

<p> background-image akan fixed padatempatnya.</p>

</body>

</html>

background position
background-position

<html>

<head>

<style type="text/css">

body

{

background-image:url(image/smile.png);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

</style>

</head>

<body>

<p><b>Note:</b> Untukbekerjapada Firefox dan Opera, properti background-attachment harusdisetke "fixed".</p>

</body>

</html>

ad