cascading style sheet n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheet PowerPoint Presentation
Download Presentation
Cascading Style Sheet

Loading in 2 Seconds...

play fullscreen
1 / 38

Cascading Style Sheet - PowerPoint PPT Presentation


  • 231 Views
  • Uploaded on

Cascading Style Sheet. Gufron gufron@gufron.com. Sub Bahasan. Pendahuluan Konsep Dasar CSS Syntax/Perintah CSS Implementasi CSS Komponen CSS CSS Properties. Cascading Style Sheet.

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 'Cascading Style Sheet' - adena-sanders


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
cascading style sheet

Cascading Style Sheet

Gufron

gufron@gufron.com

sub bahasan
Sub Bahasan
  • Pendahuluan
  • Konsep Dasar CSS
  • Syntax/Perintah CSS
  • Implementasi CSS
  • Komponen CSS
  • CSS Properties
cascading style sheet1
Cascading Style Sheet

Cascading Style Sheets (CSS atau sering disebut dengan stylesheet) adalah suatu teknologi (file) yang berisi kumpulan kode-kode yang berurutan dan saling berhubungan dan digunakan untuk mengatur format/tampilan halaman website (situs).

Dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs sekaligus memformat ulang tampilan situs.

CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

slide4

Sejarah Casacading Style Sheet

  • 1996, W3C merekomendasikan penggunaan CSS dalam dokumen web.

Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web, karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri.

  • CSS pertama yang muncul adalah CSS level 1, yang mendukung beberapa pengaturan sebagai berikut:
    • Jenis font dan ketebalan font
    • Warna, background, dan teks
    • Posisi teks, gambar, dan lainnya
    • Margin, border, dan padding
  • Pertengahan 1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini.
  • Saat ini sudah dikembangan CSS level 3.
slide5

Fungsi/Keuntungan CSS

  • Dengan CSS, memungkinkan web developer mendapatkan file web yang lebih kecil.

Hal ini karena pengaturan style oleh CSS dibuat secara terpisah dan di import ke dalam file utama.

  • Kecepatan akses akan lebih cepat.

Dengan file web yang lebih kecil, hal ini juga akan berpengaruh terhadap kecepatan akses/membuka halaman situs.

  • Mempermudah kontrol style dari seluruh halaman website.

Dengan menggunakan CSS akan sangat mempermudah mengotrol style dari seluruh halaman web site. Hal ini dikarenakan kita hanya merubah satu halaman untuk merubah seluruh style dari sebuah website.

slide6

Fungsi/Keuntungan CSS (Lanjutan)

  • CSS memungkinkan untuk menyembunyikan content dari browser, tapi masih di index oleh mesin pencari.

CSS memungkinkan kita menyembunyikan Content dari halaman website dari browser, tetapi memungkinkan masih dibaca oleh google. Tujuan hal ini, misal kita masih menghendaki sebuah content untuk disembunyikan dari browser, tatapi masih bisa nampak ketika diprint, atau sebaliknnya.

  • Pengunjung/user yang berbeda dapat memiliki CSS yang berbeda pula.

Dengan CSS, kita dapat memberikan tampilan yang berbeda kepada pengunjung/user yang berbeda.

<!--[if lt IE 7]><link rel=“stylesheet” href=“file.css” type=“text/css”><![endif]-->

slide7

Kekurangan CSS

  • Tidak semua browser mengartikan kode CSS dengan cara yang sama.

Kadang-kadang, tampilan web dengan suatu CSS terlihat baik di browser yang satu, tapi kurang baik di browser yang lain.

  • Jadi sebagai web developer kita harus memeriksa tampilan situs yang dibuat supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan situs kita terlihat baik di semua browser.
konsep dasar css
Konsep Dasar CSS

Sebuah style sheet terdiri dari beberapa aturan (rules).

Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block).

Dalam satu aturan, dapat ditulis lebih dari satu selector (style group), dan masing-masing selector harus dipisah dengan tanda koma (,).

Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;).

Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai (value).

