Download - Formating Text Using CSS
![Page 1: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/1.jpg)
Formatting TextUsing CSS
![Page 2: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/2.jpg)
Font Propertiesfont-family
font-size
font-weight
font-style
font-variant
font
![Page 3: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/3.jpg)
Font PropertiesFont-Family
font-family
p { font-family: Arial, sans-serif; }
generic font families - sans-serif, serif, monospace, cursive, fantasy
![Page 4: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/4.jpg)
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
![Page 5: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/5.jpg)
font-size
h1 { font-size: 1.5em;}
Font PropertiesFont-size
![Page 6: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/6.jpg)
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
![Page 7: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/7.jpg)
Font PropertiesFont-size
body { font-size: 16pt; }
h1 {font-size: 200%; }
• The font size of the h1 type would be 32 points
![Page 8: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/8.jpg)
Font PropertiesFont-size
xx-small
• x-small
• small
• medium
Keywords
Large
• x-Large
• xx-Large
![Page 9: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/9.jpg)
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.
![Page 10: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/10.jpg)
font-weight
h1 { font-weight: bold;}
Font PropertiesFont-weight
![Page 11: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/11.jpg)
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
![Page 12: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/12.jpg)
font-style
h1 { font-style: italic;}
Possible values are normal, italic, oblique, inherit
Font PropertiesFont-style
![Page 13: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/13.jpg)
font-variant
h1 { font-variant: small-caps;}
Possible values are normal, small-caps, inherit
Font PropertiesFont-variant
![Page 14: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/14.jpg)
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 ;}
![Page 15: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/15.jpg)
font-color
h1 { font-color: gray;}
h1 { font-color: #666666;}
h1 { font-color: #666;}
Font PropertiesFont-color
![Page 16: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/16.jpg)
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"
![Page 17: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/17.jpg)
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.
![Page 18: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/18.jpg)
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.
![Page 19: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/19.jpg)
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.
![Page 20: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/20.jpg)
Font PropertiesText Adjustments - Line Height
line-height
p { line-height: 2em;}
Possible values are number, percentage, normal, inherit
![Page 21: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/21.jpg)
Font PropertiesText Adjustments - Indents
text-indent
p { text-indent: 2em;}
Possible values are percentage, length measurement, inherit
![Page 22: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/22.jpg)
Font PropertiesText Adjustments - alignment
text-align
p { text-align: left;}
Possible values are left, right, center, justify
![Page 23: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/23.jpg)
Font PropertiesText Adjustments - decoration
text-decoration
p { text-decoration: underline;}
Possible values are none, underline, overline, line-through, blink, inherit
![Page 24: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/24.jpg)
Font PropertiesText Adjustments - Capitalization
text-transform
p { text-transform: capitalize;}
Possible values are none, capitalize, lowercase, uppercase, inherit
![Page 25: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/25.jpg)
Font PropertiesText Adjustments - Spacing
letter-spacing
p { letter-spacing: 1.2em;}
Possible values are length measurement, normal, inherit
![Page 26: Formating Text Using CSS](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c783f74a7959f6208b4668/html5/thumbnails/26.jpg)
Font PropertiesText Adjustments - Spacing
word-spacing
p { word-spacing: 1.2em;}
Possible values are length measurement, normal, inherit