Title Goes Here - Binus Repository
Download
Report
Transcript Title Goes Here - Binus Repository
Matakuliah
Tahun
: L0182 / Web & Animation Design
: 2008
CSS
Pertemuan 12
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/linethrough/blink/none
To underline/overline/linethrough/blink text
Bina Nusantara
Layout with Styles
Property
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, Setting the margins around an
e.g., 10
element
Vertical-align:
baseline/middle/sub/super/texttop/text-bottom/top/bottom
Bina Nusantara
Aligning elements vertically
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
Bina Nusantara