Scribd
Upload
31 views19 pages

Inheritance

The document discusses CSS font properties and text properties. It defines properties like font-family, font-size, font-style, text-decoration, color, background-color, and others. It provides examples of how to set values for each property to style elements like headings, paragraphs, and blocks. Inheritance of font properties is also covered.

Uploaded by

Sharmaine Gatchalian Bonifacio
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
31 views19 pages

Inheritance

The document discusses CSS font properties and text properties. It defines properties like font-family, font-size, font-style, text-decoration, color, background-color, and others. It provides examples of how to set values for each property to style elements like headings, paragraphs, and blocks. Inheritance of font properties is also covered.

Uploaded by

Sharmaine Gatchalian Bonifacio
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/ 19

Inheritance

<H1>The headline <EM>is</EM> important!</H1>


-If EM does not define any color, the emphasized
"is" gets the parent element color.

-Other style properties are likewise inherited:


-font-family
-font-size
• Font properties is the most common uses of style sheets.

• CSS1 specifically defines the following font properties:


• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

• Font properties apply to all elements and are


• inherited.

Font Properties
• font-family
• values are:
• family-name
• generic-family

BODY { font-family: gill,helvetica, sans-serif }

Font Properties
• font-style
• values are:
• normal
• italic
• oblique

H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }

Font Properties
• font-variant
• Values are:
• normal
• small-caps

H3 { font-variant: small-caps } EM { font-style: oblique }

• font-weight
P { font-weight: bold }

Font Properties
Font Properties
• font-size
BODY { font-size: x-large } P { font-size: 10px }

Font Properties
Font Properties
FONT Property

• Sets all font properties in single declaration


• P { font: 12pt/14pt sans-serif }
• P { font: 80% sans-serif }
• P { font: x-large/110% "new century schoolbook",
serif }
• P { font: bold italic large Palatino, serif }
• P { font: normal small-caps 120%/120% fantasy }

EXAMPLE
• word-spacing
• defines whitespaces between words.

H1 { word-spacing: 1em } P { word-spacing: 30px }

• letter-spacing
BLOCKQUOTE {letter-spacing:0.1em }
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

TEXT PROPERTIES
• text-decoration
A:link, A:visited, A:active { text-decoration: underline }

• color
BODY {color:blue} H1 {color:#00ff00}
H2{color:rgb(255,0,0)}

TEXT PROPERTIES
• vertical-align
• values are: baseline, middle, sub, super, text-top, text-bottom, bottom,
top.

IMG { vertical-align: bottom }


• text-align
• values are: left, right, justify.

H1 { text-align:center }
P { text-align:right }
P { text-align:justify }

TEXT PROPERTIES
• text-transform
• values are: capitalize, uppercase, lowercase, none (initial
value).

H1 { text-transform: uppercase }

TEXT PROPERTIES
• text-indent
• if identified with a negative value, first line is indented to the left.
P { text-indent: 3em }
P { text-Indent: 20px }
P { text-indent: -12px }

• line-height
• sets the distance between lines.
P { line-height: 1.4 }
P { line-height: 14pt }
P { line-height: 140% }

TEXT PROPERTIES
• background-color
• values can be in name, rgb, hex values, transparent.
H1 { background-color: #F00 }
BODY { background-color:yellow; }
H1 { background-color:#00ff00; }
P { background-color:rgb(255,0,255); }
• background-image

BODY { background-image: url(marble.gif) }


P { background-image: none }

BACKGROUND PROPERTIES
• background-repeat
• determines how/if the image is repeated –repeat-x, repeat-y,
no-repeat.
BODY { background: redurl(pendant.gif); background-
repeat: repeat-y; }

• background-attachment
• values are scroll and fixed.
BODY { background: red url(pendant.gif); background-
repeat: repeat-y; background-attachment: fixed;}

BACKGROUND PROPERTIES
• background-position

BACKGROUND PROPERTIES
• background
• Sets all individual background properties in one declaration.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

BODY { background: red }


P { background: url(chess.png) gray50% repeat fixed }

BACKGROUND PROPERTIES

You might also like