0% found this document useful (0 votes)
7 views

CSS 2

Uploaded by

akshatnigam7931
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
0% found this document useful (0 votes)
7 views

CSS 2

Uploaded by

akshatnigam7931
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/ 4

20-10-2024

CSS properties for fonts


2

1 CSS Font & Text Properties property


font-family
description
which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style

CS380

font-family More about font-family


3 4

p { p {
font-family: Georgia; font-family: Garamond, "Times New Roman", serif;
} } CSS
h2 {
font-family: "Courier New"; This paragraph uses the above style.
} CSS output

This paragraph uses the first style above.  We can specify multiple fonts from highest to lowest priority
 Generic font names:
This h2 uses the second style above.  serif, sans-serif, cursive, fantasy, monospace
output
 If the first font is not found on the user's computer, the
 Enclose multi-word font names in quotes next is tried
 Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font

1
20-10-2024

font-size font-size
5 6

p { p {
font-size: 24pt; font-size: 24pt;
} CSS } CSS

This paragraph uses the style above. This paragraph uses the style above.
output output
 units: pixels (px) vs. point (pt) vs. m-size (em)  pt specifies number of point, where a point is 1/72 of an inch
16px, 16pt, 1.16em onscreen
 px specifies a number of pixels on the screen
 vague font sizes: xx-small , x-small , small , medium, large, x-large, xx-
 em specifies number of m-widths, where 1 em is equal to the
large, smaller, larger font's current size
 percentage font sizes, e.g.: 90%, 120%

font-weight, font-style CSS properties for text


7 8

p {
font-weight: bold; property description
font-style: italic;
text-align alignment of text within its element
} CSS
text-decoration decorations such as underlining
This paragraph uses the style above. line-height,
output gaps between the various portions of
word-spacing,
the text
letter-spacing
 Either of the above can be set to normal to turn them off (e.g. indents the first letter of each
headings) text-indent
paragraph

2
20-10-2024

Color
text-align
9 10

blockquote { text-align: justify; }


 You can set the color of text with the following: h2 { text-align: center; }
color: value; CSS

 Possible values are The Gollum’s Quote


color name – example:(red, black…) We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
hexadecimal number – example:(#ff0000, #000000)  text-align can be left, right, center, or
justify
RGB color code – example:(rgb(255, 0, 0), rgb(0, 0,
0))

Letter Spacing
text-decoration
11 12

p {
text-decoration: underline;
 You can adjust the space between letters in the
} CSS following manner. Setting the value to 0, prevents
This paragraph uses the style above. the text from justifying. You can use negative values.
output
letter-spacing: value;
 can also be overline, line-through, blink, or  Possible values are
none
normal
 effects can be combined:
text-decoration: overline underline; length
 Example: letter-spacing:5px;

3
20-10-2024

Text Transform Word Spacing


13 14

 You can control the size of letters in an (X)HTML  You can adjust the space between words in the
element with the following: following manner. You can use negative values.
text-transform: value; word-spacing: value;
 Possible values are  Possible values are
none normal
capitalize length
lowercase
uppercase

You might also like