Cascading Style Sheets for Web Development

sulhan24 3 views 43 slides Sep 16, 2025
Slide 1
Slide 1 of 43
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43

About This Presentation

Cascading Style Sheets for Web Development

by Moh Sulhan, S.T., M.KOM

Size: 2.09 MB
Language: none
Added: Sep 16, 2025
Slides: 43 pages

Slide Content

By : MOH.SULHAN
X
1
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA
Oleh : Moh. Sulhan, S.T.,M.Kom

By : MOH.SULHAN
X
2
- Merupakan bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen
- Sebuah metode yang digunakan untuk mempersingkat penulisan
tag HTML, seperti font, color, text, tabel, dll.
- Mennghindari penulisan yang berulang - ulang
Apa itu CSS ?
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
3
<html>
<head>
<title>Penulisan Skrip HTML</title>
</head>
<body>
<font color="#FF0000" size="+3" face="Arial">INFORMATIKA</font>
<font color="#FF0000" size="+3" face="Arial">UNIVERSITAS</font>
<font color="#FF0000" size="+3" face="Arial">AKADEMIK</font>
</body>
</html>
<html>
<head>
<title>Penulisan Skrip CSS</title>
<style type="text/css">
p { font-size:30px;
font-family:Times New Roman;
color:#FF3300;
}
</style>
</head>
<body>
<p>INFORMATIKA</p>
<p>UNIVERITAS</p>
<p>AKADEMIK</p>
</body>
</html>
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
4
- Mempersingkat penulisan tag HTML
- Mempercepat proses rendering atau pembacaan HTML
- Mudah dan cepat dalam me-maintenance
- CSS bisa melakukan apa yang tdk bisa dilakukan oleh HTML
Kegunaan CSS ?
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
5
Cara penulisan skrip CSS dibagi menjadi tiga bagian, yaitu :
-Inline Style Sheet
-Embedded Style Sheet
-Linked Style Sheet
Cara Penulisan CSS ?
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
6
-Metode ini jarang digunakan karena tidak efisien
-Penulisan skripnya sama dengan HTML
-Contoh :
Inline Style Sheet
<p style="color:green">SAYA BELAJAR CSS</p>

HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
7
-Metode ini menggunakan tag <style> …</style>
Contoh :
Embedded Style Sheet
<style type=“text/css”>
h1 { color:red}
</style>
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
8
-Penulisan skrip CSS di halaman yang berbeda atau terpisah dari
HTML
-Untuk metode ini menggunakan tag <link rel> yang ditempatkan di
tag <HEAD>
Contoh :
Linked Style Sheet
<link rel="stylesheet" type="text/css"
href="display.css">
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
9
-SELECTOR : yang terdiri dari Tag, Class, Id, dan Pseudo yang
digunakan sebagai pemisah antar elemen
-DECLATION: Untuk mendeskripsikan properti dan value yang
digunakan pada selector atau pemisah.
Aturan Penulisan CSS
h1 {
color: #0000FF;
}
Selector
Properti
Value
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
10
-Komentar akan diberikan pada skrip untuk menjelaskan suatu
skrip css tertentu.
-Komentar pada CSS hampir sama dengan komentar pada bahas C
atau C++, yaitu :
Komentar Pada CSS
h1 {
color: red; /* memberikan warna merah pada heading 1 */
}
/* isi komentar */
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
11
Ada beberapa Selector pada CSS diantaranya :Macam-macam CSS
- Tag/Elemen HTML
H1{ color:green}
i { font-style:normal)
- Class
.isiteks {
font-family : Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6699FF;
}
<body>
<p class=“isiteks”>Ayo Belajar CSS</p>
</body>
Ditulis di antara <style>….</style>
Pemanggilan di antara skrip HTML
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
12
- ID
#header {
font-size: 20px;
}
<DIVID = “header”>..</DIV
Ditulis di antara <style>….</style>
Pemanggilan di antara skrip HTML
-Digunakan untuk mendefinisikan tag secara individual atau spesifik
-Penggunaan selektor ID akan diawali dengan tanda pagar (#) .
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
13
- PSEUDO
-Selector PSEUDO biasanya digunakan untuk mengatur LiNK pada suatu kondisi tertentu
-Misal : Saat link diKlik warnanya berubah menjadi biru.
selector:pseudo-class { property:value }
Ditulis di antara <style>….</style>
a:link{
color :#FF0000;
text-decoration: none;
}
a:visited{
color :#0000FF;
}a:hover{ color :#00CC00;}
a:active{
color :#FFFF00;
}
<body>
<p><a href=“index.html”>Home</a></p>
</body
Pemanggilannya :
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
14
Apa itu Grouping dan Inheritance ?Grouping dan Inheritance
- Grouping
-Merupakan pengelompokan beberapa tag HTML dengan properti dan value yang sama.
-Metode ini akan membantu menghemat penulisan tag HTML.
Selector1, Selector2, Selector3 {
Property : value;
}
<html>
<head><title>Penulisan Skrip HTML</title>
<style type="text/css">
h1,p,i,u,b {
font-family:Arial, Helvetica, sans-serif;
font-size:24px; color:#0000FF;
}
</style>
</head>
<body>
<h1>WELCOME TO MYWEBSITE</h1>
<p>Web Content</p>
<i>Copyright&copy;2010</i>
<u>Malang</u>
<b>Indonesia</b>
</body>
</html>
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
15
- Inheritance
-Bisa disebut dengan pewarisan atau turunan.
-Inheritance pada CSS akan tetap berlaku pada tag-tag yang berada pada turunannya bila
tdk didefinisikan.
<style type=“text/css”>
h1 { color:blue}
</style>
<body
<h1> Ayu Belajar CSS, <span
style=“color:red”>Mudah Kan?</span></h1>
</body>
HANSPEDIA
Web Design : Cascading Style Sheet (CSS)

By : MOH.SULHAN
X
15
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
16
Properti list yang bisa Anda gunakan diantaranya:
qlist-style-type
qlist-style-image
qlist-style-position
Properti List
Selector{property:value;}
ul{
List-style-type : disc|circle| }
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
17
Background-Image
Sintaks :
body {
background-image: none | url;
}
body {
background-image: url(bg.gif);
}
atau
body {
background-image: url(image/bg.gif);
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
18
Background-Repeat
Repeat-X
body {
background-repeat:repeat-x;
background-image: url(bg.gif);
}
body {
background-repeat:repeat-y;
background-image: url(bg.gif);
}
Repeat-Y
body {
background-repeat:no-repeat;
background-image: url(bg.gif);
}
No-Repeat
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
19
Background-Position
Sintaks :
body {
background-repeat:no-repeat;
background-image: url(image/logo.gif);
background-position: top | bottom | left | right | center |;
}
body {
background-repeat:no-repeat;
background-image: url(image/logo.gif);
background-position: top;
}
atau
background-position: top center; | background-position: 50% 50%;
Contoh :
X YX Y
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
20
Font-Family
Sintaks :
p{
font-family: (Value);
}
p{
font-family: Arial, Helvetica, sans-serif;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
21
Font-Size
Sintaks :
p {
font-size: (Value);
}
p{
font-size: 43px;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
22
Font-Style
Sintaks :
p {
font-style: | normal | italic | oblique;
}
p{
font-style:italic;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
23
Font-Weight
Sintaks :
p {
font-weight: | normal | bold | border | lighter ;
}
p{
font-weight: bold;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
24
Font-Align
Sintaks :
p {
teks-align: left | right | center | justify ;
}
p {
teks-align: left;
}
atau
.rata {
teks-align: left;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
25
Text-Decoration
Sintaks :
h1 {
text-decoration: none | underline | overline | line-through | Blink ;
}
h1 {
text-decoration: underline;
}
atau
h1 {
text-decoration: underline blink;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
26
Text-Tranform
Sintaks :
p {
text-transform: none | Capitalize | UPPERCASE | lowercase;
}
p {
text-transform: capitalize;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
27
Color (Teks)
Sintaks :
p {
color : value;
}
p {
color : red;
}
atau
p {
color : #ff0000;
}
Contoh :
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
28
Letter-Spacing
Sintaks :
H1 {
letter-spacing: value;
}
H1 {
letter-spacing: 30px;
}
Contoh :
Letter-Spacing digunakan untuk memberikan jarak anatar karakter
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
29
Properti list yang bisa Anda gunakan diantaranya:
qlist-style-type
qlist-style-image
qlist-style-position
Properti List
Selector{property:value;}
ul {
List-style-type : disc | circle | square | decimal | decimal-leading-zero |
lower-roman | lower-alpha | lower-zero | upper-alpha | upper-latin |
none; }
Selector{property:value;}
ul {
List-style-image : url | none;
}
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
30
Properti List
Selector{property:value;}
ul {
List-style-type : none;
List-style-position : inside | outside;
}
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
31
Properti List Standar
<html>
<head>
<style type="text/css">
ul { list-style-type:dics; }
</style>
</head>
<body>
<p>Bahasa Pemrograman Web</p>
<ul>
<li>HTML</li>
<li>PHP</li>
<li>ASP</li>
<li>JSP</li>
</ul>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
32
Properti List dg Gambar
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
list-style-image:url(book.jpg);
}
</style>
</head>
<body>
<p>Bahasa Pemrograman Web</p>
<ul>
<li>HTML</li>
<li>PHP</li>
<li>ASP</li>
<li>JSP</li>
</ul>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
33
Properti List dg Position
<html>
<head>
<style type="text/css">
ul {
list-style-type:square;
list-style-position:inside;
}
</style>
</head>
<body>
<p>Bahasa Pemrograman Web</p>
<ul>
<li>HTML</li>
<li>PHP</li>
<li>ASP</li>
<li>JSP</li>
</ul>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
34
Properti Border yang bisa Anda gunakan diantaranya:
qBorder-style
qBorder-Bottom-(style)-(Width)-(Color)
qBorder-Top-(style)-(Width)-(Color)
qBorder-Left-(style)-(Width)-(Color)
qBorder-Right-(style)-(Width)-(Color)
Properti Border
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
35
Properti Border
Selector (class) {property:value;}
.class {
Border-style : none | dotted | dashed | solid | double | groove | ridge |
inset | outset | none; }
Selector (class) {property:value;}
.class {
Border-Bottom-style : none | dotted | dashed | solid | double | groove |
ridge | inset | outset | none; }
Selector (class) {property:value;}
.class {
Border-Bottom-width : value(pixels, points, in, cm, mm, picas, ems,
exs, %); }
Selector (class) {property:value;}
.class {
Border-Bottom-color : value(name, hexa, rgb); }
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
36
Properti Border-style
<html>
<head>
<style type="text/css">
.b1 { border-style:solid;}
.b2 { border-style:dotted;}
.b3 { border-style:double;}
.b4 { border-style:dashed;}
.b5 { border-style:groove;}
.b6 { border-style:inset;}
.b7 { border-style:outset;}
.b8 { border-style:ridge;}
</style>
</head>
<body>
<p class="b1">BORDER DOLID</p>
<p class="b2">BORDER DOTTED</p>
<p class="b3">BORDER DOUBLE</p>
<p class="b4">BORDER DASHED</p>
<p class="b5">BORDER GROOVE</p>
<p class="b6">BORDER INSET</p>
<p class="b7">BORDER OUTSET</p>
<p class="b1">BORDER RIDGE</p>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
37
Properti Border-style
<html>
<head>
<style type="text/css">
.kotak { border-top-width:5px;
border-right-width:5px;
border-bottom-width:5px;
border-left-width:5px;
border-top-style:solid;
border-right-style:solid;

/* mendefinisikan border-bottom-style:dotted */
border-bottom-style:dotted;
border-left-style:solid;
border-top-color:#FF9900;
border-right-color:#FF9900;
border-bottom-color:#FF9900;
border-bottom-color:#FF9900;
}
</style></head>
<body>
<p class="kotak">Membuat Web itu mudah.!
tetapi membuat web yang baik belum tentu semua
orang bisa.Dibutuhkan pengalaman dan kreativitas
dalam membuatnya</p>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
38
Properti Margin & Padding yang bisa Anda gunakan diantaranya:
qMargin
qPadding
qBox-Model
Properti Margin & Padding
Selector {property:value;}
body {
margin-bottom:value;
margin-left:value;
margin-right:value;
margin-top:value;
}
Selector {property:value;}
.class {
padding-bottom:value;
padding-left:value;
padding-right:value;
padding-top:value;
}
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
39
Properti Margin
<html>
<head>
<style type="text/css">
body {
margin-top: 4cm;
margin-right:3cm;
margin-bottom:3cm;
margin-left:4cm;
}
</style>
</head>
<body>
<p>Agar tampilan informasi yang disajikan di
website terkesan menarik,
perlunya kita mengatur marginnya, yaitu mengatur
batas atas, bawah, kanan, dan kiri.
Pengaturan margin yang baik akan membuat
tampilan informasi yanng dibuat terlihat lebih rapih
dan profesional.<br>
Pengaturan margin tersebut dapat dilakukan dengan
teknologi CSS.</p>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
40
Properti Padding
<html>
<head>
<style type="text/css">
.kotak { padding-top: 25px;
padding-right:25px;
padding-bottom:25px;
padding-left:25px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
</style>
</head>
<body>
<p class="kotak">Agar tampilan informasi yang
disajikan di website terkesan menarik,
perlunya kita mengatur marginnya, yaitu mengatur
batas atas, bawah, kanan, dan kiri.
Pengaturan margin yang baik akan membuat
tampilan informasi yanng dibuat terlihat lebih rapih
dan profesional.<br>
Pengaturan margin tersebut dapat dilakukan dengan
teknologi CSS.</p>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

By : MOH.SULHAN
X
41
Properti Box-Model
<html>
<head>
<style type="text/css">
.kotak {
border-style:solid;
margin: 50px;
padding:25px;
}
</style>
</head>
<body>
<p class="kotak">Agar tampilan informasi yang
disajikan di website terkesan menarik,
perlunya kita mengatur marginnya, yaitu mengatur
batas atas, bawah, kanan, dan kiri.
Pengaturan margin yang baik akan membuat
tampilan informasi yanng dibuat terlihat lebih rapih
dan profesional.<br>
Pengaturan margin tersebut dapat dilakukan dengan
teknologi CSS.</p>
</body>
</html>
Web Design : Cascading Style Sheet (CSS)
HANSPEDIA

THANKS
Moh. Sulhan, S.T., M.KOM
Tags
website html css webdesign
Categories
Technology
Download
Download Slideshow Get the original presentation file
Quick Actions
Statistics
  • Views 3
  • Slides 43
  • Age 75 days
Related Slideshows
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx 11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx 10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
44 views
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx 13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx 11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
Know for Certain 21
Know for Certain
DaveSinNM
19 views
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx 17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views
View More in This Category