WEB DEVELOPMENT by Hestiasari Rante-Pasila Week 3 Cascading Style Sheets (CSS) Part 1
WHAT IS CSS? CSS: Cascading Style Sheets Styles ini mendeskripsikan bagaimana menampilkan elemen-elemen HTML Styles ini telah ditambahkan pada HTML 4.0 untuk menyelesaikan suatu masalah External Style Sheets dapat menyelesaikan banyak pekerjaan External Style Sheets ini diletakkan dalam CSS files Styles biasanya di-save tersendiri sebagai.css files
CSS FEATURES CSS mengontrol style dan layout dari multiple Web pages sekaligus. CSS sangat membantu dalam menciptakan websites yang bagus dengan berbagai efek yang menarik. CSS dapat mengontrol text (font, color, size), dan layout (mis. backgrounds, margin, padding, dll) dari satu website, dalam satu single file! CSS dapat menyelesaikan BANYAK pekerjaan.
CSS SYNTAX [1] CSS syntax terdiri dari tiga bagian, yaitu selector, property, dan value: selector property:value Selector biasanya adalah HTML element/tag yang akan didefenisikan. Property adalah atribut yang ingin diganti/diedit, dan setiap property dapat mengandung suatu value. Property dan value dipisahkan oleh tanda titik dua dan dilingkupi oleh tanda kurung kurawal: body color:black Jika value lebih dari satu kata, beri tanda kutip untuk value tersebut: p font-family:"sans serif"
CSS SYNTAX [2] Jika ingin menspesifikasikan lebih dari satu property, pisahkan setiap property dengan tanda titik koma. p text-align:center;color:red Untuk membuat suatu defenisi style lebih mudah untuk dibaca, deskripsikan setiap property pada satu line tersendiri, misalnya: p text-align:center; color:black; font-family:arial
THREE WAYS TO INSERT CSS Ada tiga cara untuk meng-insert suatu style sheet: External style sheet Internal style sheet Inline style
External style sheet Suatu external style sheet disebut ideal ketika style tersebut dapat diaplikasikan untuk banyak pages. Dengan satu external style sheet, keseluruhan tampilan Website dapat diubah dari satu file saja. Setiap page harus me-link pada style sheet dengan tag <link>. Tag <link> ini diletakkan pada bagian head: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> External style sheet dapat dibuat pada text editor apapun (notepad, wordpad). File tersebut TIDAK BOLEH berisi html tags. Dan style sheet tersebut di-save dengan extensi.css. Satu contoh file style sheet ditunjukkan di bawah ini: hr color:sienna p margin-left:20px body background-image:url("images/back40.gif")
Internal style sheet Suatu internal style sheet harus digunakan ketika suatu single document memiliki unique style. Deskripsikan internal styles pada bagian head dari HTML page, dengan menggunakan tag <style> tag, seperti di bawah ini: <head> <style type="text/css"> hr color:sienna p margin-left:20px body background-image:url("images/back40.gif") </style> </head>
Inline style Penggunaan inline style akan meminimalkan banyak advantages dari style sheets karena memixing content dengan presentation. Gunakan metode ini dengan sangat hati-hati! Untuk menggunakan inline styles, gunakanlah style attribute pada relevant tag. Style attribute dapat berisikan CSS property apapun. Contoh di bawah ini menunjukkan bagaimana merubah color dan left margin dari suatu paragraph: <p style="color:sienna;margin-left:20px">this is a paragraph.</p>
CSS TOPICS CSS Background CSS Text CSS Font CSS Border CSS Outline CSS Margin CSS Padding CSS List CSS Table CSS Dimension
CSS BACKGROUND CSS background digunakan untuk mendefenisikan efek background dari suatu element: background-color body background-color:#b0c4de background-image body background-image:url('paper.gif') body background-image:url('bgdesert.jpg') background-repeat body background-image:url('gradient2.png'); background-attachment background-position
CSS TEXT Text color property digunakan untuk men-set color dari text. Color dapat didefenisikan dengan: colour name, mis. "red" RGB value, mis. "rgb(255,0,0)" Hex value, mis. "#ff0000" body color:blue h1 color:#00ff00 h2 color:rgb(255,0,0) Text-align property digunakan untuk men-set horizontal alignment dari suatu text (centered, left, right, justified). h1 text-align:center p.date text-align:right p.main text-align:justify
CSS FONT Font Family Font family: Di-set dengan font-family property. Font Style pfont-family:"times New Roman",Georgia,Serif Font-style property kebanyakan digunakan untuk menspesifikasikan italic text. Font-style property memiliki tiga values: Font Size p.normal font-style:normal p.italic font-style:italic p.oblique font-style:oblique The font-size property sets the size of the text. h1 font-size:40px h2 font-size:30px p font-size:14px
CSS BORDER Border Width p.one border-style:solid; border-width:5px; p.two border-style:solid; border-width:medium; Border Color p.one border-style:solid; border-color:red; p.two border-style:solid; border-color:#98bf21;
<html> <head> <style type="text/css"> p.one border-style:solid; border-width:5px; p.two border-style:solid; border-width:medium; p.three border-style:solid; border-width:1px; </style> </head> <body> <p class="one">some text.</p> <p class="two">some text.</p> <p class="three">some text.</p> <p><b>note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>