Lab#6 font css html
Download as PPTX, PDF2 likes1,672 views
This document discusses CSS fonts and text properties. It begins by explaining relative and absolute font length units like em, ex, percent, inches, centimeters, pixels, and points. It then provides examples of using these units in CSS code. The document also lists various font and text properties in CSS like font-family, font-size, font-style, font-weight, color, line-height, letter-spacing, and text-align. It provides the description and possible values for each property. Examples are given to demonstrate using these properties in CSS code and HTML. The document concludes by assigning students to create a web page presenting information about CSS fonts and text properties using these CSS techniques.
More Related Content
Similar to Lab#6 font css html (20)
More from Yaowaluck Promdee (20)
Recently uploaded (20)
Lab#6 font css html
- 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
- 5. 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 */
- 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
- 9. Example1 322432-1/2014 p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ }
- 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>
- 11. Difference Between Serif and Sans-serif Fonts 322432-1/2014
- 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>
- 16. Example
- 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 ไม่งัน้รูปภาพหรือกราฟฟิกจะ ไม่แสดง**
Editor's Notes
- #6: 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.
- #9: 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)
- #13: 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.
- #18: จากเนื้อหาที่ให้มา ให้นักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช้ CSS Font text ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให้