css font & text style

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


WDS CS KKU

Index •  Unit Style Sheet •  CSS - Fonts •  Example •  Assignment


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 ‘%’


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


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


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.


WDS CS KKU

in Web Design Typography


WDS CS KKU


WDS CS KKU Difference Between Serif and Sans-serif Fonts


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%


WDS CS KKU CSS-Font (cont.) Property 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


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%



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;}



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


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


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.

Example2

p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ }

 Example2 Paragraph 

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

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; }

The following two paragraphs contains a long text that will not fit in the box. text-overflow: clip: This is some long text that will not fit in the box

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; }

 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; }

This paragraph contains some text. This line will-break-at-hyphens. This paragraph contains some text. The lines will break at any character.

Specifies line breaking rules for non-CJK scripts

•  word-break


WDS CS KKU Text

h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }

Example3


WDS CS KKU Example

Try to do it in Classroom!!!

Example4 Example5


WDS CS KKU Example

Try to do it in Classroom!!!

h1>This is using font "impact" size 2em. </h1> font-family : Arial, Helvetica, sans-serif 

a first character is Big and italic font. Color blue of first characterbut all content on this paragraph shown

grey color. word spacing:0.5em I using text indent to show this paragraph. 

how to code CSS and html on this example. <footer> web design technology </footer>

HTML CODE


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”

css font & text style

Education