26.08.2019
 html Exploration Paper

FONT HOUSES

Property

font-family

font-style

font-variant

Values

font name

generic font

typical

italic

oblique

normal

small-caps

font-weight

regular

bold

bolder

lighter

100-900

font-size

normal

length

span

absolute

complete

absolute

absolute

absolute

absolute

absolute

comparable

relative

percentage

CHANGE CASE

Example

font-family: arial

font-family: arial, helvetica

font-style: normal

font-style: italic

font-style: oblique

font-variant: typical

font-variant: small-caps

font-weight: regular

font-weight: bold

font-weight: bigger

font-weight: lighter

font-weight: two hundred fifty

font-size: regular

font-size: 14px

font-size: 14pt

font-size: xx-small

font-size: x-small

font-size: tiny

font-size: medium

font-size: significant

font-size: x-large

font-size: xx-large

font-size: smaller

font-size: larger

font-size: 73%

TEXT DECOR

p. uppercase text-transform:uppercase;

s. lowercase text-transform:lowercase;

p. cash in text-transform:capitalize;

This really is some text.

This is some text.

This is some textual content.

h1

h2

h3

h4

text-decoration:overline

text-decoration:line-through

text-decoration:underline

text-decoration:blink

TEXT INDENT

50px

100px

1cm

10%

50%

s text-indent:100px;

[ HTML CODE & CSS ] MR. ZERNIE R. PUGAO

1

HISTORY COLOR:

SITUATION

h1

background-color:#6495ed;

p

background-color:#e0ffff;

div

background-color:#b0c4de;

left leading

left middle

left lower part

right leading

right center

right lower part

center leading

center center

center bottom

BACKGROUND PHOTO SIZE

background-image: url('smiley. gif');

background-repeat: no-repeat;

background-size: fully 100%;

100px 100px

75px 75px

10px 150px

200px

50%

100% 100%

cover

contain

CSS background-color model!

This is a text inside a div element.

This paragraph has its own qualifications color.

Were still inside the div component.

h1 background-color:#6495ed;

p background-color:#e0ffff;

div background-color:#b0c4de;

BACKGROUND PHOTO

h1 background-image:url('paper.gif');

body background-image:url('paper.gif');

BACKGROUND POSITION

body

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

BORDER

l. none

border-style:none;

p. filled

border-style:dotted;

p. dashed

border-style:dashed;

p. sturdy

border-style:solid;

p. double

border-style:double;

p. groove

border-style:groove;

p. ridge

border-style:ridge;

p. inset

border-style:inset;

s. outset

border-style:outset;

p. concealed

border-style:hidden;

[ HTML & CSS ] MR. ZERNIE R. PUGAO

2

BOUNDARIES

border: 1px solid #333333;

PADDING

Values:

п‚·

color

п‚·

style

п‚·

breadth

OR

you can set each property singularly

p

background-color:yellow;

p. cushioning

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

border-color: value;

border-style: value;

border-width: value;

BOUNDARY BY SIDE(TOP, BOTTOM, RIGHT, LEFT)

s. one

border-style:solid;

border-color:ORANGE;

border-width:5px;

p. two

border-bottom-style:dotted;

border-left-style:solid;

border-top-style:dotted;

border-right-style:solid;

border-color:GREEN;

border-width:7px;

List

list-style: value;

list-style-image:

url(path_to_image. gif, jpg or png);

ul. a list-style-type:circle;

ul. b list-style-type:square;

ol. c list-style-type:upper-roman;

ol. d list-style-type:lower-alpha;

ol. deb list-style-type:lower-alpha;

ol. e list-style-type:lodecimal;

MARGIN

l

background-color:yellow;

p. margin

margin-top:100px;

margin-bottom:45px;

margin-right:50px;

margin-left:75px;

list-style-type: benefit;

Values:

п‚·

disc

п‚·

circle

п‚·

square

п‚·

decimal

п‚·

lower-roman

п‚·

upper-roman

п‚·

lower-alpha

п‚·

upper-alpha

п‚·

none

margin: 10px 10px 10px 10px;

If you state all some values...