Scribd
Upload
13 views

2-CSS Font-Text

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

2-CSS Font-Text

Uploaded by

zaranachothani22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

1 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Font Properties


( 1 ) font-family
( 2 ) font-size
( 3 ) font-style
( 4 ) font-weight
( 5 ) font-variant

1. font-family :
 The font-family property specifies the font for an element.
 Syntax:
font-family : family-name | generic-family ;

2. font-size :
 The font-size property sets the size of a font.
 Syntax:
font-size: small | smaller | x-small | xx-small |medium
| large | larger | x-large | large | length | % | px

3. font-style :
 The font-style property specifies the font style for a text.
 Syntax:
font-style : normal | italic | oblique;

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


2 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

4. font-weight :
 The font-weight property sets how thick or thin characters in text
should be displayed.
 Syntax:
font-weight: normal | bold | bolder | lighter | number;

5. font-variant :
 In a small-caps font, all lowercase letters are converted to uppercase
letters.
 Syntax:
font-variant: normal | small-caps;

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


3 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

CSS Text Properties


( 1 ) color property
( 2 ) text-align property
( 3 ) text-decoration property
( 4 ) text-transform property
( 5 ) text-indent property
( 6 ) line-height property
( 7 ) word-spacing property
( 8 ) letter-spacing property
( 9 ) word-warp property
( 10 ) word-break property
( 11 ) overflow property
( 12 ) text-shadow
( 13 ) box-shadow

1. color :
 The color property specifies the color of text.
 Syntax:
color: color-name | rgb | hex ;

2. text-align :
 The text-align property specifies the horizontal alignment of text in an
element.
 Syntax:
text-align: left | right | center | justify;

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


4 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

3. text-decoration :
 The text-decoration property specifies the decoration added to text.
 Syntax:
text-decoration: [text-decoration-line] (required)
[text- decoration-color]
[text- decoration-style];
Property Value
text-decoration-line underline | overline | line-through | none
text- decoration-color color-name
text- decoration-style solid | dashed | dotted | double | wavy | none

4. text-transform :
 The text-transform property controls the capitalization of text.
 Syntax:
text-transform: uppercase | lowercase | capitalize

5. text-indent property :
 The text-indent property specifies the indentation of the first line in a
text-block.

 Syntax :
text-indent : length | %

6. line-height property :
 The line-height property specifies the height of a line.
 Syntax :
line-height : normal | number | length

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


5 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

7. word-spacing :
 The word-spacing property increases or decreases the white space
between words.
 Syntax:
word-spacing: normal | length

8. letter-spacing :
 The letter-spacing property increases or decreases the space between
characters in a text.
 Syntax:
letter-spacing: normal | length

9. word-wrap :
 The word-wrap property allows long words to be able to be broken and
wrap onto the next line.
 Syntax:
word-wrap: normal | break-word

10. Word-break :
 The word-break property specifies how words should break when
reaching the end of a line.
 Syntax:
word-break: normal | break-all | keep-all

CREATIVE DESIGN & MULTIMEDIA INSTITUTE


6 CREATIVE DESIGN & MULTIMEDIA INSTITUTE

11. overflow :
 The overflow property specifies whether to clip the content or to add
scrollbars when the content of an element is too big to fit in the
specified area.
 Syntax:
overflow: auto | scroll | hidden | visible
overflow-x: auto | scroll | hidden | visible
overflow-y: auto | scroll | hidden | visible

12. text-shadow:
 The CSS3 text-shadow property applies shadow to text.
 Syntax:
text-shadow : x y blur color;

13. box-shadow: 
 The CSS3 box-shadow property applies shadow to elements.
 Syntax:
box-shadow : x y blur color;

CREATIVE DESIGN & MULTIMEDIA INSTITUTE

You might also like