lab#6 font css html
DESCRIPTION
Font css html by web design technologyTRANSCRIPT
322432-1/2014
Font322432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
CSS & HTML
Index
• Unit Style Sheet• CSS - Fonts• Example• Assignment
322432-1/2014
322432-1/2014
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
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
Example
h1 { line-height: 1.2em }h1 { font-size: 1.2em }
h1 { margin: 0.5in } /* inches */h2 { line-height: 3cm } /* centimeters */h3 { word-spacing: 4mm } /* millimeters */h4 { font-size: 12pt } /* points */h4 { font-size: 1pc } /* picas */p { font-size: 12px } /* px */
322432-1/2014
322432-1/2014
CSS-FontProperty Description Values
font-family Specifies the font family 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%
322432-1/2014
CSS-FontProperty Description Values
font-style The font-style property is mostly used to specify italic text.
normalitalicoblique
font-variant In a small-caps font, all lowercase letters are converted to uppercase letters.
normalSmall-Caps
font-weight The font-weight property sets how thick or thin characters in text should be displayed.
normalboldbolderlighter100200
322432-1/2014
Example1
p {font-family:Arial; font-size:16pt; color:green}
p.ex { font:15px sans-serif red;
/*not specified */ }
322432-1/2014
Example2How 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>
322432-1/2014
Difference Between Serif and Sans-serif Fonts
322432-1/2014
TextProperty Description Values
color The color property is used to set the color of the text
- 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|inherit;
http://www.w3schools.com/
322432-1/2014
TextProperty Description Values
text-decoration The text-decoration property specifies the decoration added to text.
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/
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>
Example
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 ไมีง� นรู�ปภาพหรู�อกรูาฟิฟิ�กจะไมีแส่ด้ง**