CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008

Bina Nusantara Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat Web sederhana dengan menggunakan CSS

Bina Nusantara Outline Materi Definition Creating an Internal Style Sheet Creating an External Style Sheet The Class Selector The Id Selector Defining Styles for Links Formatting Text with Styles Layout with Styles CSS Comments The Advantages of Using Style Sheets

Bina Nusantara CSS Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Syntax : –The CSS syntax is made up of three parts : a selector, a property and a value. –The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.

Bina Nusantara CSS (cont..) –Example :  Body element will be displayed in black text color  If the value is multiple words, put quotes around the value  If you wish to specify more than one property, you must separate each property with a semicolon.  You can group selectors. All header elements will be displayed in green text color

Bina Nusantara Creating an Internal Style Sheet Internal style sheets are ideal for individual pages with lots of text. They let you set the styles at the top of your page that should be used throughout an HTML document –At the top of your HTML document, between the and tags, type –Type the name of the tag and properties you wish to define –Type

Bina Nusantara Creating an Internal Style Sheet (cont..) 

Bina Nusantara Creating an External Style Sheet External style sheets are ideal for giving all the pages on your Web site a common look. If you plan to apply the style sheet to more than one page, you’re better off using external style sheets. –Create a new text document –Type the name of the tag and properties you wish to define –Save the style sheet as Text Only and give it the.css extension. To use an external style sheet : –In the head section of each and every HTML page in which you wish to use the style sheet, type

Bina Nusantara Creating an External Style Sheet (cont..) The.css file The.html file

Bina Nusantara The Class Selector With the class selector you can define different styles for the same type of HTML element.

Bina Nusantara The Id Selector You can define styles for HTML elements with the id selector. The id selector is defined as a #. Instead of creating a whole class of HTML tags, you can also identify individual tags. Each id in an HTML document must be unique.

Bina Nusantara Defining Styles for Links You can change the background and foreground color of your links. A:visited  to change the appearance of links that the visitor has already clicked A:active  to change the appearance of links when clicked A:hover  to change the appearance of links when pointed to Example : 

Bina Nusantara Formatting Text with Styles PropertyDescription font-family: familynameTo set the font family font-style: italic/oblique/normalTo create italics/oblique/normal text font-weight: bold/normalTo apply bold/normal formatting font-size: sizept, e.g., 12ptTo set the font size line-height: sizept, e.g., 12ptTo set the line height color: #rrggbbTo set the text color background: #rrggbbTo set the text background text-align: left/right/center/justifyTo align text text-decoration: underline/overline/line- through/blink/none To underline/overline/line- through/blink text

Bina Nusantara Layout with Styles PropertyDescription height: size, e.g., 200Setting the element’s height width: size, e.g., 200Setting the element’s width border-top/bottom/left/right: thin/medium/thick or sizepx Setting the border padding-top/bottom/left/right: size, e.g., 10 Adding padding around the element margin-top/bottom/left/right: size, e.g., 10 Setting the margins around an element Vertical-align: baseline/middle/sub/super/text- top/text-bottom/top/bottom Aligning elements vertically

Bina Nusantara CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/"

Bina Nusantara The Advantages of Using Style Sheets Styles save time Styles are easy to change Computers are better at applying styles consistently than you are Styles let you control text in ways that are out of reach of HTML tags Styles make it easy to create a common format for all your Web pages