Anda di halaman 1dari 18
Pemrograman Berbasis Web Pertemuan 3 – CSS Program Diploma IPB - Aditya Wicaksono, S.Komp 1
Pemrograman Berbasis Web Pertemuan 3 – CSS Program Diploma IPB - Aditya Wicaksono, S.Komp 1
Pemrograman Berbasis Web Pertemuan 3 – CSS Program Diploma IPB - Aditya Wicaksono, S.Komp 1

Pemrograman Berbasis Web

Pertemuan 3 CSS

Overview • Apa itu CSS • Pengaksesan CSS • Yang dapat dikenai CSS • Kesamaan
Overview • Apa itu CSS • Pengaksesan CSS • Yang dapat dikenai CSS • Kesamaan

Overview

Overview • Apa itu CSS • Pengaksesan CSS • Yang dapat dikenai CSS • Kesamaan CSS
Overview • Apa itu CSS • Pengaksesan CSS • Yang dapat dikenai CSS • Kesamaan CSS

Apa itu CSS

Pengaksesan CSS

Yang dapat dikenai CSS

Kesamaan CSS

Kedalaman CSS

Cascading Style Sheet

Ekstensi file *.css

Versi terakhir adalah CSS 3

• Ekstensi file *.css • Versi terakhir adalah CSS 3 Apa itu CSS Program Diploma IPB
• Ekstensi file *.css • Versi terakhir adalah CSS 3 Apa itu CSS Program Diploma IPB
• Ekstensi file *.css • Versi terakhir adalah CSS 3 Apa itu CSS Program Diploma IPB
• Ekstensi file *.css • Versi terakhir adalah CSS 3 Apa itu CSS Program Diploma IPB

Apa itu CSS

Pengaksesan CSS Internal Inline Eksternal Program Diploma IPB - Aditya Wicaksono, S.Komp 4
Pengaksesan CSS Internal Inline Eksternal Program Diploma IPB - Aditya Wicaksono, S.Komp 4
Pengaksesan CSS Internal Inline Eksternal Program Diploma IPB - Aditya Wicaksono, S.Komp 4
Pengaksesan CSS Internal Inline Eksternal Program Diploma IPB - Aditya Wicaksono, S.Komp 4

Pengaksesan CSS

Internal Inline
Internal
Inline
Eksternal
Eksternal
Inline <div style=“color: red;” >Merah</div> Program Diploma IPB - Aditya Wicaksono, S.Komp 5
Inline <div style=“color: red;” >Merah</div> Program Diploma IPB - Aditya Wicaksono, S.Komp 5
Inline <div style=“color: red;” >Merah</div> Program Diploma IPB - Aditya Wicaksono, S.Komp 5
Inline <div style=“color: red;” >Merah</div> Program Diploma IPB - Aditya Wicaksono, S.Komp 5

Inline

<div style=“color: red;”>Merah</div>

<html> <head> <style type=“text/ css ”> h1 { color: red; } </style> </head>

<html> <head> <style type=“text/css”> h1 { color: red; } </style> </head> <body>

<h1>Merah</h1>

</body>

</html>

Internal

Eksternal Index.html Style.css h1 { color: red; } <html> <head> <link href =“Style.css”

Eksternal

Index.html

Style.css

h1

{

color: red;

}

<html>

<head>

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

</head>

<body>

<h1>Merah</h1>

</body>

</html>

Warna apa yang muncul ? Index.html Style.css h1 { color: red; } <html>   <head>

Warna apa yang muncul ?

Index.html

Style.css

h1

{

color: red;

}

<html>

 

<head>

 

<link href=“Style.css” rel=“stylesheet” type=“text/css” /> <style type=“text/css”> h1 { color: blue; }

</style>

 

</head>

<body>

 

<h1 style=“color: green”>Warna</h1>

 

</body>

</html>

Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB
Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB
Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB
Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB

Prioritas Pengaksesan CSS

Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB -

2

• Inline
• Inline
• Eksternal
• Eksternal
• Internal
• Internal

1

3

Prioritas Pengaksesan CSS 2 • Inline • Eksternal • Internal 1 3 Program Diploma IPB -
Yang dapat dikenai CSS ELEMENT CLASS ID Program Diploma IPB - Aditya Wicaksono, S.Komp 10

Yang dapat dikenai CSS

ELEMENT
ELEMENT
CLASS
CLASS
ID
ID
<html> <head> <style type=“text/ css ”> h1 { color: red; } </style> </head>

<html> <head> <style type=“text/css”> h1 { color: red; } </style> </head> <body>

<h1>Merah</h1>

</body>

</html>

Element

<html> <head> <style type=“text/ css ”> .merah { color: red; } </style>

<html> <head> <style type=“text/css”> .merah { color: red; } </style> </head> <body> <div class=“merah>Merah</div> </body> </html>

Class

<html> <head> <style type=“text/ css ”> #merah { color: red; } </style>

<html> <head> <style type=“text/css”> #merah { color: red; } </style> </head> <body> <div id=“merah>Merah</div> </body> </html>

Id

Warna apa yang muncul ? Index.html Style.css div { color: red; } .warna { color:

Warna apa yang muncul ?

Index.html

Style.css

div { color: red; } .warna { color: green; } #warna { color: blue; }

<html> <head> <link href=“Style.css” rel=“stylesheet” type=“text/css

/>

</head> <body> <div id=“warna” class=“warna”>Warna</div> </body> </html>

Prioritas yang dikenai CSS 1 ID 2 CLASS 3 ELEMENT Program Diploma IPB - Aditya
Prioritas yang dikenai CSS 1 ID 2 CLASS 3 ELEMENT Program Diploma IPB - Aditya
Prioritas yang dikenai CSS 1 ID 2 CLASS 3 ELEMENT Program Diploma IPB - Aditya
Prioritas yang dikenai CSS 1 ID 2 CLASS 3 ELEMENT Program Diploma IPB - Aditya

Prioritas yang dikenai CSS

1 ID
1
ID
2 CLASS
2
CLASS
3 ELEMENT
3
ELEMENT
Kesamaan Style Index.html Style.css div, .merah, #abang { color: red; } <html>   <head>

Kesamaan Style

Index.html

Style.css

div, .merah, #abang

{

color: red;

}

<html>

 

<head>

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

</head>

<body>

<div>Merah</div>

<div id=“abang”>Merah</div> <div class=“merah”>Merah</div> </body>

</html>

Kedalaman Style Index.html Style.css #green { color: green; } .red { color: red; } #green

Kedalaman Style

Index.html

Style.css

#green { color: green; } .red { color: red; }

#green .red {

color: yellow; }

<html>

 

<head>

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

</head>

<body>

<div id=“green”>

<div class=“red”>Warna</div>

</div>

</body>

</html>

Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18
Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18
Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18
Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18
Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18

Terima Kasih

Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 18