ID01 Week 3

Images in HTML

<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />

Images in HTML

Start Tag Alternate text if End Tag
image doesn't
Search Path to Image Alternate appear Title Image Title
Attribute Attribute Attribute

<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />

IMAGE TYPES: GIFs, JPGs, PNGs

GIF Low quality, use for simple graphics
only.

JPG Photographic Imagery, Complex
patters or gradients.

Images with Alpha Transperency
PNG

Background Images in CSS

HTML CSS Browser

<body> body {
background-color: grey;
<div id="box"> }
This sentence is the intro to this
<p>This sentence is
the intro to this p { paragraph.
paragraphs. </p> font-size: 14px;
</div> color: white;
text-align: center;
</body> margin-top: 30px;
}

#box {
height: 300px;
width: 400px;
border: 2px solid green;
background-image:
url('../images/factory2.jpg');
}

Background Images in CSS

HTML CSS Browser

<body> body {
background-color: grey;
<div id="box"> }
This sentence is the intro to this
<p>This sentence is
the intro to this p { paragraph.
paragraphs. </p> font-size: 14px;
</div> color: white;
text-align: center;
</body> margin-top: 28px;
}

#box {
height: 300px;
width: 400px;
border: 2px solid green;
background-image:
url('../images/factory2.jpg');
}

Font-Family

Font Family Property Desired Font Next Best Most General

h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Font Stack

Embedding Fonts

CSS

@font-face {
font-family: coolfont;
src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot');
}

p {
font-family: coolfont, arial, sans-serif;
}

Embedding Fonts

CSS
give the font a
@font-face { simple name
}

p {
}

Embedding Fonts
.OTF and .TTF fonts
work with all browsers
CSS but Internet Explorer

@font-face {
}

p {
}
.EOT format required for
Internet Explorer Use.

Embedding Fonts

paths to the font files, in
CSS
a font folder.
@font-face {
}

p {
}

Embedding Fonts

CSS - without IE code...

@font-face {
src: url('fonts/coolfont.ttf');
}

p {
}

Resetting Default CSS Styles
CSS

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

Styling Links w/ Pseudo-classes
CSS

a:link {
color: blue;
text-decoration: none;
}

a:visited {
color: lightBlue;
}

a:hover {
color: white;
background-color: yellow;
}

a:active {
color: blue;
}

CSS

a:link {
color: blue;
}

a:visited {
PSEUDO-CLASSES
color: lightBlue;
}

a:hover {
color: white;
}

a:active {
color: blue;
}

CSS

a:link { Unvisited Link
color: blue;
}

a:visited { Visited Link
color: lightBlue;
}

a:hover { Mouse Over Link
color: white;
}

a:active { Selected Link
color: blue;
}

ID01 Week 3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a ID01 Week 3

Similar a ID01 Week 3 (20)

Último

Último (20)

ID01 Week 3

Notas del editor