SlideShare a Scribd company logo

CSS Font & Text style

•
•
Yaowaluck Promdee
Yaowaluck Promdee

CSS font style, Unit style sheet, CSS font, Text with CSS, Showcase some website, example and assignment

Related slideshows

Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
Design sitemap
Design sitemapDesign sitemap
Design sitemap
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
1 of 27
Download to read offline
WDS CS KKU Font C S S & H T M L 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas Web Design Technology | 2015 1
Web Design Technology | 2015 2 WDS CS KKU Index •  Unit Style Sheet •  CSS - Fonts •  Example •  Assignment
Web Design Technology | 2015 3 WDS CS KKU 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 ‘%’
Web Design Technology | 2015 4 WDS CS KKU 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
Web Design Technology | 2015 5 WDS CS KKU Recommended Occasional use Not recommended Screen em, px, % ex pt, cm, mm, in, pc Print em, cm, mm, in, pt, pc, % ex, px a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
Example Web Design Technology | 2015 6 WDS CS KKU 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 */ means that the line height of h1 elements will be 20% greater than the font size of h1 element. means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
Web Design Technology | 2015 7 WDS CS KKU in Web Design Typography
Web Design Technology | 2015 8 WDS CS KKU
Web Design Technology | 2015 9 WDS CS KKU Difference Between Serif and Sans-serif Fonts
Web Design Technology | 2015 10 WDS CS KKU CSS-Font Property 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%
Web Design Technology | 2015 11 WDS CS KKU CSS-Font (cont.) Property Description Values font-style The font-style property is mostly used to specify italic text. 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
Web Design Technology | 2015 12 WDS CS KKU CSS-Font (cont.) Font Size The font-size property sets the size of the text. p { font-size: 0.875em; /* 14px/16=0.875em */ } xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 18px, 70%, 150%
Web Design Technology | 2015 13 WDS CS KKU CSS-Font (cont.) Font Style •  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) This is a paragraph in normal style. This is a paragraph in italic style. This is a paragraph in oblique style. p.normal { font-style: normal;}
Web Design Technology | 2015 14 WDS CS KKU CSS-Font (cont.) Font Family The font family of a text is set with the font-family property. p { font-family: "Times New Roman", Times, serif; } p.font1 { font-family: "Times New Roman", Times, serif; } p.font2 { font-family: Arial, Helvetica, sans-serif;} Example1 Result
Web Design Technology | 2015 15 WDS CS KKU CSS-Font Web safe fonts These fonts make up a group of a select few fonts that are available on most computers. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } h1 { font-family: “myFristFont", sans-serif; } https://www.web-font-generator.com/ Link web font generator https://www.google.com/fonts http://www.flaticon.com/font-face
Web Design Technology | 2015 16 WDS CS KKU Different Font Formats TrueType Fonts (TTF) is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. The Web Open Font Format (WOFF) WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. SVG Fonts/Shapes SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. Embedded OpenType Fonts (EOT) EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Web Design Technology | 2015 17 WDS CS KKU CSS-Font (cont.) Example2 p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ } <p> Example2</p> <p class=“ex”> Paragraph </p> What’s the result?
Text 322432-1/2014 Property 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/ WDS CS KKU
Text Property 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/ WDS CS KKU Web Design Technology | 2015
Web Design Technology | 2015 20 WDS CS KKU CSS3-Font/Text •  text-overflow •  word-wrap •  word-break The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } <p>The following two paragraphs contains a long text that will not fit in the box.</p> <p>text-overflow: clip:</p> <p class="test1">This is some long text that will not fit in the box</p>
Web Design Technology | 2015 21 WDS CS KKU CSS3-Font/Text The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. •  word-wrap p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; } <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryve rylongword. The long word will break and wrap to the next line.</p>
Web Design Technology | 2015 22 WDS CS KKU CSS3-Font/Text p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; } <p class="test1">This paragraph contains some text. This line will-break-at- hyphens.</p> <p class="test2">This paragraph contains some text. The lines will break at any character.</p> Specifies line breaking rules for non-CJK scripts •  word-break
Web Design Technology | 2015 23 WDS CS KKU Text h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } Example3
Web Design Technology | 2015 24 WDS CS KKU Example Try to do it in Classroom!!! Example4 Example5
Web Design Technology | 2015 25 WDS CS KKU Example Try to do it in Classroom!!!
Web Design Technology | 2015 26 h1>This is using font "impact" size 2em. </h1> <p class="text2">font-family : Arial, Helvetica, sans-serif <br> a first character is Big and italic font. <br> Color blue of first characterbut all content on this paragraph shown grey color. word spacing:0.5em </p> <p class="text3"> I using text indent to show this paragraph. <br> how to code CSS <span id="text3">and html </span> on this example. </p> <footer> web design technology </footer> HTML CODE
Web Design Technology | 2015 27 WDS CS KKU Assignment#6 Create a Web page to present “CSS-Font design” from information provided using CSS font and text Grade will be based on your CSS technique and look and feel of the Web page. https://onedrive.live.com/view.aspx?resid=F333459734D737E5!1410&app=Word “CSS-Font design”

More Related Content

CSS Font & Text style

  • 1. WDS CS KKU Font C S S & H T M L 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas Web Design Technology | 2015 1
  • 2. Web Design Technology | 2015 2 WDS CS KKU Index •  Unit Style Sheet •  CSS - Fonts •  Example •  Assignment
  • 3. Web Design Technology | 2015 3 WDS CS KKU 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 ‘%’
  • 4. Web Design Technology | 2015 4 WDS CS KKU 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
  • 5. Web Design Technology | 2015 5 WDS CS KKU Recommended Occasional use Not recommended Screen em, px, % ex pt, cm, mm, in, pc Print em, cm, mm, in, pt, pc, % ex, px a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
  • 6. Example Web Design Technology | 2015 6 WDS CS KKU 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 */ means that the line height of h1 elements will be 20% greater than the font size of h1 element. means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
  • 7. Web Design Technology | 2015 7 WDS CS KKU in Web Design Typography
  • 8. Web Design Technology | 2015 8 WDS CS KKU
  • 9. Web Design Technology | 2015 9 WDS CS KKU Difference Between Serif and Sans-serif Fonts
  • 10. Web Design Technology | 2015 10 WDS CS KKU CSS-Font Property 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%
  • 11. Web Design Technology | 2015 11 WDS CS KKU CSS-Font (cont.) Property Description Values font-style The font-style property is mostly used to specify italic text. 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
  • 12. Web Design Technology | 2015 12 WDS CS KKU CSS-Font (cont.) Font Size The font-size property sets the size of the text. p { font-size: 0.875em; /* 14px/16=0.875em */ } xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 18px, 70%, 150%
  • 13. Web Design Technology | 2015 13 WDS CS KKU CSS-Font (cont.) Font Style •  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) This is a paragraph in normal style. This is a paragraph in italic style. This is a paragraph in oblique style. p.normal { font-style: normal;}
  • 14. Web Design Technology | 2015 14 WDS CS KKU CSS-Font (cont.) Font Family The font family of a text is set with the font-family property. p { font-family: "Times New Roman", Times, serif; } p.font1 { font-family: "Times New Roman", Times, serif; } p.font2 { font-family: Arial, Helvetica, sans-serif;} Example1 Result
  • 15. Web Design Technology | 2015 15 WDS CS KKU CSS-Font Web safe fonts These fonts make up a group of a select few fonts that are available on most computers. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } h1 { font-family: “myFristFont", sans-serif; } https://www.web-font-generator.com/ Link web font generator https://www.google.com/fonts http://www.flaticon.com/font-face
  • 16. Web Design Technology | 2015 16 WDS CS KKU Different Font Formats TrueType Fonts (TTF) is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. The Web Open Font Format (WOFF) WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. SVG Fonts/Shapes SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. Embedded OpenType Fonts (EOT) EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
  • 17. Web Design Technology | 2015 17 WDS CS KKU CSS-Font (cont.) Example2 p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ } <p> Example2</p> <p class=“ex”> Paragraph </p> What’s the result?
  • 18. Text 322432-1/2014 Property 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/ WDS CS KKU
  • 19. Text Property 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/ WDS CS KKU Web Design Technology | 2015
  • 20. Web Design Technology | 2015 20 WDS CS KKU CSS3-Font/Text •  text-overflow •  word-wrap •  word-break The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } <p>The following two paragraphs contains a long text that will not fit in the box.</p> <p>text-overflow: clip:</p> <p class="test1">This is some long text that will not fit in the box</p>
  • 21. Web Design Technology | 2015 21 WDS CS KKU CSS3-Font/Text The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. •  word-wrap p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; } <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryve rylongword. The long word will break and wrap to the next line.</p>
  • 22. Web Design Technology | 2015 22 WDS CS KKU CSS3-Font/Text p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; } <p class="test1">This paragraph contains some text. This line will-break-at- hyphens.</p> <p class="test2">This paragraph contains some text. The lines will break at any character.</p> Specifies line breaking rules for non-CJK scripts •  word-break
  • 23. Web Design Technology | 2015 23 WDS CS KKU Text h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } Example3
  • 24. Web Design Technology | 2015 24 WDS CS KKU Example Try to do it in Classroom!!! Example4 Example5
  • 25. Web Design Technology | 2015 25 WDS CS KKU Example Try to do it in Classroom!!!
  • 26. Web Design Technology | 2015 26 h1>This is using font "impact" size 2em. </h1> <p class="text2">font-family : Arial, Helvetica, sans-serif <br> a first character is Big and italic font. <br> Color blue of first characterbut all content on this paragraph shown grey color. word spacing:0.5em </p> <p class="text3"> I using text indent to show this paragraph. <br> how to code CSS <span id="text3">and html </span> on this example. </p> <footer> web design technology </footer> HTML CODE
  • 27. Web Design Technology | 2015 27 WDS CS KKU Assignment#6 Create a Web page to present “CSS-Font design” from information provided using CSS font and text Grade will be based on your CSS technique and look and feel of the Web page. https://onedrive.live.com/view.aspx?resid=F333459734D737E5!1410&app=Word “CSS-Font design”