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.)
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

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%

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

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

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.

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 */ }
 Example2
 Paragraph 
What’s the result?

Text
322432-1/2014
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;
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

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;
word-wrap: break-word;
}
 This
paragraph contains a very
long word:
thisisaveryveryveryveryveryve
rylongword. The long word
will break and wrap to the
next line.

WDS
CS KKU
CSS3-Font/Text
p.test1 {
width: 140px;
word-break: keep-all; }
p.test2 {
width: 140px;
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

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to CSS Font & Text style (20)

More from Yaowaluck Promdee (17)

Recently uploaded (20)

CSS Font & Text style