Scribd
Upload
13 views

CSS (Cascading Style Sheet) 10

Uploaded by

muhammad uzair
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

CSS (Cascading Style Sheet) 10

Uploaded by

muhammad uzair
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CSS

(CASCADING
STYLE SHEET)
SAQIB SARWAR
by Techsol Media JLT Dubai
CSS FONT PROPERTIES
• Font-size
• Font-family
• Font-weight
• Font-style
• Font-variant
• Line-height
Pixel
FONT SIZE Font-Size: 15px;
Em
• Xx-smal
Font-Size: 1em;
• X-small -----------------------
• Small body{
• Smaller font-
size:24px;
• Medium }
• Large
• X-large #box1{
// font-size:50%;
• Xx-large // font-size: will take 50% of it
1em; will take 100% of
// font-size: will double of its P
2em;
FONT FAMILY
Font-family:arial;

Font-family:arial, Helvetica, Verdana;


FONT WEIGHT
Font-weight:bold;
Font-weight: //Numbers can use from 100900

Font-weight: bolder //works and lttle more bold from from parent

Font-weight:Lighter // also works against parent

body{font-weight: 600 }

#box1{
font-weight:bolder  parent is 600 it will do approx. 800
Font-weight:lighter  parent is 600 it will do approx. 400
}
FONT STYLE
Font-style:italic
Font-style:oblique;
Font-style:normal //default value

* Italic and oblique both looks same


but some Font-families doesn’t have italic variant
you can use oblique there
FONT VARIANT
Font-variant: small-caps

//in a paragraph every new line, First character will


slightly
Large then other characters.
LINE HEIGHT
naVerdaFontHeveticalvarialefamilyHel #box1{
naVerdaFontHeveticalnaVerdaFontHeveticalvarial // line-height :50%; will take 50% of its
efamilyHelnaVerdaFontHeveticalvarialefamilyHel // line-height: will take double of
FoarintalfamilyFoarintalfamilynaVerdaFontHeveti
2em; will take double of
calvarialefamilyHelFoarintalfamilyvarialefamilyH
elFoarintalfamilyFoarintalfamilynaVerdaFontHeve // line-height:
ticalvarialefamilyHelFoarintalfamily 20px ;
}

naVerdaFontHeveticalvarialefamilyHel

naVerdaFontHeveticalnaVerdaFontHeveticalvarial

efamilyHelnaVerdaFontHeveticalvarialefamilyHel
Line height is a space
FoarintalfamilyFoarintalfamilynaVerdaFontHeveti
between lines in a
paragraph
calvarialefamilyHelFoarintalfamilyvarialefamilyH

elFoarintalfamilyFoarintalfamilynaVerdaFontHeve
EM
*Remember “em” works in compound
lets check how,

#box1 span{
font-size:2em;
}

<div id=“box1”>erdHeveerdHeve
<span>naVerdHeve<span>ticaFontvarial</span>elaintalfamily</span>
familyHelFoarintalfamily
</div>
SHORTHAND FONT PROPERTY
For all,
Font: oblique small-caps 600 1rem/25px
arial,verdana;
Font-style Font-weight line-height
Font-variant Font-size font-family

Line-height use with font-size using /


Can use also
Font: 1em/25px arial,verdana;
Font Property Ended
TEXT PROPERTY
Text-align
Text-align-last new property (in a paragraph on last line. it will
effect)
Text-transform  help to implement UpperCase
LowerCase
Text-indent  paragraph’s first line will slightly
indent/inside
Word-spacing space between one word to next word
Letter-spacing space between one letter to next letter
TEXT DECORATION PROPERTIES
• Text-decoration-line: underline //overline //line-through//none
• Text-decoration-color: red //green //purple
• Text-decoration-style: wavy //dotted //solid….
• text-decoration-thickness: 2px;

Shorthand
Tex-decoration:2px underline red wavy;
WORD-WRAP AND WORD-BREAK
Issue is Overflow

Give width to a div 300


and write a word that can be like
“verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyyyyyyyyyyyyyy”
WORD-WRAP
• Word-wrap:break-word //normal

break-word only wrap to a very long word other


wise its leaves “white spaces”
WORD-BREAK
• Word-break:break-all //keep-all

Word-break almost justify to complete paragraph


TEXT-SHADOW
Text-shadow:2px 2px 5px red;

h-offset color
x-axis v-
blu
offset
r
y-axis
COLUMN-COUNT
Introduced in CSS3
very useful property
PROBLEM

I would like to show this paragraph in more interesting way such as in News
paper

SOLUTION
COLUMN-COUNT EXAMPLES

Remove column-count if you use column-width.

Use Prefixes for chrome and safari “-webkit-”


and for Mozilla “-moz-”
@GOOGLE-FONT

https://fonts.google.com/

You might also like