• Apa itu CSS ? Style sheet ? Cascade ? • Kegunaan CSS ? • Kenapa tidak menggunakan font ?
Pemrograman Internet Part 3
11/09/2012
11/09/2012
Intro Font • is used to control text. • The 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
11/09/2012
Font • • • •
Gives this Gives this Text more back again --** IF **-- that font is on the end user’s computer! • 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. 11/09/2012
1
11/09/2012
How about font ? • If you've read many other Web pages, you may have read that the tag has been deprecated. • The element is deprecated in HTML 4.01. (http://www.w3schools.com)
• 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.
11/09/2012
11/09/2012
CSS • 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 tags in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. • (http://www.w3.org/)
• 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, http://www.w3.org/TR/REC-CSS1 • Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2
11/09/2012
11/09/2012
2
11/09/2012
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; }
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
• This is called Cascading 11/09/2012
Adding CSS •
There are several ways to include styles – External style sheet (saved as a .css file) – Internal style sheet (inside the tag) – Inline style (inside an HTML element)
11/09/2012
Inline Style Sheet • In the HTML Tag • Can use multiple styles in a single tag •
This is a paragraph
• 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 11/09/2012
3
11/09/2012
Internal Style Sheet • In the Head Tag – <style type="text/css"> h1 {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} –
• 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
11/09/2012
Font – Using Internal Style • To change fonts use the style tag in the head of your webpage Style <style type=“text/css”> body {font-family:Arial} 11/09/2012
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
Answer <style type=“text/css”> body {font-family:"Comic Sans MS"} body {color:silver} body {background-color:navy} h1 {color:yellow} h1 {font-family:Arial}
11/09/2012
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}
11/09/2012
• The web pages link to an external style sheet by using the tag • • 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
11/09/2012
CSS File • • • •
External Style Sheet
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")}
Inline
11/09/2012
5
11/09/2012
Syntax
CSS Syntax • Secara umum dibagi menjadi 3 bagian yaitu :
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 ( ; ).
11/09/2012
1. Selector (elemen yang akan didefinisikan) 2. Properti (atribut yang akan diubah) 3. Nilai/Value Selector { property: value }
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.
11/09/2012
CSS – Order of Precedence •
{font-family: Verdana, serif;}
If more than one style is used the following order of importance is applied: – – – –
•
Browser default External style sheet Internal style sheet (inside the tag) Inline style (inside an HTML element)
Inline has the highest priority
11/09/2012
6
11/09/2012
CSS Syntax • The syntax is made up of the following components
Combining Selectors • You can combine elements within one selector in the following fashion.
– 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 “ ” 11/09/2012
11/09/2012
CSS Comment 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 dan Class 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 :
This is paragraf with style
JANGAN memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox.
11/09/2012
11/09/2012
7
11/09/2012
CSS ID dan Class
Elemen-elemen CSS
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.
Font Text Color Link
Pada contoh di bawah, elemen p semua dengan class = "center"akan di buat rata tengah : p.center {text-align:center;}
Paragraf ini berada di tengah
JANGAN memulai nama kelas dengan angka! Ini hanya didukung di Internet Explorer. 11/09/2012
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
31
32
8
11/09/2012
Color
Link 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.
Elemen color yang digunakan untuk mengatur warna teks dan background halaman web
• 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.
33
34
Summary
Class example
• 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 tag) – Inline style (inside an HTML element)
P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah?
J: Karena itu merupakan sugesti terhadap diri kita sendiri
11/09/2012
9
11/09/2012
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 email : [email protected] • Subject : nama_nim_kelas_tgsCSS • Nama file : nim_CSS (zip/rar) 11/09/2012
