Scribd
Upload
13 views

CSS (Cascading Style Sheet) 10

Uploaded by

muhammad uzair
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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