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

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”