Scribd
Unggah
19 tayangan55 halaman

CSS (Cascading Style Sheet)

Diunggah oleh

Danan Dwiyaksa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
19 tayangan55 halaman

CSS (Cascading Style Sheet)

Diunggah oleh

Danan Dwiyaksa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 55

CS (Cascading Style Sheet)

Politeknik Gajah Tunggal


Kurniawan Hartanto, M.Si
2020
Tujuan Pembelajaran:
 Memahami tentang konsep CSS
 Memahami aturan penulisan pada CSS
 Memahami selector sebagai pengontrol design
 Memahami pembuatan background
 Memformat text pada web
 Memahami pengaturan bentuk font
CS
• CSS ????? S
?– Singkatannya Cascading Style Sheet
– Adalah suatu teknologi yang digunakan untuk
memperindah tampilan halaman website.
– Tujuan dari penggunaan CSS ini adalah
supaya diperoleh suatu kekonsistenan style
pada elemen tertentu.
– Singkatnya kita bisa mempercantik situs kita
dengan cepat secara keseluruhan warna dan
tampilan yang ada di situs kita.
• Syarat – syarat belajar
CSS ?????????
– Anda paling tidak sudah tau code-code
HTML
• CSS adalah standar pembuatan dan pemakaian style
(font, warna, jarak baris, dll) untuk dokumen
terstruktur
• CSS memisahkan presentation sebuah dokumen
dari content dokumen itu sendiri
• CSS memudahkan pembuatan dan pemeliharaan
dokumen web
• Setiap User Agent mempunyai default style sheet
Pendefinisian rule CSS pada sebuah dokumen akan
menimpa rule pada default style sheet
• Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1
• Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2
• Spesifikasi CSS3,
http://www.w3.org/TR/REC-CSS3
Berbagai Cara Penulisan Code
CSS
• CSS dapat dituliskan pada
bagian
• <body>,
<head> suatu dokumen HTML atau
diletakkan
di sebuah file eksternal.
• Perintah-perintah CSS oleh tag
dibatasi
<style>
dan </style>
Sintaks Rule
• Style sheet didefinisikan dalam bentuk rule, terdiri dari:
– Selector
– Declaration : property & value
• Contoh rule :
h1 { color: blue
}
Keterangan:
– Selector : h1
– Property : color
– Value : blue
• Seluruh elemen (tag) HTML dapat digunakan
sebagai selector
• CSS1 :
– Fonts
– Text Color
– Backgrounds
– Block-level
Elements
• CSS2 :
– Positioning
– Visual
– Formatting
– Media Types
Interfaces
• CSS3 :
– User Interfaces
– Accessibility
– Columnar
– layout International
– Features Mobile
– Devices
Scalable Vector
Graphics
Mekanisme Mengaplikasikan
CSS
CARA PERTAMA : Inline Style
Sheet
mengetikkan langsung dalam tag html
sebagai atribut .

<body>

<b style = “ color : blue” > teks tebal dan biru </b>

</body>
CARA KEDUA : Embedded Style Sheet
Menggunakan tag style di dalam tag head.

<head>
<style type=“text/css”>

……… style definitions ………

< /style>
</head>
Style definitions : adalah defenisi style yang ingin
dibuat.
Format penulisannya adalah :

Selector { property1 : value1 ;


property2 : value2;….
propertyN : valueN ; }

Selector adalah tag yang digunakan web


browser.
Property : value adalah efek dari style
yang diinginkan untuk selector.
CARA KETIGA : Linked Style Sheet
Menyimpan informasi style ke dalam sebuah
file dengan ekstensi/type file css
Memanggil file css dalam html dengan tag
link yang diletakkan dalam tag head.

< head>

<link rel=“stylesheet” type=“text/css” href= “namafile.css”/ >

< /head>
Contoh code Tidak Dengan
Sekarang coba bayangkan bagaimana CSS
jika kita ingin
membuat warna pada huruf-huruf yang ditebalkan itu ?
katakan saja kita ingin mewarnainya dengan warna hijau…..

