Formatting Text Using CSS
Formating Text Using CSS
Jan 27, 2015
This is a presentation used in my website design class to discuss the use of CSS in formatting text.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