Style sheet dapat diberi komentar (dengan syntax pembuka (/*) dan penutup (*/) untuk mempermudah koreksi.

Segala teks yang ada di dalam komentar tidak akan dibaca sebagai kode.

syntax css
Syntax CSS

<style type=“text/css”>

/* komentar */

selector {property: value} /* komentar */

</style>

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.

Value adalah nilai dari pengaturannya.

slide10

Rule

Selector

Declaration Block

Value

Property

Syntax CSS (Lanjutan)

<style type=“text/css”>

/* stylesheet pemrograman web oleh Gufron */

I, U {color: red}

B {color:green; text-decoration: underline; font-family: Arial}

</style>

slide11

Implementasi CSS

Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu:

  • Inline CSS
  • Embedded (memasang kode ke dalam bagian <head></head>
  • External (link ke file CSS)
  • Import CSS file
slide12

Inline CSS

  • Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika ingin memformat suatu elemen satu kali saja.

Contoh:

<p style="color:blue">

Isi paragraf.

</p>

  • Pada contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
  • Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
slide13

Embedded CSS

  • Kode CSS dapat ditempelkan di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh:

<head>

<style type="text/css" media=“screen”>

p {color:#0000ff;}

</style>

</head>

  • Dalam contoh di atas semua elemen <p> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
external css
External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.

Panggil file CSS tersebut ke dalam semua halaman web yang dibuat.

Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web yang dibangun.

Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini:

Buat satu file dengan notepad atau teks editor lain dengan nama, misalkan: ptikubh.css, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small; color:#0000ff}

h1 {color: red; }

Panggil file ptikubh.css dari semua halaman web dengan cara memasukkan kode di bawah ini, di antara tag <head> dan </head>

<head>

<link rel="stylesheet" href=“ptikubh.css" type="text/css">

</head>

import css
Import CSS
  • Kita juga bisa meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import “ptikubh.css";

atau

@import url(“ptikubh.css");

penggunaan lebih dari satu kode css
Penggunaan Lebih Dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.

Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

h1 {

color: red;

text-align: left;

font-size: 12px;

}

Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:

h1 {

text-align: right;

font-size: 20px;

}

Perhatikan bagaimana pemformatan saling bertabrakan, dari external style sheet, text-align=left dan font-size=12px sementara dari internal style sheet, text-align=right dan font-size=20px.

penggunaan lebih dari satu kode css1
Penggunaan Lebih Dari Satu Kode CSS

Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan external style sheet.

Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

color: red;

text-align: right;

font-size: 20px;

komponen css

Pada bagian awal, syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh terlihat penggunaan tag HTML sebagai selector.

Contoh kasus:

  • Kita akan membuat kode CSS untuk tag <h1>. Namun kita ingin memformat memformat tag <h1> dengan warna / property berbeda.

Misalkan, tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna merah.

  • Untuk kasus seperti ini, kita bisa menggunakan Class selector dan ID selector.
Komponen CSS
slide19

Komponen CSS (Lanjutan)

  • Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}

  • Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {property:value;}

Perhatikan titik di setiap awal nama Class.

  • Jika ingin menggunakan class selector di luar kode HTML, gunakan tag <div class=nama-class> dan di akhiri dengan tag </div> atau dengan tag <span></span>
slide20

Class Selector

Contoh penulisan syntax CSS:

.tengah {text-align:center;}

p.tengah {color:#ff0000;}

h1.kiri {color:#0000ff;}

h1.tengah {color:#000000;}

Contoh pemakaian kode CSS:

<div class=tengah>

<p>Teks tengah akan berwarna merah.</p>

<h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1>

</div>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

slide21

Class Selector (Lanjutan)

  • Hasil

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

slide22

ID Selector

  • ID Selector mirip dengan Class selector.

Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

  • Cara penulisan ID Selector:

#nama-ID {property:value;}

  • Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID.

  • Jika ingin menggunakan class ID selector di luar kode HTML, gunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
id selector
ID Selector

Contoh penulisan syntax CSS:

#tengah {text-align:center;}

p.tengah {color:#ff0000;}

h1.kiri {color:#0000ff;}

h1.tengah {color:#000000;}

Contoh pemakaian kode CSS:

<span id=tengah>

<p>Teks tengah akan berwarna merah.</p>

<h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1>

</span>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

slide24

CSS Properties

  • Font

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll.

Properties dari CSS Font:

    • Font Family
    • Font Size
    • Font Style
    • Font Variant
    • Font Weight
    • Font Color
    • Font
  • Syntax penggunaan CSS font:

{ font-properties: value }

slide25

CSS Properties: Font

  • CSS Font Family

Dalam CSS, tipe huruf dikenal dengan Font Family. Properties font family digunakan untuk pengaturan jenis huruf yang akan digunakan.

Cara penulisan:

property -> font-family

value -> nama-nama font

Contoh penulisan:

h1 {

font-family: verdana;

}

h2 {

font-family: “times new roman”;

}

slide26

CSS Properties: Font

  • CSS Font Size

Properti font size digunakan untuk pengaturan ukuran huruf yang digunakan.

Syntax:

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Contoh penulisan:

h1 { font-size: 18px; }

h2 { font-size: 14pt; }

Nilai untuk size:

  • Absolute Size

xx-small, x-small, small, medium, large, x-large, xx-large

  • Relative Size

larger/smaller, length [pixel (px), point (pt)], persentase

slide27

CSS Properties: Font

  • CSS Font Style

Properties font style digunakan untuk pengaturan tampilan (style) kemiringan dari huruf yang digunakan.

Ada 3 macam nilai style yaitu:

  • normal: browser menampilkan huruf secara normal.
  • Italic: browser menampilkan huruf miring
  • oblique: browser menampilkan huruf miring (oblique).

Perbedaan italic dan oblique:

  • Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang digunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.
css properties font
CSS Properties: Font
  • Font Variant

Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil.

Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukurannya tetap sama.

Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.

Nilai untuk variant:

normal, small-caps

slide29

CSS Properties: Font

  • CSS Font Weight

Properti font weight digunakan untuk

mengatur ketebalan font.

Cara penulisan:

property -> font-weight

value -> normal, bold (tebal), bolder (lebih tebal), lighter (lebih tipis)

100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900

Contoh penulisan:

h1 {

font-size: 14px;

font-weight: bold;

}

h2 { font-size: 14px; font-weight:100; }

slide30

CSS Properties: Font

  • CSS Font Color

Properti color digunakan untuk menentukan warna huruf.

Sebenarnya properti color bukanlah bagian dari properti font.

Cara penulisan:

property -> color

value -> nama warna (red, black, white), hexadesimal (#ff0000), RGB (0, 220, 98)

Contoh penulisan:

h1 { font-size: 14px; color: red; }

h2 { font-size: 14px; color: #0000ff; }

Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

slide31

CSS Properties: Font

Ada 4 cara dalam menuliskan warna menggunakan kode RGB:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))

Semua contoh di atas digunakan untuk menuliskan warna yang sama.

slide32

CSS Properties: Font

  • CSS Font

Digunakan untuk menggabungkan beberapa CSS font menjadi satu.

Cara penulisan:

property -> font

value -> font-size, font-variant, font-weight, font-style, font-family

Contoh penulisan:

p {

font: italic, bold 12pt/14pt Times New Roman

}

css properties background
CSS Properties: Background
  • Background Color

Digunakan khusus untuk pengaturan warna latar halaman.

Syntax:

background-color: value {warna | transparent }

slide34

CSS Properties: Background

  • Background

Digunakan untuk pengaturan latar halaman, baik warna maupun gambar.

Syntax:

Background: value;

Nilai:

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Contoh Penulisan:

background: #ffffff url(“gambar.png") left top repeat-x;

background: #ffffff url(“gambar.png") no-repeat;

slide35

CSS Properties: Text

  • Text-Alignment Properties

Digunakan untuk pengaturan tata letak teks.

Cara penulisan:

property -> text-align

value -> left, right, center, justify

Contoh penulisan:

h1 { text-align: center }

slide36

CSS Properties: Body

  • Body Properties

Digunakan untuk pengaturan tata letak halaman secara keseluruhan.

Cara penulisan:

property -> body

value -> margin, padding, font, color, background

Contoh penulisan:

body {

margin-top: 5px;

background: #ffffff url("latar.jpg") left top repeat-x;

}

tugas mandiri personal
Tugas Mandiri (Personal)

Lakukan perubahan terhadap website sederhana yang telah dibuat menggunakan CSS sebagai suplemen.

Warna latar untuk halaman pertama menggunakan 6 digit NPM masing-masing.

Tugas dikumpul melalui SIPERO FKIP.

gufron gufron@gufron com
Gufron

gufron@gufron.com