< HTML>
< HEAD>
< /HEAD>
< BODY>
P: Mengapa jika kita anggap < B> < FONT
COLOR= "Lime"> suatu
pekerjaan< /FONT> < /B> itu mudah maka pekerjaan itu akan
beneran menjadi< B>< FONT COLOR= "Lime"> lebih mudah
< /FONT> < /B> ?
< P>
J: Karena itu merupakan < B> < FONT COLOR= "Lime"> sugesti
< /FONT> < /B> terhadap < B> < FONT COLOR= "Lime"> diri
kita
sendiri < /FONT> < /B>
< /BODY>
< /HTML>
Contoh code Dengan CS
< HTML>
< HEAD>
S
< STYLE TYPE= "text/css">
B { color : lime }
< /STYLE>
< /HEAD>
< BODY>
P: Mengapa jika kita <B>suatu pekerjaan</B> itu
anggap mudah
maka pekerjaan itu akan beneran menjadi<B> lebih
mudah</B> ?
< P>
J: Karena itu merupakan <B>sugesti</B> terhadap
< B> diri kita
sendiri< /B>
< /BODY>
< /HTML>
Grouping & Inheritance
• Grouping (pengelompokan) :
– Selector : h1, h2, h3 { font-family: arial }
– Declaration : h1 { font-weight: bold; font-size: 14pt }
– Value : h1 { font: bold 12pt arial }

• Inheritance (pewarisan) :
Bila style tidak didefinisikan, maka akan digunakan definisi style dari
<html> induknya
<head>
<style type="text/css">
body {color: navy}
h1 {font-family: Arial}
b {text-decoration: underline}
</style>
</head>
<body>
<h1>Ini <b>Homepage</b> Saya</h1>
Ini adalah homepage yang menggunakan CSS.
</body>
</html>
Macam-macam Selector
• Tag (elemen) HTML
h1 {color: green}
i {font-style: normal}
• Class
.mhs {border: black solid 1; color: gray}
.nama {font: bold 20 Arial}
• ID
#mhs02 {color: red}
• Kontekstual
h1 i {color: navy}
div.mhs .alamat b {color: green}
<h1>Daftar Mahasiswa <i>Student Exchange</i></h1>
<div id="mhs01" class="mhs">
<span class="nama">Adrian Marzuki</span><br>
<span class="alamat">Jl. Tubagus Ismail XI/5 <b>Bandung</b></span>
</div>
<div id="mhs02" class="mhs">
<span class="nama">Dewi Purnama</span><br>
<span class="alamat">Jl. Cisitu Lama 24 <b>Bandung</b></span>
</div>
<i>Last updated 10 September 2003</i>
Contoh :
<style type=“text/css” >
hr { color : red ; height : 5px ; width : 50%; }
< /style>

Keterangan :
Tag adalah style
Atribut adalah type=“ text/css”
Selector adalah hr
Property adalah color, height, width
Value adala red, 5px, 50%
h
ID SELECTO dan CLAS
R S
ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe)
CLASS diawali dengan tanda titik ( . )
Selector
• Adalah nama yang diberikan untuk setiap style
berbeda
yang dibuat. Di dalam style didefinisikan
bagaimana
setiap selector akan bekerja (font, color dan lain-
lain.).
Kemudian di dalam bagian body halaman web,
selector
tersebut dipanggil untuk mengaktifkan style yang
telah
didefinisikan.
• Jenis- Selector:
jenis HTM
• Selector L
• Selector Class
PENULISAN PADA TAG
DENGAN ATRIBUT STYLE
PENULISAN PADA HEAD
PENULISAN DENGAN
CLASS
PENULISAN DENGAN
ID
SPAN dan DIV
• Dua tag yang sering dikombinasikan dengan selector class
adalah
< SPAN> dan
•< DIV>
Tag < SPAN> adalah "inline-tag" dalam HTML, tidak
berarti ada
pergantian baris (line break) yang disisipkan sebelum atau
setelah
penulisannya.
• Tag < DIV> adalah "block tag" dalam HTML, berarti
pergantian baris
secara otomatis disisipkan untuk memberikan jarak antara blok
yang dibuat dengan teks atau blok lain sebelum dan
sesudahnya
(seperti tag < P> atau
<
• TABLE> ).
Tag < DIV> sering digunakan untuk implementasi layer
karena
layer merupakan blokblok informasi terpisah. Tag < DIV>
CSS3
CSS3 Border
Dengan CSS3, Anda dapat membuat batas
bulat, menambahkan bayangan ke kotak, dan
menggunakan gambar sebagai perbatasan -
tanpa menggunakan program desain, seperti
Photoshop.

