CSS Selectors and Fonts

+
CSS Continued
Formatting Text and Links

+ Using the vertical-align Property
 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.

+ Using the vertical-align Property

+ The vertical-align Property Values

+
Changing the Appearance of Lists
 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;

+ Using the list-style-type Property
 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;
}

 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;
}

+Using the list-style-position 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

+
Using Groups of Selectors
 Grouped selectors are selectors that share a common set of
declarations and that are grouped into a comma-separated list.

+
Using Descendant Selectors
 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;
}

+
Styling a List of Hyperlinks
 The nav element identifies a block of navigation links.

+
Styling a List of Hyperlinks

+
CSS Inheritance
 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.

+
CSS Class Selector
 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.

+
Dependent Class
 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">

+
Rules for Class Names
 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.

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

+
Independent Class
 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">

+
Independent Selector Code
Code to apply the center class:

+ Using the list-style-image
Property
 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.

+
Using the span Element
 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>

+
Pseudo-Class Selectors
 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.

+
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.

+
The Anchor Pseudo-Class Selectors
+

+
Setting Margins
 The following properties are used to set margins:
 margin-top
 margin-right
 margin-bottom
 margin-left
 Order is irrelevant.

+
Fonts
 Web Fonts
 Download
 Link/Embed
See Handout!

CSS Selectors and Fonts

More Related Content

Similar to CSS Selectors and Fonts (20)

More from kjkleindorfer (10)

Recently uploaded (20)

CSS Selectors and Fonts