Cascade Style Sheet (CSS)

Transkripsi

1 Cascade Style Sheet (CSS) Pemrograman Internet Part 3 Apa itu CSS? Style sheet? Cascade? Kegunaan CSS? Kenapa tidak menggunakan font <tag>? Intro Font <tag> <font></font> is used to control text. The <font> tag specifies the font face, font size, and font color of text. Attributes: Color: 16 English colors,16 million RGB colors Size: 1 is largest, 7 is smallest, +/- is relative Face: What everyone else calls a font Font <tag> <font size=1 color=red>gives this</font> <font size=7 color=blue>gives this</font> Text <font size= +3 >more</font> back again <font face= Courier >--** IF **-- that font is on the end user s computer!</font> Personally, I have found the +/- and face to be useless. Size and color are all you need. If you want to get fancy, learn CSS. 1

2 How about font <tag>? If you've read many other Web pages, you may have read that the <font> tag has been deprecated. The <font> element is deprecated in HTML ( This means that the tag is no longer a part of the HTML specification. While browsers will still support it, most likely for a long time, it's a good idea to switch to the alternative. The proper, modern way to set the size of the text displayed in a Web page is to use Cascading Style Sheets. This is strongly recommended over the use of <font> tags in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. ( CSS CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri CSS memudahkan pembuatan dan pemeliharaan dokumen web Setiap User Agent mempunyai default style sheet Pendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet Spesifikasi CSS1, Spesifikasi CSS2, 2

3 Cascading Multiple style sheets can be applied for the same HTML document Style sheet one h1 { color: #ff0000 } Style sheet two h1 { font-size: 14px } You end up with h1 { color: #ff0000; font-size: 14px; } This is called Cascading Types of Style Sheets Included into a web page in 3 ways External style sheet (best) Internal style sheet (not as good) Inline style (basically breaking the purpose of CSS) Style sheets will cascade, or overwrite similar styles to create one master set of styles Inline overwrites internal, which overwrites external, which overwrites browser default Adding CSS There are several ways to include styles External style sheet (saved as a.css file) Internal style sheet (inside the <head> tag) Inline style (inside an HTML element) Inline Style Sheet In the HTML Tag Can use multiple styles in a single tag <p style="color: blue; margin-left: 20px"> This is a paragraph </p> No real advantage to using this. It is like using the attributes of a tag. Use if want to change a tag from what is being set by a previous style 3

4 In the Head Tag Internal Style Sheet <head> <style type="text/css"> h1 {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> Used to provide style for a particular page Will override external style if you want one page to look different from the rest of the site Font Using Internal Style To change fonts use the style tag in the head of your webpage <html> <head><title>style</title> <style type= text/css > body {font-family:arial} </style> </head> Colours Using Internal Style <style type= text/css > body {font-family:arial} body {color:black} body {background-color:yellow} Activity: Write style to make: H1 yellow and Arial All other text silver and "Comic Sans MS " Background navy colour h1 {color:red} h2 {color:blue} h3 {color:green} </style> 4

5 Answer External Style Sheet <style type= text/css > body {font-family:"comic Sans MS"} body {color:silver} body {background-color:navy} h1 {color:yellow} h1 {font-family:arial} </style> The web pages link to an external style sheet by using the <link> tag <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> If all the pages link to mystyle.css then a change to this file updates the whole site Can write the style sheet in any text editor, for example notepad Must save with the.css extension CSS File Does not contain html tags Is a text file Must be saved as.css Example body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Examples: Inline, Internal, External External body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Internal <style type="text/css"> h1 {color: sienna} p {color:blue;margin-left: 20px} body {background-image: url("images/back40.gif")} </style> Inline <p style="color: blue; margin-left: 30px"> 5

6 Syntax Selector biasanya adalah HTML element yang ingin dibuat style nya. Declaration merupakan isi dari property dan nilai dari CSS. Pemberian nilai dari property digunakan tkita titik dua ( : ), akhir dari property digunakan tkita semicolon ( ; ). CSS Syntax Secara umum dibagi menjadi 3 bagian yaitu : 1. Selector (elemen yang akan didefinisikan) 2. Properti (atribut yang akan diubah) 3. Nilai/Value Selector { property: value } Example H1 { font-size: 14pt; font-style: italic;color: green; } Inheritance CSS Order of Precedence When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. In the given example, Table Tag is nested in the Body Tag The font declared in the body will be inherited by all text in the table no matter the containing element, unless you declare another font for the table. <BODY> {font-family: Verdana, serif;} <TABLE> </TABLE> </BODY> If more than one style is used the following order of importance is applied: Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element) Inline has the highest priority 6

7 CSS Syntax Combining Selectors The syntax is made up of the following components selector {property: value} body {color: black} Property and value separated by : Property and value must be in { } p {font-family: "sans serif"} in this case the value is multiple words, must use You can combine elements within one selector in the following fashion. h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; } CSS Comment CSS ID dan Class Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser. Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini : /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } CSS Id Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik. Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan "#. Aturan style bawah ini akan diterapkan pada elemen dengan id = "para1": #para1 { text-align:center; color:red; } Deklarasi dalam dokumen HTML : <p id="para1"> This is paragraf with style </p> JANGAN memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox. 7

8 CSS ID dan Class CSS Class Selector Class digunakan untuk menentukan style untuk sekelompok elemen. Berbeda dengan selector id, selector class yang paling sering digunakan pada beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu untuk setiap elemen HTML dengan kelas yang sama. Selector Class menggunakan atribut class HTML, dan didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML dengan class = "center"akan dibuat rata tengah :.center {text-align:center;} kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas. Pada contoh di bawah, elemen p semua dengan class = "center"akan di buat rata tengah : p.center {text-align:center;} <p class= center >Paragraf ini berada di tengah</p> Elemen-elemen CSS Font Text Color Link JANGAN memulai nama kelas dengan angka! Ini hanya didukung di Internet Explorer. 30 Font Text Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai beberapa properti. Satu properti dapat mempunyai beberapa nilai. Element text akan membuat tampilan teks menjadi lebih menarik

9 Color Link Elemen color yang digunakan untuk mengatur warna teks dan background halaman web Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari satu bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs ke situs lainnya. CSS menyediakan elemen link yang dapat digunakan untuk mengatur perilaku link. A:link untuk link normal yang belum dikunjungi, belum diklik. A:visited untuk link yang telah dikunjungi. A:active untuk link aktif. Link aktif adalah link yang halaman tujuannya sedang ditampilkan oleh web browser. A:hover untuk link yang hover. Saat mouse digerakkan atau mouse over di atas suatu link, kondisi ini disebut link hover Summary CSS (Cascading Style Sheet) digunakan untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola. Ada 3 mekanisme untuk mengaplikasikan CSS, yaitu: External style sheet (saved as a.css file) Internal style sheet (inside the <head> tag) Inline style (inside an HTML element) Class example <HTML> <HEAD> <STYLE TYPE="text/css">.tanya {color: red}.jawab {color: blue} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> terhadap diri kita sendiri </BODY> </HTML> 35 9

10 Homework Create a html page that uses an inline style save this in inline.html Create a html page that uses an internal style save as internal.html Create a css file using notepad create styles for background color, paragraphs, headings, links etc save as test.css Create 2 web pages make them use the external style sheet test.css Kumpul hari ini sblm jam 12 siang bsok (12 September 2012) Ke lyve.kembuan@gmail.com Subject : nama_nim_kelas_tgscss Nama file : nim_css (zip/rar) 10