Dalam bab ini anda akan belajar tentang sifat


batas berikut:

* border-radius
* box-shadow
* border-image
CSS3 Border

31
CSS3 Border
CSS3 Rounded
Corners
div {
border:2px solid;
border-radius:25px;
-webkit-border-radius:25px; /* Safari
*/
} -moz-border-radius:25px; /* Safari */

CSS3 Box
Shadow
div {
box-shadow: 10px 10px 5px
#888888;
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /*
} Safari */

CSS3 Border
I mage
div {
border-image:url(border.png) 30 30
-moz-border-image:url(border.png)
round; 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and
} Chrome */
CSS3 Background
CSS3 Background
Background Size
Property
div
{ background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 and earlier */
-webkit-background-size:80px 60px; /* Safari */
background-size:80px 60px;
background-repeat:no-repeat;
}
CSS3 Background
Background Origin Property
div
{ background:url(img_flwr.gif)
; background-repeat:no-
repeat; background-size:100%
100%;
-webkit-background- /* Safari */
origin:content-box;
background-origin:content-box;
}
CSS3 Background
Multiple Background
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 Text Effect
CSS3 Text Effect
Text Shadow
h1
{
text-shadow: 5px 5px 5px
#FF0000;
}

Text Word Wrapping


p {w ord-wrap:break-word;}
CSS3 2D Transform
CSS3 2D Transform
Method yang ada :
• translate()
• rotate()
• scale()
• skew()
• matrix()

di
v
{ transform rotate(30deg)
: ;
-webkit-transform: rotate(30deg); /* Safari and */
Chrome
-o-transform: rotate(30deg); /* Opera * /
} -moz-transform: rotate(30deg); /* Firefox * /

07/12/12 By : Suwondo, S.Kom 40


CSS3 2D Transform
Skew (x-axis-degree, y-axis-degree):
div
{
transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

Matrix (n, n, n, n, n, n):


div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and
Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
CSS3 3D Transform
CSS3 3D Transform
CSS3 3D Transform
Contoh :
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome
} */
CSS3 Transition
CSS3 Transition
Contoh Effect transisi dengan property width dengan durasi 2 detik
:
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Catatan: Jika durasi yang tidak ditentukan, transisi tidak akan
berpengaruh, karena nilai default adalah 0.
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
CSS3 Multiple Column
CSS3 Multiple Column
CSS3 Multiple Column
Contoh :
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset # ff00ff;
}
CSS3 User Interface
CSS3 User Interface
CSS3 User Interface
Contoh :
div
{
resize:both;
overflow:auto;
}

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Resources 1
• http://www.csszengarden.com
– This is CSS at its
finest
• http://www.w3.org/Style/CSS/
– The Official CSS
Site
• http://css.maxdesign.com.au/
– Australian firm, very professional
• http://webmonkey.wired.com/webmonke
y/reference/stylesheet_guide
– Where I learned CSS and Web
Design
Resources 2
• HTML-Kit editor – http://chami.com/
• Amaya editor – http://www.w3c.org/Amaya
• W3schools XHTML and CSS tutorials –
http://www.w3schools.com/
• Web Head Start tutorials – http://www.webheadstart.org/
• Tidy Web Interface -
http://www.washington.edu/webinfo/tidy.cgi
• CSS Validator - http://jigsaw.w3.org/css-validator/
•
Dave Raggett XHTML and CSS tutorials -
• http://www.w3.org/MarkUp/Guide/Overview.html
Web Accessibility in Mind (WebAIM) -
• http://www.webaim.org/
Color contrast analyzer -
http://www.visionaustralia.org.au/info.aspx?page=628
• Stylin’ With CSS, A Designer’s Guide, Second Edition by
Charles Wyke-Smith

Anda mungkin juga menyukai