SlideShare a Scribd company logo
1 of 13
PENGENALAN CSS
CSS = Cascading Style Sheet
Fungsi : mendefenisikan style untuk suatu
teks dengan jenis huruf, ukuran , warna
tertentu.
MEMBUAT CSS
CARA PERTAMA :
mengetikkan langsung dalam tag html
sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
CARA KEDUA :
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 adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang
diinginkan untuk selector.
Selector { property1 : value1 ;
property2 : value2;….
propertyN : valueN ; }
CARA KETIGA :
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 :
<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 adalah red, 5px, 50%
ID SELECTOR dan CLASS
ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe)
CLASS diawali dengan tanda titik ( . )
PENGENALAN CSS.ppt
PENGENALAN CSS.ppt
PENGENALAN CSS.ppt

More Related Content

Similar to PENGENALAN CSS.ppt

Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
Ilham Yahya
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
 

Similar to PENGENALAN CSS.ppt (20)

Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Css
CssCss
Css
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
 
Praktikum CSS
Praktikum CSSPraktikum CSS
Praktikum CSS
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSSPemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSS
 
Materi CSS.ppt
Materi CSS.pptMateri CSS.ppt
Materi CSS.ppt
 
Laporan pbw
Laporan pbwLaporan pbw
Laporan pbw
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
 
Webdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSSWebdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSS
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 
Modul css
Modul cssModul css
Modul css
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptx
 
Pemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsPemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style Sheets
 
Pengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docxPengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docx
 
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman webModul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman web
 
dasar-css1.ppt
dasar-css1.pptdasar-css1.ppt
dasar-css1.ppt
 

More from GumilarPratama3

More from GumilarPratama3 (6)

pseudo class.pptx
pseudo class.pptxpseudo class.pptx
pseudo class.pptx
 
font.pptx
font.pptxfont.pptx
font.pptx
 
Materi 4 - Tampilan Format Multimedia.pptx
Materi 4 - Tampilan Format Multimedia.pptxMateri 4 - Tampilan Format Multimedia.pptx
Materi 4 - Tampilan Format Multimedia.pptx
 
pertemuan-5-memory1.ppt
pertemuan-5-memory1.pptpertemuan-5-memory1.ppt
pertemuan-5-memory1.ppt
 
161924-software-development-template-16x9 (1).pptx
161924-software-development-template-16x9 (1).pptx161924-software-development-template-16x9 (1).pptx
161924-software-development-template-16x9 (1).pptx
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 

PENGENALAN CSS.ppt

  • 1. PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
  • 2. MEMBUAT CSS CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
  • 3. CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
  • 4. Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector. Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }
  • 5.
  • 6.
  • 7. CARA KETIGA : 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>
  • 8.
  • 9. 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 adalah red, 5px, 50%
  • 10. ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )