+ All Categories
Home > Documents > 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to...

9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to...

Date post: 30-Nov-2020
Category:
Upload: others
View: 4 times
Download: 0 times
Share this document with a friend
24
9/15/2020 1 Had some presentational elements THE EVOLUTION OF HTML XHTML 2000 HTML5 Work In Progress HTML 4 1997 Written in XML Presentational elements removed In fact, completed in Oct., 2014 HTML <!DOCTYPE html> Older versions—common cases: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" /> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1- transitional.dtd" /> HTML5 DOCTYPE HTML <!-- start of introduction --> <h1>Current Exhibition</h1> <h2>Olafur Eliasson</h2> <!-- end of introduction --> <!-- <a href="mailto:[email protected]">Contact</a> --> COMMENTS IN HTML HTML <p>Water and air. So very commonplace are these substances, they hardly attraction attention and yet they vouchsafe our very existence.</p> <p id="pullquote">Every time I view the sea I feel a sense of calming security, as if visiting my ancestral home; I embark of a voyage of seeing.</p> <p>Mystery of mysteries, water and air are right there before us in the sea.</p> ID ATTRIBUTE
Transcript
Page 1: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

1

Had some

presentational

elements

THE EVOLUTION OF HTML

XHTML2000

HTML5Work In Progress

HTML 41997

Written in XML

Presentational

elements removed

In fact, completed in

Oct., 2014

HTML<!DOCTYPE html>

Older versions—common cases:

<!DOCTYPE html PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd" />

<!DOCTYPE html PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/xhtml/DTD/xhtml1-

transitional.dtd" />

HTML5 DOCTYPE

HTML

<!-- start of introduction -->

<h1>Current Exhibition</h1>

<h2>Olafur Eliasson</h2>

<!-- end of introduction -->

<!--

<a

href="mailto:[email protected]">Contact</a>

-->

COMMENTS IN HTML

HTML

<p>Water and air. So very commonplace are

these substances, they hardly attraction

attention and yet they vouchsafe our very

existence.</p>

<p id="pullquote">Every time I view the

sea I feel a sense of calming security, as

if visiting my ancestral home; I embark of

a voyage of seeing.</p>

<p>Mystery of mysteries, water and air are

right there before us in the sea.</p>

ID ATTRIBUTE

Page 2: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

2

RESULT

Online page

HTML

<p class="important">For a one-year period

from November 2010, the Marugame

Genichiro-Inokuma Museum of Contemporary

Art (MIMOCA) will host...</p>

<p>Each will showcase works by the artist

thematically contextualised under the

headings...</p>

<p class="important admittance">Hours:

10:00 - 18:00 (No admittance after

17:30)</p>

CLASS ATTRIBUTE

RESULT

Online page

HTML

<h1>Hiroshi Sugimoto</h1>

<p>The dates of the ORIGIN OF ART

exhibition are as follows:</p>

<ul>

<li>Science: 21 Nov - 20 Feb 2010</li>

<li>Architecture: 6 Mar - 15 May

2010</li>

<li>History: 29 May - 21 Aug 2010</li>

<li>Religion: 28 Aug - 6 Nov 2010</li>

</ul>

BLOCK ELEMENTS

RESULT

HTML

Timed to a single revolution of the planet

around the sun at a 23.4 degrees tilt that

plays out the rhythm of the seasons, this

<em>Origins of Art</em> cycle is organized

around four themes: <b>science,

architecture, history</b> and

<b>Religion</b>.

INLINE ELEMENTS

Page 3: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

3

RESULT

HTML

Block vs. inline elements

• Note: Although it’s normal to put inline elements

inside block elements, it’s not a good idea to try

to put block elements inside inline elements.

• This distinction is not cast in stone. Inline

elements can be converted to block elements

and vice versa through use of the display

attribute—see pg. 317.

HTML

<div id="header">

<img src="logo.gif" alt="Anish Kapoor" />

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="bio.html">Bio</a></li>

<li><a href="works.html">Works</a></li>

<li><a href="contact.html">Contact</a>

</li>

</ul>

</div><!-- #header -->

GROUPING TEXT &ELEMENTS IN A BLOCK

HTML

<div id="header">

<img src="logo.gif" alt="Anish Kapoor" />

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="bio.html">Bio</a></li>

<li><a href="works.html">Works</a></li>

<li><a href="contact.html">Contact</a>

</li>

</ul>

</div><!-- #header -->

GROUPING TEXT &ELEMENTS IN A BLOCK

RESULT

HTML

<p>Anish Kapoor won the Turner Prize in

1991 and exhibited at the

<span class="gallery">Tate Modern</span>

gallery in London in 2003.</p>

GROUPING TEXT &ELEMENTS INLINE

Page 4: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

4

HTML

<p>Anish Kapoor won the Turner Prize in

1991 and exhibited at the

<span class="gallery">Tate Modern</span>

gallery in London in 2003.</p>

GROUPING TEXT &ELEMENTS INLINE

RESULT

HTML

<iframe width="450" height="350"

src="http://maps.google.co.uk/maps?

q=moma+new+york&amp;output=embed"

frameborder="0"

scrolling="0">

</iframe>

IFRAMES

Online page

HTML

<p>&copy; 2012</p>

<p>&#169; 2012</p>

<p>The &lt;html&gt; tag</p>

<p>The &#60;html&#62; tag</p>

ESCAPE CHARACTERS

RESULT

DOCTYPES tell browsers

which version of HTML you

are using.

SUMMARY

Page 5: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

5

You can add comments to

your code between the <!-- and --> markers.

SUMMARY

The id and class

attributes allow you to

identify particular elements.

SUMMARY

The <div> and <span>

elements allow you to group

block-level elements and

inline content together.

SUMMARY

<iframes> cut windows

into your web pages

through which other pages

can be displayed.

SUMMARY

The <meta> tag allows you

to supply all kinds of

information about your

web page.

SUMMARY

Escape characters are used

to include special

characters in your pages

such as <, >, and ©.

SUMMARY

Page 6: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

6

--But we’re skipping

FLASH, now being

phased out

HTML5: PREPARING VIDEOFOR YOUR PAGES (alternative to FLASH)

SUPPORT

Recent browsers

No DRM

FORMATS

H264 (.mp4)

WebM (.webm)

CONTROLS

From browser

Or via JavaScript

(DRM = copy

protection))

HTML<body>

<video src="video/puppy.mp4"

poster="images/puppy.jpg"

width="400" height="300"

preload

controls

loop>

<p>A video of a puppy playing in the

snow.</p>

</video>

</body>

ADDING HTML5 VIDEORESULT

online

HTML<video poster="images/puppy.jpg"

width="400" height="300"

preload

controls

loop>

<source src="video/puppy.mp4”/> (Chrome, Firefox, IE/Edge, Safari)

<source src="video/puppy.webm”/> (Chrome, Firefox, Edge)

<p>A video of a puppy playing in the

snow.</p>

</video> See caniuse.com/webm

MULTIPLE VIDEO SOURCES: so more browsers can display it

FLASH HTML5

ADDING AUDIO TOWEB PAGES

HOSTED SERVICE

SoundCloud

Amazon S3

Many others

Flash MP3 player

Several available

<audio> element

Similar to <video>

(we’re

skipping

FLASH)

Page 7: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

7

HTML<body>

<audio src="audio/test-audio.mp3"

controls

autoplay>

<p>This browser does not support

our audio format.</p>

</audio>

</body>

ADDING HTML5 AUDIORESULT

online

HTML<body>

<audio controls autoplay>

<source src="audio/test-audio.ogg"/> (Chrome, Firefox, Edge)

<source src="audio/test-audio.mp3"/> (Chrome, IE/Edge, Safari, Opera)

<p>This browser does not support

our audio format.</p>

</audio>

</body>

MULTIPLE AUDIO SOURCES

Note: Firefox has partial mp3 support

Android supports both formats

iPhone can play mp3

caniuse.com/ogg

Flash allows you to add

animations, video and audio

to the web.

SUMMARY

Adobe Flash was never

supported on iPhone or iPad, by

decision of Steve Jobs. See http://en.wikipedia.org/wiki/Apple_and_A

dobe_Flash_controversy

It will be unavailable after this year,

2020. See

www.adobe.com/products/flashplayer/en

d-of-life.html

SUMMARY

HTML5 introduces new <video> and <audio>

elements to add video and

audio to web pages, but

these are only supported in

the latest browsers.

SUMMARY

Page 8: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

8

Browsers that support the

HTML5 elements do not

use the same video and

audio formats, so you

supply your files in different

formats.

SUMMARY

UNDERSTANDING CSS:THINKING INSIDE THE BOX

The Cottage Garden

The cottage garden is a distinct style of garden that uses an informal

design, dense planting and a mixture of ornamental and edible plants.

The Cottage Garden originated in England and its history can be

traced back for centuries, although they were re-invented in 1870's

England, when stylized versions were formed as a reaction to the

more structured and rigorously maintained English estate gardens.

The earliest cottage gardens were more practical than their modern

descendants, with an emphasis on vegetables and herbs, along with

some fruit trees.

p {

font-family: Arial;}

CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS

p {

font-family: Arial;}

CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS

SELECTOR

Page 9: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

9

p {

font-family: Arial;}

CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS

SELECTOR

DECLARATION

h1, h2, h3 {

font-family: Arial;

color: yellow;}

CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED

h1, h2, h3 {

font-family: Arial;

color: yellow;}

CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED

PROPERTY

h1, h2, h3 {

font-family: Arial;

color: yellow;}

CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED

PROPERTY VALUE

HTML

<h1>From Garden to Plate</h1>

<p>A <i>potager</i> is a French term for

an ornamental vegetable or kitchen

garden...</p>

<h2>What to Plant</h2>

<p>Plants are chosen as much for their

functionality as for their color and

form...</p>

INTRODUCING CSSRESULT

Without CSS:

Page 10: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

10

CSS

body {

font-family: Arial, Verdana, sans-serif;}

