-
7/30/2019 8. Formatting Style
1/18
Formatting with Styles
-
7/30/2019 8. Formatting Style
2/18
Choosing a Font Family
font-familyproperty has a specialcharacteristics: you can
specify morethan one font
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif}
p {font-family:Verdana,Helvetica,sans-serif}
-
7/30/2019 8. Formatting Style
3/18
Embedding Fonts on a Page
You can choose whatever font youwant, but the visitors dont have
itinstalled on their computers, they
wont be able to view it
The SOLUTION is to embed a font ina page
@font-face{font-family:Sunnyside;src:
url(SUNNYS10.eot)}sans-serif}
h1,h2 {font-family:Sunnyside,Helvetica}
-
7/30/2019 8. Formatting Style
4/18
Creating Italic
Italics are often used to set offquotations, emphasized text,
foreignwords, magazine names and much
more
p {font-family:Verdana,Helvetica,sans-serif}
.emph { font-style: italic }
-
7/30/2019 8. Formatting Style
5/18
Applying Bold Formatting
Bold formatting is probably the mostcommon and effective way to
maketext stand out
p {font-family:Verdana,Helvetica,sans-serif}
.emph { font-style: italic; font-weight:bold }
-
7/30/2019 8. Formatting Style
6/18
Setting the Font Size
There are two basic ways to set thefont size for the text in
your Webpage
h1,h2 {font-family:Verdana,Helvetica, sans-serif}
h1 { font-size: 20px }
h2 { font-size: 14px }
p {font-family:Arial,Helvetica Bold,
sans-serif;font-size:12px}
-
7/30/2019 8. Formatting Style
7/18
Setting the Line Height
Line height refers to a paragraphsleading, that is, the amount
of spacebetween each line in a paragraph
h1,h2 {font-family:Verdana,Helvetica, sans-serif}
h1 { font-size: 20px }
h2 { font-size: 14px }
p {font-family:Arial,Helvetica Bold, sans-serif;font-size:12px;
line-height:150%}
-
7/30/2019 8. Formatting Style
8/18
Setting the Text Color
You can change the color of anyamount of text on your Web
page
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy}
p {font-family:Verdana,Helvetica,sans-serif;color:#909}
-
7/30/2019 8. Formatting Style
9/18
Changing the Texts Background
The background refers not to thebackground of the entire page,
butto the background of the specified
element
body { background:#9cf}
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy}
-
7/30/2019 8. Formatting Style
10/18
Controlling Spacing
You can add or reduce spacebetween words (tracking) or
betweenletters
body { background:#9cf }
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy; letter-spacing:0.4em}
-
7/30/2019 8. Formatting Style
11/18
Adding Indents
You can determine how much spaceshould precede the first line of
aparagraph
body { background:#9cf }
p {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy; text-indent:1.5em}
-
7/30/2019 8. Formatting Style
12/18
Aligning Text
You can set up certain (X)HTMLelements to always be aligned to
theright, left, center or justified, as
desired
body { background:#9cf }
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy; letter-spacing:0.4em;text-align: center}
-
7/30/2019 8. Formatting Style
13/18
Changing the Text Case
You can define the text case for yourstyle by using the
text-transformproperty
body { background:#9cf }
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy; letter-spacing:0.4em;text-align: center}
h1 {text-transform:uppercase}
-
7/30/2019 8. Formatting Style
14/18
Using Small Caps
Many fonts have a correspondingsmall caps variant that
includesuppercase versions of the letters
proportionately reduced to small capsize
h1, h2 {font-family:Arial Black,Helvetica Bold,sans-serif;
color:navy; letter-spacing:0.4em;text-align: center}
h1 {text-transform:uppercase}
h2 {font-size: 14px; font-variant:small-caps}
-
7/30/2019 8. Formatting Style
15/18
Decorating Text
Style sheets let you adorn your textwith underlines, overlining,
linesthrough the text and even blinking
text
-
7/30/2019 8. Formatting Style
16/18
Visit www.w3cschool.com
http://www.w3cschool.com/http://www.w3cschool.com/
-
7/30/2019 8. Formatting Style
17/18
-
7/30/2019 8. Formatting Style
18/18
LISTS
http://localhost/var/www/apps/conversion/tmp/scratch_2/9.%20Lists.ppthttp://localhost/var/www/apps/conversion/tmp/scratch_2/9.%20Lists.ppt
