css pertemuan 12 matakuliah: l0182 / web & animation design tahun: 2008
Post on 21-Dec-2015
226 Views
Preview:
TRANSCRIPT
CSSPertemuan 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 <head> and
</head> tags, type <style>– Type the name of the tag and properties you wish to define– Type </style>
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 <link rel=stylesheet type=“text/css” href=“url.css”>
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
Property Description
font-family: familyname To set the font family
font-style: italic/oblique/normal To create italics/oblique/normal text
font-weight: bold/normal To apply bold/normal formatting
font-size: sizept, e.g., 12pt To set the font size
line-height: sizept, e.g., 12pt To set the line height
color: #rrggbb To set the text color
background: #rrggbb To set the text background
text-align: left/right/center/justify To align text
text-decoration: underline/overline/line-through/blink/none
To underline/overline/line-through/blink text
Bina Nusantara
Layout with StylesProperty Description
height: size, e.g., 200 Setting the element’s height
width: size, e.g., 200 Setting 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
top related