Formatting Text and Links

Tutorial 4
Formatting Text and Links

Blended HTML and CSS
Fundamentals
3rd EDITION

Objectives 4.1
•
•
•
•
•

XP

Specify the vertical alignment of an element
Define list styles
Implement grouped selectors
Incorporate descendant selectors
Style a list as a navigation bar

New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition

2

Objectives 4.2

XP

• Work with dependent and independent
classes
• Set an image as a list marker
• Create dynamic pseudo-classes


3

Using the vertical-align
Property

XP

• Use the vertical-align property to
position images and other elements vertically
with text.
• The property has several possible values:
– top – The top of the image is aligned with the
text.
– middle – The image is aligned vertically
centered with the text.
– bottom – The bottom of the image is aligned
with the text.

4

Property


XP

5

Property


XP

6

The vertical-align Property
Values


XP

7

Changing the Appearance of Lists XP
• Lists can be enhanced by graphics and images.
• The following properties can be used:
– list-style-type: stylevalue;
– list-style-position:
positionvalue;
– list-style-image: url(imagename);
– Shorthand property:
list-style: stylevalue
url(imagename) positionvalue;


8

Using the list-style-type
Property

XP

• Use the list-style-type property to change
the appearance of the default solid bullet for
unordered lists.
• There are four list-style-type values for
unordered lists:
– disc – a filled circle (the default)
– circle – a hollow circle
– square – a filled square
– none – no bullet is shown
ul {
list-style-type: value;
}

9

Property

XP

• There are the following list-style-type values
for ordered lists:
– decimal
– decimal-leading-zero
– lower-roman
– upper-roman
– lower-alpha
– upper-alpha
– none
ol {
list-style-type: value;
}

10

Property


XP

11

Using the list-style-positionXP
Property
• Use the list-style-position property to
change the position of the marker or bullet included
with a list.
• There are two list-style-position values:
– inside
– outside


12

Using Groups of Selectors

XP

• Grouped selectors are selectors that share a
common set of declarations and that are
grouped into a comma-separated list.


13

Using Descendant Selectors

XP

• A descendant selector is a selector nested
within another selector.
• A space is used, without a comma, to indicate
descendant selectors.
• A comma is used between selectors when the
style applies to all selectors in the group.
strong em {
color: maroon;
}

14

Using Descendant Selectors


XP

15

Styling a List of Hyperlinks

XP

• The nav element identifies a block of
navigation links.


16

Styling a List of Hyperlinks


XP

17

CSS Inheritance

XP

• CSS inheritance is a method whereby a child
element inherits characteristics from its parent
element.

• The nav element is a parent of the ul
element, and the ul element is a parent of
the li element.

18

CSS Class Selector

XP

• A class selector is a name preceded by a
period.
• This name can then be applied to any HTML
element.
• Class selectors can format one or more
instances of an element.
• A class must be applied to the start tag of one
or more elements on a Web page.
• Classes can be dependent or independent.

19

Dependent Class

XP

• A dependent class styles a particular element.
• Code syntax:
selector.dependentclass {
property1: value;
property2: value;
}
selector – the name of the element
dependentclass – the name of the dependent
class

• To apply the dependent class to an element:
<element class = "dependentclass">

20

Rules for Class Names

XP

• A class name can contain only alphabetic or numeric
characters.
• A class name must be one word (no spaces).
• A class name should describe the purpose of the
class.
• A class name should not begin with a number
because not all browsers will recognize it.


21

Dependent Selector Code

XP

Code to apply the attention class:
<li class = "attention">Your name and
contact information</li>


22

Independent Class

XP

• An independent class styles any element.
• Code syntax:
selector.independentclass {
property1: value;
property2: value;
}
selector – the name of the element
independentclass – the name of the dependent
class

• To apply an independent class to any element:
<element class = "independentclass">

23

Independent Selector Code

XP

Code to apply the center class:


24

Using the list-style-image
Property

XP

• Use the list-style-image property to
specify a graphic image instead of a bullet
marker for a list.
• Use a very small image for a bullet marker.
• Code example:
ul {
list-style-image: url(star.gif);
}

• url points to the image used as a bullet
marker.

25

Using the span Element

XP

• The span element is a generic element that
does not have any specific meaning, but it
allows you to mark inline content.
• span element syntax:
<span>content</span>


26

Pseudo-Class Selectors

XP

• A pseudo-class is a class that exists in CSS but
is not directly defined in HTML.
• Pseudo-classes associated with the anchor
element are used to achieve the mouse-over
effect.
• Link color defines the link state, which is
whether a hyperlink has been clicked or not.


27

XP
The Anchor Pseudo-Class Selectors

• Using the anchor pseudo-class selectors,
hyperlinks can be styled, based on the
following four states:
– a:link is the selector for normal links.
– a:visited is the selector for visited links.
– a:hover is the selector for the hover state (when the
mouse pointer passes over the link).
– a:active is the selector for active links (when a user
holds down the mouse button to click a link).

• Note that the colon does not have spaces
before and after it.

28

XP
The Anchor Pseudo-Class Selectors

+


29

Setting Margins

XP

• The following properties are used to set
margins:
– margin-top
– margin-right
– margin-bottom
– margin-left

• Order is irrelevant.


30

Setting Margins


XP

31

Formatting Text and Links

More Related Content

What's hot (8)

Similar to Formatting Text and Links (20)

Recently uploaded (20)

Formatting Text and Links