1 / 25

Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties

Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties. Cascading Style Sheets (CSS). Definisi. Cascading Style Sheets. (CSS) adalah. suatu. teknologi. yang. digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan

morgan-vazquez
Download Presentation

Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CascadingStyleSheets (CSS) -KonsepdasarCSS -CSSproperties

  2. CascadingStyleSheets(CSS) Definisi CascadingStyleSheets (CSS)adalah suatu teknologi yang digunakanuntukmemperindahhalamanwebsite(situs),dengan CSSkitadapatdenganmudahmengubahkeseluruhanwarnadan tampilanygadadisituskitasekaligusmemformatulangsituskita. CSSinitelahdistandarkanolehWorldWideWebConsortium(W3C) untukdigunakandiwebbrowser. KeuntunganCSS • Dapatdi-updatedengancepatdanmudah,karenakitacukup mendefinisikansebuahstyle-sheetglobalyangberisiaturan- aturanCSStersebutuntukditerapakanpadaseluruhdokumen- dokumenHTMLpadahalamansituskita. • Useryangberbedadapatmempunyaistyle-sheetygberbedapula. • Ukurandankompleksitasdocumentcodedapatdiperkecil.

  3. CSS:Contoh <title>cssuntuktabel</title> <styletype="text/css"> <!-- th{font-weight:bold; background-color:blue; color:white;} tr{background-color:silver; color:blue;} --> </style> </head> <body> <table> <tr><th>Kata</th><th>Arti</th></tr> <tr><td>Blue</td><td>Biru</td></tr> <tr><td>Green</td><td>Hijau</td></tr> </table> </body>

  4. CascadingStyleSheets(CSS) Sebuahstylesheetterdiridaribeberapaaturan(rules).Masing- masingaturanterdiridarisatuataulebihselektor(selector)dan sebuahblokdeklarasi(declarationblock).Sebuahblokdeklarasi terdiridaribeberapadeklarasiyangdipisahkanolehtitikkoma(;). Masing-masingdeklarasiterdiridariproperty,titikdua(:)dannilai (value). Contoh: <STYLETYPE=“text/css”> I,U{color:red} rules B{color:green;text-decoration:underline;font-family:Arial} </STYLE> declarationblok selector

  5. Selector 1.Selektordapatditulissecarakelompok,dipisahkan dengantandakoma.(GROUPING) Contoh: Semuaelemenheaderakanditampilkandalamteks berwarnahijau h1,h2,h3,h4,h5,h6{color:green}

  6. Selector Mendefinisikanstyleyangberbedauntuktypeelemen HTMLyangsama(ClassSelector) Contoh: Terdapatduatypeparagraphdalamsuatudokumen:satu paragrafratakanan,danparagrafyanglainratatengah p.right{text-align:right} p.center{text-align:center} Atributclassharusdigunakandalamdokumenhtml <pclass="right">Paragrafiniakanratakanan. </p><pclass="center">Paragrafiniakanratatengah.</p>

  7. Untukmenerapkanlebihdarisatuclassper elemen,syntaknyaadalah: <pclass="centerbold">Iniadalahparagraf.</p> Namatagdapatdisertakandalamselektor untukmendefiniskanstyleyangakan digunakanolehsemuaelemenHTMLyang mempunyaiclasstersebut. Contoh: .center{text-align:center}

  8. Dalamkodeberikutelemenh1danelemen pmempunyaiclass=“center”.Halini mempunyaiartibahwakeduaelemenakan mengikutiaturandalamselektor“.center” <h1class="center">Headinginiakanratatengah</h1> <pclass="center">Paragrafinijugaakanratatengah.</p>

  9. SelectorID PendefinisianstyleuntukelemenHTMLdapatdilakukan denganselectorid.SelektorIDdidefinisikansebagai#. Contoh Aturanstyleberikutakanmenyesuaikanelemenyang mempunyaisebuahatributiddengannilai“hijau” #green{color:green} Aturanstyleberikutakansesuaidenganelemenpyang mempunyaiiddengannilai“para1” p#para1{text-align:center;color:red}

  10. MemasukkanStyleSheet 1.EksternalStyleSheet Eksternalstylesheetidealketikastyle diterapkanuntukbeberapahalaman.Dengan sebuaheksternalstylesheet,perubahanuntuk keseluruhanhalamanwebdilakukandengan merubahsatufilesaja.Setiaphalamanharus linkkestylesheetmenggunakantag<link> <head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>

  11. Contoh

  12. 2.InternalStyleSheet Internalstylesheetseharusnyadigunakan ketikadokumentunggalmempunyaistyle unik.Pendefinisianinternaldalambagian headdenganmenggunakantag<style>. <head><styletype="text/css"> hr{color:sienna} p{margin-left:20px} body{background-image:url("images/back40.gif")}</style></head>

  13. Contoh <html> <head> <styletype="text/css"> p.normal{font-variant:normal} p.small{font-variant:small-caps} </style> </head> <body> <pclass="normal">Thisisaparagraph</p> <pclass="small">Thisisaparagraph</p> </body> </html>

  14. 3.InlineStyle •Inlinestylesdigunakandengan menggunakanatributstyledalamtagyang relevan.Atributstyledapatberisibeberapa propertiCSS. <pstyle="color:sienna;margin-left:20px"> Thisisaparagraph</p>

  15. MultipleStyleSheet Jikabeberapapropertitelahdisetuntukselektoryangsama dalamstylesheetyangberbeda,nilaiakandiwariskandaristyle sheetyanglebihkhusus. Contoh Sebuahexternalstylesheetmempunyaipropertisebagaiberikut: h3{color:red;text-align:left;font-size:8pt} Dansebuahinternalstylesheetmempunyaipropertiuntuk selektorh3adalah: h3{text-align:right;font-size:20pt} Jikahalamandenganinternalstylesheetjugame-linkke eksternalstylesheet,makapropertih3akanmenjadi: h3{color:red;text-align:right;font-size:20pt}

  16. CSS:FontProperty Font Syntax: font:<value> PossibleValues:[<font-style>||<font-variant>||<font-weight>]?<font-size> [/<line-height>]?<font-family> Contoh: P{font:italicbold12pt/14ptTimes,serif} •FontSize Syntax: font-size:<value> PossibleValues:<absolute-size>|<relative-size>|<length>|<percentage> •<absolute-size>:xx-small|x-small|small|medium|large|x-large|xx-larg •<relative-size>:larger|smaller •<percentage>(inrelationtoparentelement)

  17. CSS:FontProperty FontStyle Syntax:font-style:<value> PossibleValues:normal|italic|oblique FontVariant Syntax:font-variant:<value> PossibleValues:normal|small-caps FontWeight Syntax:font-weight:<value> PossibleValues:normal|bold|bolder|lighter|100|200|300| 400|500|600|700|800|900 • • •

  18. CSS:Contoh

  19. CSS:Color&BackgroundProperty •Color Syntax:color:<color> Nilai(value)daricoloradalahsebuahkeywordatausebuahkodeRGB. 16keyworddiambildaripaletteWindowsVGA:aqua,black,blue, fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver, teal,white,andyellow. Ada4caradalammenuliskanwarnamenggunakankodeRGB: #rrggbb(e.g.,#00cc00) #rgb(e.g.,#0c0) rgb(x,x,x)dimanaxadalahintegerantara0dan255(e.g.,rgb(0,204,0)) rgb(y%,y%,y%)dimanayadalahnomorantara0.0dan100.0(e.g.,rgb(0%,80%,0%)) •BackgroundColor Syntax:background-color:<value> PossibleValues:<color>|transparent •Background Syntax:background:<value> PossibleValues:<background-color>||<background-image>||<backgroundrepeat> ||<background-attachment>||<background-position>

  20. CSS:Color&BackgroundProperty BGcolor Hijau BGcolor Sesuai BGcolor body BGcolor ungu

  21. CSS:TextAlignment&BoxProperty • TextAlignment Syntax:text-align:<value> PossibleValues:left|right|center|justify • BoxProperties BottomBorderWidth Syntax:border-bottom-width:<value> PossibleValues:thin|medium|thick|<length> • Width Syntax:width:<value> PossibleValues:<length>|<percentage>|auto • Height Syntax:height:<value> PossibleValues:<length>|auto • BorderStyle Syntax:border-style:<value> PossibleValues:[none|dotted|dashed|solid|double|groove| ridge|inset|outset]{1,4}

  22. CSS:Contoh <title>cssuntuktabel</title> <styletype="text/css"> <!-- th{font-weight:bold; background-color:blue; color:white;} tr{background-color:silver; color:blue;} --> </style> </head> <body> <table> <tr><th>Kata</th><th>Arti</th></tr> <tr><td>Blue</td><td>Biru</td></tr> <tr><td>Green</td><td>Hijau</td></tr> </table> </body>

  23. CSS:Contoh <HTML> <HEAD> <TITLE>Text-indent</TITLE> </HEAD> <BODY> <PSTYLE="border-style:ridge; border-width:1"> border-style:ridge<BR> border-width:1<BR> </P> <PSTYLE="border-style:ridge; border-width:10"> border-style:ridge<BR> border-width:10<BR> </P> <PSTYLE="border-style:ridge; border-width:20"> border-style:ridge<BR> border-width:20<BR> </P> </BODY> </HTML>

  24. CSS:StyleSheetEksternal Pendefinisianstyledapatdilakukanpadaberkastersendiri.Carasepertiini memungkinkandefinisistyledapatdigunakandibeberapaberkasHTML. Untukmenggunakanstyleeksternal,bisadigunakantag<LINK>. • • <HTML> <HEAD> <LINKREL="STYLESHEET"TYPE= "text/css" HREF="styleku.css"> </HEAD> <TITLE>ContohStyleEksternal</TITLE> <BODY> Tes,tes,123... <PID="besar"CLASS="miring"> /*------------------------------------ Berkas:styleku.css Berisicontohdefinisistyle ------------------------------------*/ BODY{background-color:blue; color:white;} .miring{font-style:italic;} #besar{font-size:39pt;} Besarlhodanmiring </P> </BODY> </HTML>

  25. CSS:StyleSheetEksternal Outputprogram Tulisanberwarnaputih Latarbelakangberwarnabiru

More Related