Aplikasi berbasis web
Download
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
Aplikasi berbasis web

APLIKASI BERBASIS WEB

Pertemuan 9Cascading Style Sheet (css)

STTI I-Tech Susana DwiYulianti, SKom


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