Embed Size (px)
DESCRIPTION
This is a presentation used in my website design class to discuss the use of CSS in formatting text.
Citation preview
Formatting TextUsing CSS
Font Propertiesfont-family
font-size
font-weight
font-style
font-variant
font
Font PropertiesFont-Family
font-family
p { font-family: Arial, sans-serif; }
generic font families - sans-serif, serif, monospace, cursive, fantasy
Font PropertiesCore Fonts
Sans SerifArial, Arial Black, Trebuchet, Verdana
SerifGeorgia, Times New Roman
MonospaceCourier New, Andale Mono
CursiveApple Chancery, Comic Sans, Snell
Fantasy Impact, Stencil
font-size
h1 { font-size: 1.5em;}
Font PropertiesFont-size
Font PropertiesFont-size
pt - points 1/72 inch
pc - (1 pica = 12 points)
mm - millimeters
• cm - centimeters
• in - inches
em – size of M
• ex - height of lowercase “x”
• px - varies with display
resolution
• % percentage values
Absolute Units Relative Units
Font PropertiesFont-size
body { font-size: 16pt; }
h1 {font-size: 200%; }
• The font size of the h1 type would be 32 points
Font PropertiesFont-size
xx-small
• x-small
• small
• medium
Keywords
Large
• x-Large
• xx-Large
Font PropertiesFont-size
There are two relative keywords: Larger and Smaller
<span style="font-size: larger"> Larger </span>
• <span style="font-size:smaller"> Smaller </span></p>
• Used to shift the size of text relative to the parent element.
font-weight
h1 { font-weight: bold;}
Font PropertiesFont-weight
font-weight
Possible values include: normal, bold, bolder, lighter
Or (not often used) 100, 200, 300, 400, 500, 600, 700, 800, 900
Font PropertiesFont-weight
font-style
h1 { font-style: italic;}
Possible values are normal, italic, oblique, inherit
Font PropertiesFont-style
font-variant
h1 { font-variant: small-caps;}
Possible values are normal, small-caps, inherit
Font PropertiesFont-variant
Font PropertiesSingle rule
font: style weight variant size/line-height font-family
h1 { font: 1em serif;}
h1 { font: oblique bold small-caps 1.5em/1.8em Georgia, "Times New Roman", serif ;}
font-color
h1 { font-color: gray;}
h1 { font-color: #666666;}
h1 { font-color: #666;}
Font PropertiesFont-color
Font PropertiesDescendant, Child and Sibling Selectors
Example What it does
li em { color: olive;}Selects only <em> tags when they are included in <li>
p > em {color: olive;}
Selects only <em> tags when their parent is a <p> called a "child selector"
h1 + p
Targets only <p> tags when they follow an <h1> tag called a "sibling selector"
Font PropertiesID Selectors
Example What it does
<li id="salelist">Tshirt<li>
Unique ID selector used in a tag.
li#salelist { color: red; }
When this is added to the style sheet, the text enclosed in this <li> tag would be red.
#salelist { color: red; }The selector can be shorted to just this.
Font PropertiesID Selectors
Example What it does
#sidebar li { color: blue; }
Unique ID selector defined in the style sheet.
Any line item that appears in the element designated as sidebar would be blue.
Font PropertiesClass Selectors
Example What it does
<p class="special">Class selectors can be used multiple times in a document.
p.special { color: orange; }
Using this in the style sheet indicates that all paragraphs with the class special would be orange.
.special { color: orange; }
All tags with the class="special" selector would be orange.
Font PropertiesText Adjustments - Line Height
line-height
p { line-height: 2em;}
Possible values are number, percentage, normal, inherit
Font PropertiesText Adjustments - Indents
text-indent
p { text-indent: 2em;}
Possible values are percentage, length measurement, inherit
Font PropertiesText Adjustments - alignment
text-align
p { text-align: left;}
Possible values are left, right, center, justify
Font PropertiesText Adjustments - decoration
text-decoration
p { text-decoration: underline;}
Possible values are none, underline, overline, line-through, blink, inherit
Font PropertiesText Adjustments - Capitalization
text-transform
p { text-transform: capitalize;}
Possible values are none, capitalize, lowercase, uppercase, inherit
Font PropertiesText Adjustments - Spacing
letter-spacing
p { letter-spacing: 1.2em;}
Possible values are length measurement, normal, inherit
Font PropertiesText Adjustments - Spacing
word-spacing
p { word-spacing: 1.2em;}
Possible values are length measurement, normal, inherit