h1, h2 {

color: #ee3e80;}

p {

color: #665544;}

INTRODUCING CSS

CSS

body {

font-family: Arial, Verdana, sans-serif;}

h1, h2 {

color: #ee3e80;}

p {

color: #665544;}

INTRODUCING CSS

Change the font used

CSS

body {

font-family: Arial, Verdana, sans-serif;}

h1, h2 {

color: #ee3e80;}

p {

color: #665544;}

INTRODUCING CSS

Change the color of the headings

CSS

body {

font-family: Arial, Verdana, sans-serif;}

h1, h2 {

color: #ee3e80;}

p {

color: #665544;}

INTRODUCING CSS

Change the color of the paragraphs

RESULT

online

HTML<html>

<head>

<title>Using External CSS</title>

<link href="css/styles.css"

type="text/css"

rel="stylesheet">

</head>

<body>

<h1>Potatoes</h1>

<p>There are dozens of...</p>

</body>

</html>

USING EXTERNAL CSS

Page 11: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

11

HTML<html>

<head>

<title>Using External CSS</title>

<link href="css/styles.css"

type="text/css"

rel="stylesheet">

</head>

<body>

<h1>Potatoes</h1>

<p>There are dozens of...</p>

</body>

</html>

USING EXTERNAL CSS

HTML<html>

<head>

<title>Using External CSS</title>

<link href="css/styles.css"

type="text/css"

rel="stylesheet">

</head>

<body>

<h1>Potatoes</h1>

<p>There are dozens of...</p>

</body>

</html>

USING EXTERNAL CSS

HTML<html>

<head>

<title>Using External CSS</title>

<link href="css/styles.css"

type="text/css"

rel="stylesheet">

</head>

<body>

<h1>Potatoes</h1>

<p>There are dozens of...</p>

</body>

</html>

USING EXTERNAL CSS

CSS

<head>

<title>Using Internal CSS</title>

<style type="text/css">

body {

font-family: arial;

background-color: #rgb(185,179,175);}

h1 {

color: rgb(255,255,255);}

</style>

</head>

USING INTERNAL CSS

CSS SELECTORS

Universal * {}

Type h1, h2, h3 {}

Class .note {}

p.note {}

ID #introduction {}

CSS SELECTORS

Child li>a {}

Descendent p a {}

Adjacent sibling* h1+p {}

General sibling* h1~p {}

*Optional coverage (much less

common)

Page 12: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

12

CSS* {

font-family: Arial;

color: #333333;}

h1 {

font-family: "Courier New", monospace;}

i {color: green;}

i {color: red;} (later in file)

p {color: blue}

p b {color: violet;} (more specific)

HOW CSS RULES CASCADERESULT

CSS

body {

font-family: Arial, sans-serif;

color: #665544;

padding: 10px;}

.page {

border: 1px solid #665544;

background-color: #efefef;

padding: inherit;}

Reference: mozilla

INHERITANCE: Some properties (color, etc.) are largely inherited from containing elements, etc., others (border, etc.) are not.

RESULT

RESULTWhat properties are inherited?

• Should be easy to find this out, but there is

no central easy-to-use standard document

• Various websites try to cover details

• The standard for CSS3 is the standard for

CSS2.2 plus whatever is finished so far for

CSS3.

• CSS 2.2 Full property table helps with pre-

CSS3 properties

RESULTCSS standards complexityhttps://en.wikipedia.org/wiki/Cascading_Style_Sheets

Recommendations

Candidate

Recommendations

Page 13: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

13

Same CSS can be used for

every page of website

WHY USE EXTERNALSTYLE SHEETS

No need to copy style code into

each webpage

WHY USE EXTERNALSTYLE SHEETS

Changes to CSS automatically

apply to the entire website

WHY USE EXTERNALSTYLE SHEETS

Faster download time for

subsequent pages

WHY USE EXTERNALSTYLE SHEETS

Easier for many people to create

new pages in same style

WHY USE EXTERNALSTYLE SHEETS

Older browsers do not support

each property

DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS

Page 14: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

14

Important to test

DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS

Some browsers have "bugs" or

"quirks"

DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS

CSS treats each HTML

element as if it appears

inside its own box and uses

rules to indicate how that

element should look.

SUMMARY

Rules are made up of

selectors (to specify which

elements the rule applies

to) and declarations (to say

what these elements should

look like).

SUMMARY

Different types of selectors

allow you to target your

rules at different elements.

SUMMARY

Declarations are made up of

two parts: the properties of

the element that you want to

change, and the values of

those properties.

SUMMARY

Page 15: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

15

CSS rules usually appear in

a separate document,

although they may appear

within an HTML page.

SUMMARY

CSS

h1 {

color: DarkCyan;}

h2 {

color: #ee4e80;}

p {

color: rgb(100, 100, 90);}

FOREGROUND COLOR (for text)

RESULT

CSS

body {

background-color: rgb(200,200,200);}

h1 {

background-color: DarkCyan;}

h2 {

background-color: #ee3e80;}

p {

background-color: white;}

BACKGROUND COLOR

Page 16: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

16

RESULTUNDERSTANDING COLOR

UNDERSTANDING COLOR VALUES

RGB VALUES

rgb(102,205,170)

HEX CODES

#66cdaa

COLOR NAMES

mediumAquaMarine

HUE SATURATION BRIGHTNESS

CONTRAST

HIGH

CONTRAST

LOW

CONTRAST

MEDIUM

CONTRAST

If text is reversed out (a light color on a dark

background) increase contrast and line height.

CSS

p.one {

background-color: rgb(0,0,0);

opacity: 0.5;

padding: 10px;}

p.two {

background-color: rgb(0,0,0);

background-color: rgba(0,0,0,0.5);}

CSS3: OPACITY: We’ll skip this

Page 17: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

17

RESULT

Online (but uses concepts from chap. 13)

Current

Chrome

Old

browser

Opacity 0.5

Color not only brings your

site to life, but also helps

convey the mood and

evokes reactions.

SUMMARY

There are three ways to

specify colors in CSS: RGB

values, hex codes, and

color names.

SUMMARY

Color pickers can help you

find the color you want.

SUMMARY

Ensure that there is enough

contrast between any text

and the background color

(or people will not be able to

read your content).

SUMMARY

CSS3 has introduced an

extra value for RGB colors

to indicate opacity. It is

known as RGBA.

SUMMARY

Page 18: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

18

TYPEFACE TERMINOLOGY

SERIF SANS-SERIF MONOSPACE WEIGHT STYLE STRETCH

TYPEFACE TERMINOLOGY

CHOOSING A TYPEFACEFOR YOUR WEBSITE

SERIF SANS-SERIF

*

*

*

*

*On “web-safe fonts list” at

http://www.w3schools.com/cssref/css_websafe_fonts.asp

CHOOSING A TYPEFACEFOR YOUR WEBSITE

MONOSPACE CURSIVE FANTASY

*

* *

Page 19: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

19

CSSbody {

font-family: Georgia, Times, serif;}

h1, h2 {

font-family: Arial, Verdana, sans-serif;}

.credits {

font-family: "Courier New", Courier,

monospace;}

SPECIFYING TYPEFACESfont-family

From http://www.w3schools.com/cssref/css_websafe_fonts.asp:

Start with the font you want, and end with a generic family, to let the

browser pick a similar font in the generic family, if no other fonts are

available

RESULT

Online

CSS

body {

font-family: Georgia, Times, serif;

font-size: 12px;}

h1 {

font-size: 200%;} (200% of 12px)

.credits {

font-size: 1.3em;} (1em = width of ‘m’)

SIZE OF TYPEfont-size (inherited property)

RESULT

Note: Body looks like this even if browser is set for

large font, thus a barrier to sight-impaired users

Online

Zoom works as expected.

TYPE SCALES

Now used in programs such

as Word, Photoshop and

InDesign

One pt is approximately one px on a laptop,

so can’t go below about 8pt

Pleasing to the eye

Developed in 16th centuryCSS

.credits {

font-weight: bold;}

BOLDfont-weight

Page 20: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

20

RESULT

CSS

.credits {

font-style: italic;}

ITALICfont-style

RESULT

CSS

h1 {

text-transform: uppercase;}

h2 {

text-transform: lowercase;}

.credits {

text-transform: capitalize;}

UPPERCASE & LOWERCASEtext-transform

RESULT

CSS

.credits {

text-decoration: underline;}

a {

text-decoration: none;}

UNDERLINE & STRIKEtext-decoration

Page 21: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

21

RESULT

CSS

p {

line-height: 1.4em;}

LEADINGline-height

RESULT

CSS

h1, h2 {

text-transform: uppercase;

letter-spacing: 0.2em;}

.credits {

font-weight: bold;

word-spacing: 1em;}

LETTER & WORD SPACINGletter-spacing, word-spacing(optional for us)

RESULT

CSS

h1 {

text-align: left;}

p {

text-align: justify;}

.credits {

text-align: right;}

ALIGNMENTtext-align

Page 22: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

22

RESULT

CSS

#six-months {

vertical-align: text-top;}

#one-year {

vertical-align: baseline;}

#two-years {

vertical-align: text-bottom;}

VERTICAL ALIGNMENTvertical-align

RESULT

CSSh1 {

background-image: url("images

/logo.gif");

background-repeat: no-repeat;

text-indent: -9999px;}

.credits {

text-indent: 20px;}

<body>

<h1>Briards</h1> text pushed off screen (but available<p class="credits">by Ivy Duckett</p> to special browsers)

INDENTING TEXTtext-indent (Here, trick for providing text for an image, for blind users)

CSS

h1 {

background-image: url("images

/logo.gif");

background-repeat: no-repeat;

text-indent: -9999px;} trick case

.credits {

text-indent: 20px;} ordinary case

INDENTING TEXTtext-indent

RESULT

online

Page 23: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

23

CSS

a:link {

color: deeppink;

text-decoration: none;}

a:visited {

color: black;}

a:hover {

color: deeppink;

text-decoration: underline;}

a:active {

color: darkcyan;}

STYLING LINKS:link, :visited pseudo-classes

RESULT

online

There are properties to

control the choice of font,

size, weight, style,

and spacing.

SUMMARY

There is a limited choice

of fonts that you can

assume most people will

have installed.

SUMMARY

If you want to use a wider

range of typefaces there

are several options, but you

need to have the right

license to use them. (not

covered, see book if

interested)

SUMMARY

You can control the space

between lines of text,

individual letters,

and words.

SUMMARY

Page 24: 9/15/2020 · 9/15/2020 3 RESULT HTML Block vs. inline elements •Note: Although it’s normal to put inline elements inside block elements, it’s not a good idea to try to put block

9/15/2020

24

Pseudo-classes can

change the style of an

element when a user

hovers over or clicks on

text, or have visited a link.

SUMMARY


Recommended