SlideShare une entreprise Scribd logo
1  sur  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
Pengenalan css
Pengenalan css

Contenu connexe

En vedette

DrKPI-WOM-viral-marketing-checklist
DrKPI-WOM-viral-marketing-checklistDrKPI-WOM-viral-marketing-checklist
DrKPI-WOM-viral-marketing-checklistDrKPI
 
Tópicos literarios
Tópicos literariosTópicos literarios
Tópicos literariosXocaustra
 
Places to Visit in Southern California
Places to Visit in Southern CaliforniaPlaces to Visit in Southern California
Places to Visit in Southern CaliforniaSamantha Weiss
 
Balanced scorecard-casos-reales
Balanced scorecard-casos-realesBalanced scorecard-casos-reales
Balanced scorecard-casos-realesPedro Ordoñez
 
An Introduction to Amazon VPC
An Introduction to Amazon VPCAn Introduction to Amazon VPC
An Introduction to Amazon VPCSarah Z
 
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...Manaswini Kar
 
The evolution of the charity case study
The evolution of the charity case studyThe evolution of the charity case study
The evolution of the charity case studyCharlotte Harris
 
MEpstein_yoga resume_7_21_15
MEpstein_yoga resume_7_21_15MEpstein_yoga resume_7_21_15
MEpstein_yoga resume_7_21_15Meryl Epstein
 
Meryl_Epstein_PHX_Yoga_Resume_5_17_15
Meryl_Epstein_PHX_Yoga_Resume_5_17_15Meryl_Epstein_PHX_Yoga_Resume_5_17_15
Meryl_Epstein_PHX_Yoga_Resume_5_17_15Meryl Epstein
 
Houston Presentation, April 2, 2014, Modified
Houston Presentation, April 2, 2014, ModifiedHouston Presentation, April 2, 2014, Modified
Houston Presentation, April 2, 2014, ModifiedJames F. McCarthy
 

En vedette (16)

презентация1
презентация1презентация1
презентация1
 
DrKPI-WOM-viral-marketing-checklist
DrKPI-WOM-viral-marketing-checklistDrKPI-WOM-viral-marketing-checklist
DrKPI-WOM-viral-marketing-checklist
 
Tópicos literarios
Tópicos literariosTópicos literarios
Tópicos literarios
 
Places to Visit in Southern California
Places to Visit in Southern CaliforniaPlaces to Visit in Southern California
Places to Visit in Southern California
 
Presentation1
Presentation1 Presentation1
Presentation1
 
Balanced scorecard-casos-reales
Balanced scorecard-casos-realesBalanced scorecard-casos-reales
Balanced scorecard-casos-reales
 
An Introduction to Amazon VPC
An Introduction to Amazon VPCAn Introduction to Amazon VPC
An Introduction to Amazon VPC
 
Lebanon
LebanonLebanon
Lebanon
 
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...
implications-for-gold-mineralisation-in-the-gopapur-area-keonjhardistrict-ori...
 
The evolution of the charity case study
The evolution of the charity case studyThe evolution of the charity case study
The evolution of the charity case study
 
MEpstein_yoga resume_7_21_15
MEpstein_yoga resume_7_21_15MEpstein_yoga resume_7_21_15
MEpstein_yoga resume_7_21_15
 
Slide tips
Slide tipsSlide tips
Slide tips
 
Meryl_Epstein_PHX_Yoga_Resume_5_17_15
Meryl_Epstein_PHX_Yoga_Resume_5_17_15Meryl_Epstein_PHX_Yoga_Resume_5_17_15
Meryl_Epstein_PHX_Yoga_Resume_5_17_15
 
2009156
20091562009156
2009156
 
Vinayak Susladkar
Vinayak SusladkarVinayak Susladkar
Vinayak Susladkar
 
Houston Presentation, April 2, 2014, Modified
Houston Presentation, April 2, 2014, ModifiedHouston Presentation, April 2, 2014, Modified
Houston Presentation, April 2, 2014, Modified
 

Similaire à Pengenalan css

Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfSayedAchmady1
 
Cascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfCascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfario48
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webIlham Yahya
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)Dnr Creatives
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 af fr
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 azaenald i
 
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 WebsiteShofura Kamal
 
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 CSSwebdevccitelu
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPutu Mardika
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxBahrulremkote
 

Similaire à Pengenalan css (20)

Pengenalan css
Pengenalan cssPengenalan css
Pengenalan css
 
05 css
05 css05 css
05 css
 
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
Cascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfCascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdf
 
CSS
CSSCSS
CSS
 
18040 pertemuan13(css)
18040 pertemuan13(css)18040 pertemuan13(css)
18040 pertemuan13(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
 
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
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptx
 

Pengenalan css

  • 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 ( . )