1. Font
322432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
CSS & HTML
322432-1/2014
2. Index
• Unit Style Sheet
• CSS - Fonts
• Example
• Assignment
322432-1/2014
3. Unit Style Sheet
Relative Length
• em – font size of element
• ex- height of element’s font
• percent- consists of a number
immediately followed by percent
sign ‘%’
322432-1/2014
4. Unit Style Sheet (Cont.)
Absolute Length
• in (inches; 1in=2.54cm =72pt =6pc)
Ex. 2in, 1.5in
• cm (centimeters; 1cm=10mm) Ex. 2cm, 1.11cm
• mm (millimeters) Ex. 50mm, 0.8mm
• pt (points; 1pt=1/72in, 10pt = 12px) Ex.12pt, 20pt
• pc (picas; 1pc=12pt) Ex. 1pc, 2pc
• pixel (px) : pixel 1px is equal to 1/96th of 1in
322432-1/2014
7. CSS-Font
Property Description Values
font-family Specifies the font family
322432-1/2014
for text
Ex. Arial, Helvetica,
sans-serif
font-size Specifies the font size of
text
xx-small, x-small, small,
medium, large, x-large,
xx-large, smaller, larger,
18px, 70%, 150%
8. CSS-Font
Property Description Values
font-style The font-style property is mostly
used to specify italic text.
322432-1/2014
normal
italic
oblique
font-variant In a small-caps font, all
lowercase letters are converted
to uppercase letters.
normal
Small-Caps
font-weight The font-weight property sets
how thick or thin characters in
text should be displayed.
normal
bold
bolder
lighter
100
200
10. Example2
322432-1/2014
How you code?
<p style="font-weight:bold">Love me Love my dog</p>
<p style="font: normal small-caps bold 16px sans-serif, Arial;
color:#FF0033">Love me Love my dog</p>
12. Text
Property Description Values
color The color property is used to set
the color of the text
322432-1/2014
- a HEX value - like
"#ff0000"
- an RGB value - like
"rgb(255,0,0)"
- a color name - like "red"
direction The direction property specifies the
text direction/writing direction
direction: ltr|rtl|initial|inherit;
line-height The line-height property specifies
the line height.
line-height:
normal|number|length|initial|
inherit;
letter-spacing The letter-spacing property
increases or decreases the space
between characters in a text.
letter-spacing:
normal|length|initial|inherit;
text-align The text-align property specifies the
horizontal alignment of text in an
element.
text-align:
left|right|center|justify|initial|i
nherit;
http://www.w3schools.com/
13. Text
Property Description Values
text-decoration The text-decoration property
specifies the decoration added to
text.
322432-1/2014
text-decoration:
none|underline| overline|
line-through|initial|inherit;
text-indent The text-indent property specifies
the indentation of the first line in a
text-block.
text-indent: length |initial
|inherit;
text-transform The text-transform property
controls the capitalization of text
None | capitalize |
uppercase | lowercase |
initial | inherit
white-space The white-space property
specifies how white-space inside
an element is handled.
Normal | nowrap | pre | pre-line
| pre-wrap | initial |
inherit
word-spacing The word-spacing property
increases or decreases the white
space between words.
word-spacing: normal |
length | initial | inherit
http://www.w3schools.com/
14. Example
<html>
<head>
<style type="text/css">
.p1 {
color:#FF0033;
line-height:18pt;
letter-spacing:0.05cm;
text-decoration:overline;
text-indent:0.5in;
text-transform:capitalize;
white-space:normal;
word-spacing:0.5em;
}
</style>
</head>
<body>
<p class="p1">good moring teacher, how are you today?</p>
</body>
</html>
17. Assignment#6 Fonts
Create a Web page to present “CSS-Font design”
from information provided using
CSS font and text
“CSS-Font design”
รูปแบบการส่งงาน
Grade will be based on your CSS technique and look and
feel of the Web page.
**กรณีมีรูปภาพหรือกราฟิกอื่นให้ใส่มาใน folder งานด้วย โดยไม่ต้อง zip ไม่งัน้รูปภาพหรือกราฟฟิกจะ
ไม่แสดง**
Notas del editor
h1 { line-height: 1.2em }
means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand:
h1 { font-size: 1.2em }
means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Normal - A normal line height. This is default
Number - A number that will be multiplied with the current font size to set the line height
Length - A fixed line height in px, pt, cm, etc.
% - A line height in percent of the current font size
Initial - Sets this property to its default value. Inherit - Inherits this property from its parent element.
จากเนื้อหาที่ให้มา ให้นักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช้ CSS Font text
ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให้