SlideShare a Scribd company logo
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

What's hot (20)

Tables and forms with HTML, CSS
Tables and forms with HTML, CSS  Tables and forms with HTML, CSS
Tables and forms with HTML, CSS
Yaowaluck Promdee
 
Lab#9 graphic and color
Lab#9 graphic and colorLab#9 graphic and color
Lab#9 graphic and color
Yaowaluck Promdee
 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
Yaowaluck Promdee
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
Yaowaluck Promdee
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
Yaowaluck Promdee
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
Yaowaluck Promdee
 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
Yaowaluck Promdee
 
Design sitemap
Design sitemapDesign sitemap
Design sitemap
Yaowaluck Promdee
 
Page layout with css
Page layout with cssPage layout with css
Page layout with css
Er. Nawaraj Bhandari
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Css Ppt
Css PptCss Ppt
Css Ppt
Hema Prasanth
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
Css font properties
Css font propertiesCss font properties
Css font properties
Jesus Obenita Jr.
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter
 
Css margins
Css marginsCss margins
Css margins
Webtech Learning
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Lanh Le
 

Viewers also liked (20)

Week 12 CSS Font - family
Week 12 CSS Font - familyWeek 12 CSS Font - family
Week 12 CSS Font - family
Katherine McCurdy-Lapierre, R.G.D.
 
Masthead Font Styles
Masthead Font StylesMasthead Font Styles
Masthead Font Styles
abigaillucie
 
Web Interface
Web InterfaceWeb Interface
Web Interface
Yaowaluck Promdee
 
Game design
Game designGame design
Game design
Yaowaluck Promdee
 
HTML 5
HTML 5HTML 5
HTML 5
Yaowaluck Promdee
 
Style and Selector Part2
Style and Selector Part2Style and Selector Part2
Style and Selector Part2
Yaowaluck Promdee
 
Chapter 5 Text
Chapter 5 TextChapter 5 Text
Chapter 5 Text
shelly3160
 
Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations
Yaowaluck Promdee
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
 
Observation and interviewing
Observation and interviewingObservation and interviewing
Observation and interviewing
Yaowaluck Promdee
 
Arabic spell checking approaches
Arabic spell checking approachesArabic spell checking approaches
Arabic spell checking approaches
Arabic_NLP_ImamU2013
 
Font sheet
Font sheetFont sheet
Font sheet
b_jones4
 
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and timeWord Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Sajna Fathima
 
Vaibhav global limited - BUY
Vaibhav global limited - BUYVaibhav global limited - BUY
Vaibhav global limited - BUY
Arunmozhi_Gopalan
 
Web technology
Web technologyWeb technology
Web technology
syeda zainab
 
Microsoft Word - Paging, Headers, Footers
Microsoft Word - Paging, Headers, FootersMicrosoft Word - Paging, Headers, Footers
Microsoft Word - Paging, Headers, Footers
Lisa Hartman
 
Microsoft Excel - Macros
Microsoft Excel - MacrosMicrosoft Excel - Macros
Microsoft Excel - Macros
Eladio Jose Abquina
 
Microsoft office
Microsoft officeMicrosoft office
Microsoft office
Zohaib Ahmed
 
multimedia data and file format
multimedia data and file formatmultimedia data and file format
multimedia data and file format
ALOK SAHNI
 
Microsoft Office 2003 Creating Macros
Microsoft Office 2003 Creating MacrosMicrosoft Office 2003 Creating Macros
Microsoft Office 2003 Creating Macros
S Burks
 
Masthead Font Styles
Masthead Font StylesMasthead Font Styles
Masthead Font Styles
abigaillucie
 
Chapter 5 Text
Chapter 5 TextChapter 5 Text
Chapter 5 Text
shelly3160
 
Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations
Yaowaluck Promdee
 
Observation and interviewing
Observation and interviewingObservation and interviewing
Observation and interviewing
Yaowaluck Promdee
 
Font sheet
Font sheetFont sheet
Font sheet
b_jones4
 
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and timeWord Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Word Spell check, page no, page break, bookmarks,pictues, bullets, date and time
Sajna Fathima
 
Vaibhav global limited - BUY
Vaibhav global limited - BUYVaibhav global limited - BUY
Vaibhav global limited - BUY
Arunmozhi_Gopalan
 
Microsoft Word - Paging, Headers, Footers
Microsoft Word - Paging, Headers, FootersMicrosoft Word - Paging, Headers, Footers
Microsoft Word - Paging, Headers, Footers
Lisa Hartman
 
multimedia data and file format
multimedia data and file formatmultimedia data and file format
multimedia data and file format
ALOK SAHNI
 
Microsoft Office 2003 Creating Macros
Microsoft Office 2003 Creating MacrosMicrosoft Office 2003 Creating Macros
Microsoft Office 2003 Creating Macros
S Burks
 

Similar to CSS Font & Text style (20)

Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
Nosheen Qamar
 
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
Steve Guinan
 
Fonts
FontsFonts
Fonts
Ankit Dubey
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
css.pdf
css.pdfcss.pdf
css.pdf
dhruvsharma8716
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
Sean Wolfe
 
CSS ppt of cascading Style sheet for beginners.pptx
CSS ppt of cascading Style sheet for beginners.pptxCSS ppt of cascading Style sheet for beginners.pptx
CSS ppt of cascading Style sheet for beginners.pptx
HarshSahu509641
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Seble Nigussie
 
Introduction to CSS Fonts, Texts and Colors - Lesson 7
Introduction to CSS Fonts, Texts and Colors - Lesson 7Introduction to CSS Fonts, Texts and Colors - Lesson 7
Introduction to CSS Fonts, Texts and Colors - Lesson 7
Training n Development by Attitude
 
Web technologies-course 03.pptx
Web technologies-course 03.pptxWeb technologies-course 03.pptx
Web technologies-course 03.pptx
Stefan Oprea
 
Lab#6 font css html
Lab#6 font css htmlLab#6 font css html
Lab#6 font css html
Yaowaluck Promdee
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
Nur Fadli Utomo
 
Css 1
Css 1Css 1
Css 1
H K
 
Castro Chapter 10
Castro Chapter 10Castro Chapter 10
Castro Chapter 10
Jeff Byrnes
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptxChapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
Nosheen Qamar
 
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
Steve Guinan
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
Sean Wolfe
 
CSS ppt of cascading Style sheet for beginners.pptx
CSS ppt of cascading Style sheet for beginners.pptxCSS ppt of cascading Style sheet for beginners.pptx
CSS ppt of cascading Style sheet for beginners.pptx
HarshSahu509641
 
Web technologies-course 03.pptx
Web technologies-course 03.pptxWeb technologies-course 03.pptx
Web technologies-course 03.pptx
Stefan Oprea
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
Nur Fadli Utomo
 
Css 1
Css 1Css 1
Css 1
H K
 
Castro Chapter 10
Castro Chapter 10Castro Chapter 10
Castro Chapter 10
Jeff Byrnes
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Muhammad Ehtisham Siddiqui
 
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptxChapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
 

More from Yaowaluck Promdee (17)

A basic of UX for beginner
A basic of UX for beginnerA basic of UX for beginner
A basic of UX for beginner
Yaowaluck Promdee
 
TCAS 2563
TCAS 2563TCAS 2563
TCAS 2563
Yaowaluck Promdee
 
Portfolio design
Portfolio designPortfolio design
Portfolio design
Yaowaluck Promdee
 
Concept to creation story and storyboard
Concept to creation  story and storyboard Concept to creation  story and storyboard
Concept to creation story and storyboard
Yaowaluck Promdee
 
Requirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvasRequirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvas
Yaowaluck Promdee
 
Good bad design
Good bad designGood bad design
Good bad design
Yaowaluck Promdee
 
Graphic, Color and tools
Graphic, Color and toolsGraphic, Color and tools
Graphic, Color and tools
Yaowaluck Promdee
 
Page layouts flexible and fixed layout with CSS
Page layouts flexible and fixed layout with CSSPage layouts flexible and fixed layout with CSS
Page layouts flexible and fixed layout with CSS
Yaowaluck Promdee
 
Powerpoint
Powerpoint Powerpoint
Powerpoint
Yaowaluck Promdee
 
Program Interface
Program Interface Program Interface
Program Interface
Yaowaluck Promdee
 
Mobile Interface
Mobile Interface   Mobile Interface
Mobile Interface
Yaowaluck Promdee
 
Personas and scenario
Personas and scenarioPersonas and scenario
Personas and scenario
Yaowaluck Promdee
 
Ux design process
Ux design processUx design process
Ux design process
Yaowaluck Promdee
 
Graphic Design
Graphic Design Graphic Design
Graphic Design
Yaowaluck Promdee
 
Lab#2 illustrator
Lab#2 illustratorLab#2 illustrator
Lab#2 illustrator
Yaowaluck Promdee
 
Good/Bad Design
Good/Bad DesignGood/Bad Design
Good/Bad Design
Yaowaluck Promdee
 
Content management system
Content management systemContent management system
Content management system
Yaowaluck Promdee
 

Recently uploaded (20)

LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
Uterine Prolapse, causes type and classification,its managment
Uterine Prolapse, causes type and classification,its managmentUterine Prolapse, causes type and classification,its managment
Uterine Prolapse, causes type and classification,its managment
Ritu480198
 
Unit 4 Legal Issues in Reverse Engineering.pdf
Unit 4 Legal Issues in Reverse Engineering.pdfUnit 4 Legal Issues in Reverse Engineering.pdf
Unit 4 Legal Issues in Reverse Engineering.pdf
ChatanBawankar
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
Oedipus The King Student Revision Booklet
Oedipus The King Student Revision BookletOedipus The King Student Revision Booklet
Oedipus The King Student Revision Booklet
jpinnuck
 
Critical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi MosesCritical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi Moses
Excellence Foundation for South Sudan
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-25-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 5-25-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 5-25-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-25-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdfISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
infosec train
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
How to Configure Subcontracting in Odoo 18 Manufacturing
How to Configure Subcontracting in Odoo 18 ManufacturingHow to Configure Subcontracting in Odoo 18 Manufacturing
How to Configure Subcontracting in Odoo 18 Manufacturing
Celine George
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
Julián Jesús Pérez Fernández
 
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
Celine George
 
Policies, procedures, subject selection and QTAC.pptx
Policies, procedures, subject selection and QTAC.pptxPolicies, procedures, subject selection and QTAC.pptx
Policies, procedures, subject selection and QTAC.pptx
mansk2
 
LDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College VolumeLDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College Volume
LDM & Mia eStudios
 
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Rajdeep Bavaliya
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
Odoo 18 Point of Sale PWA - Odoo Slides
Odoo 18 Point of Sale PWA  - Odoo  SlidesOdoo 18 Point of Sale PWA  - Odoo  Slides
Odoo 18 Point of Sale PWA - Odoo Slides
Celine George
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
Network Security Essentials 6th Edition.pdf
Network Security Essentials 6th Edition.pdfNetwork Security Essentials 6th Edition.pdf
Network Security Essentials 6th Edition.pdf
datmieu2004
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
Uterine Prolapse, causes type and classification,its managment
Uterine Prolapse, causes type and classification,its managmentUterine Prolapse, causes type and classification,its managment
Uterine Prolapse, causes type and classification,its managment
Ritu480198
 
Unit 4 Legal Issues in Reverse Engineering.pdf
Unit 4 Legal Issues in Reverse Engineering.pdfUnit 4 Legal Issues in Reverse Engineering.pdf
Unit 4 Legal Issues in Reverse Engineering.pdf
ChatanBawankar
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
Oedipus The King Student Revision Booklet
Oedipus The King Student Revision BookletOedipus The King Student Revision Booklet
Oedipus The King Student Revision Booklet
jpinnuck
 
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdfISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
ISO 27001 Lead Auditor Exam Practice Questions and Answers-.pdf
infosec train
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
How to Configure Subcontracting in Odoo 18 Manufacturing
How to Configure Subcontracting in Odoo 18 ManufacturingHow to Configure Subcontracting in Odoo 18 Manufacturing
How to Configure Subcontracting in Odoo 18 Manufacturing
Celine George
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
How to Add a Custom Menu, List view and FIlters in the Customer Portal Odoo 18
Celine George
 
Policies, procedures, subject selection and QTAC.pptx
Policies, procedures, subject selection and QTAC.pptxPolicies, procedures, subject selection and QTAC.pptx
Policies, procedures, subject selection and QTAC.pptx
mansk2
 
LDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College VolumeLDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College Volume
LDM & Mia eStudios
 
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Paper 110A | Shadows and Light: Exploring Expressionism in ‘The Cabinet of Dr...
Rajdeep Bavaliya
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
Odoo 18 Point of Sale PWA - Odoo Slides
Odoo 18 Point of Sale PWA  - Odoo  SlidesOdoo 18 Point of Sale PWA  - Odoo  Slides
Odoo 18 Point of Sale PWA - Odoo Slides
Celine George
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
Network Security Essentials 6th Edition.pdf
Network Security Essentials 6th Edition.pdfNetwork Security Essentials 6th Edition.pdf
Network Security Essentials 6th Edition.pdf
datmieu2004
 

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”