Cascading Style Sheets Part 2

04/19/23 1

Cascading Style SheetsPart 2

Modified by Linda KenneyApril 5, 2011

04/19/23 2

CSS propertiesYou should have a good understanding of the basic syntax of CSS and know how to associate CSS with XHTML in a variety of ways.

The declarations that appear within style rules and inline styles consist of properties and their associated values.

To use CSS effectively, we need to know what properties are available, which values they can accept and to which XHTML elements they may be applied.

04/19/23 3

Color namesMany of our examples so far have used the color property with a color name as its value.

However, this is not how Web authors typically use the color property.

There are only sixteen color names that are mentioned in the CSS standard.

These color names are white, black, gray, silver, red, blue, green, fuchsia, purple, maroon, aqua, navy, teal, lime, olive and yellow.

While browsers may recognize other color names of their own choosing, these sixteen are the only ones you can reasonably expect all browsers to recognize.

And since the standard doesn’t specifically define what colors these names should apply to, they won’t necessarily result in the same colors in every browser.

04/19/23 4

Web authors seldom use these color names and instead use other means of specifying colors in CSS.

A more efficient (and more common) way of specifying RGB colors is using a single number in the hexadecimal number system.

04/19/23 5

The hexadecimal number systemThe hexadecimal number system is a base 16 system with 16 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F

The beauty of the hexadecimal system is that the largest six-digit value in this system is FFFFFF, which represents 16,777,216. What is the smallest?

This makes a six-digit hex value an ideal, if somewhat odd-looking, way to specify a color.

04/19/23 6

Colors using hexadecimal notationWhen using a six-digit hex value to specify a color in CSS, it must begin with a number sign (#).

This gives the browser a way to easily distinguish between color names and color numbers, since a six-digit hex value may consist of six letters.

Forgetting the number sign may cause some browsers to ignore the color property altogether.

The letters acting as digits in a hex value may be either uppercase or lowercase.

h1 {color: #56F3B4;}

h1 {color: #BADCAB;}

h1 {color: #B48;}h1 {color: #BB4488;}

04/19/23 7

The Web Color Palette (and names)A collection of 216 colors that display the same on both the Mac and PC platforms.

Some colors can be referred to by their names.

However, be aware that the W3C does not recommend the use of color names (use hexadecimal values instead).

See the Color Chart at http://webdevfoundations.net/color/index.htm

04/19/23 8

Accessibility and colorNot all users can distinguish all colors.

See:http://www.vischeck.com/vischeck/vischeckURL.php

It’s best to choose background colors with a high amount of contrast.

Avoid using the following colors next to each other – red, green, brown, gray, purple.

White, black and shades of blue and yellow are easier to differentiate.

04/19/23 9

The background-color propertyThe background-color property is used to set the background color of an element.

When setting an element’s background-color property, you should always set a contrasting value for the color property as well. WHY?

h1 {background-color: #000066; color: #FFFF66;}

body {background-color: #FFFF66; color: #000066;}

04/19/23 10

FontsA font, or typeface, is a description of what characters should look like. Consider the following examples showing

the same text in a variety of different fonts

04/19/23 11

Fonts (cont.)Notice the different types of contrast

these fonts create.

Some are subtle, others assertive Some are heavy, others are light Some are formal, others are informal Some look like print, others look like

handwriting Some spread the text out, others condense

it Some are easy to read on the screen, others

are more difficult

04/19/23 12

Fonts on the WebFonts present special challenges on the Web. Most importantly, a Web author must remember

that a browser only has access to the fonts installed on the computer where it is running. Different computers have different fonts installed.

Another issue is that most fonts were designed for use on the printed page, not the computer screen.

As a result, care must be used to select fonts that are not only likely to be available, but also likely to be readable on the screen.

04/19/23 13

Fonts on the Web (cont.)If you ask the browser to use a font that it does not have access to, it will be unable to comply with your request.

It will still show the text, but in a font of its own choosing.

Therefore, when telling browsers what font to use, it’s always best to give them a prioritized list of options.

That allows the browser to look for each font in the order they’re specified and use the first one it finds.

If it exhausts the list without finding any of the requested fonts, it uses a font of its own choosing.

If the list ends with the name of generic font family, the browser is free to look for any font it has available that falls into that family if it can’t find any of the others specified.

04/19/23 14

Generic font familiesThere are five generic font families recognized by CSS.

Fonts in the serif family have serifs at the ends of many of the strokes used to make the letters.

These tend to be the more formal, conservative fonts best suited to large blocks of body text.

Fonts in the sans-serif family do not have serifs These tend to be somewhat less formal, but “cleaner,” fonts well suited to short text

such as headings and captions. Fonts in the cursive family tend to look like handwriting.

These can range from formal to informal, but are useful when trying to convey a personal touch.

Fonts in the fantasy family can be pretty much anything that doesn’t fit nicely in the other families.

Since the results are very hard to predict, it is difficult to use this generic font family effectively.

Fonts in the monospace family have characters guaranteed to be all the same width

These are typically the least attractive fonts and are often used only when predictable character widths are desired.

04/19/23 15

The font-family propertyThe font-family property can be used to set the font that the browser will use to present the text within an element.

The value of the font-family property should be a comma-separated list of font names.

Put the preferred fonts earlier in the list and less ideal fonts later in the list.

It’s recommended that you end the list with the name of a generic font family.

Font names that contains spaces should be quoted with single or double quotes.

Single quotes are useful in inline styles, since they must be inside a quoted attribute value

04/19/23 16

The following examples demonstrate some common font lists

body {font-family: "times new roman", times, serif;}

h1 {font-family: verdana, arial, helvetica, sans-serif;}

h2 {font-family: arial, helvetica, sans-serif;}

p {font-family: georgia, "times new roman", times, serif;}code {font-family: "courier new", courier, monaco, monospace;}

.signature{font-family: "zapf chancery", cursive;}

04/19/23 17

The font-weight propertyWhen text is made bold, typographers think of that as having increased the weight of the text. To increase the weight of text with CSS, use

the font-weight property. The most commonly used value for the

font-weight property is bold. Values of normal, bolder and lighter are

also acceptable.

em {font-weight: bold;}.aside {font-weight: lighter;}.important {font-weight: bolder;}h4, h5, h6{font-weight: normal;}

04/19/23 18

The font-style propertyThe font-style property is used to select a particular style of text. It accepts one of three values.

The most commonly used value is italic. The value oblique is also available, but it is not as

commonly used. In some cases, oblique text and italic text will look the

same.. In other cases, they will look different Oblique fonts will typically appear simply as slanted versions

of the base font, while italic fonts are likely to be more stylized versions of the base font.

A value of normal is available to specify “regular” text.

This is useful for over-riding inherited font-style properties or ensuring that an element is not rendered in italic or oblique text due to a browser’s default presentation.

04/19/23 19

Font-style property examplesem {font-weight: bold; font-style:

normal;}

.slanted {font-style: oblique;}

.title{font-style: italic;}

h1, h2, h3 {font-weight: normal; font-style: italic;}

04/19/23 20

The font-variant propertyThe font-variant property can be used to select variants of the specified font-family. A value of small-caps instructs the browser to

search the specified font family for a small caps variant. All letters in a small caps font look like uppercase.

A value of normal instructs the browser to choose a font that is not a small caps variant. This value is useful for over-riding inherited values.

h1, h2, h3 {font-variant: small-caps;}

04/19/23 21

The font-size propertyThe font-size property is used to specify the size of the font used to present an element. It can accept several types of value.

It can accept a length value like em , the width of a capital M of the current font.

It can also accept one of seven absolute sizing keywords

They are xx-small, x-small, small, medium, large, x-large and xx-large.

It can also accept one of two relative sizing keywords.

They are larger and smaller. Both are relative to the font size of the parent element

Or it can accept a percentage value Percentages are relative to the font size of the parent element.

04/19/23 22

font-size property examplesp {font-size: 12pt;}

.caption {font-size: 10px;}

#footer{font-size: 0.75em;}

h1 {font-size: 200%;}

h2 {font-size: x-large;}

h3 {font-size: larger;}

04/19/23 23

The line-height propertyThe line-height property is used to set the spacing between the baselines of adjacent lines of text..

When used in conjunction with font size, this property effectively controls line spacing

The line-height property can accept several types of values.

It can accept length values, like em It can accept percentage values It can accept a numerical value (with no unit or percent sign)

Such a value is used as a multiplier applied to the font size of the current element

For example, a value of 2 would produce double-spacing and a value of 1.5 would produce space-and-a-half spacing

04/19/23 24

line-height property examplesp {line-height: 1.5;}

body {line-height: 1.2em;}

#footer {font-size: 9pt; line-height: 10pt;}

.fineprint {font-size: 8pt; line-height: 105%;}

04/19/23 25

The font propertySince it’s common to use several of these font related properties together, there is a single font shorthand property that lets you specify several values at once.

The font property can accept a value comprised of a combination of legal values for the font-style, font-variant, font-weight, font-size, line-height and/or font-family properties.

04/19/23 26

The font property (cont.)If there are not explicit values for every font

related property provided, the font property sets those values left unspecified to their defaults.

The example above is equivalent to the example below.

body {font-weight: normal; font-variant: normal; font-style: normal; font-size: 75%; line-height: normal; font-family: arial, helvetica, sans-serif;}

body {font: 75% arial, helvetica, sans-serif;}

04/19/23 27

The text-indent propertyThe text-indent property is used to specify how far to indent the first line of a block of text. It can accept length values or percentages.

In this case, percentages are relative to the width of the parent element.

The default value is 0.

h2 {text-indent: 2.5%;}h3 {text-indent: 5.0%;}h4 {text-indent: 7.5%;}p {text-indent: 3em;}blockquote {text-indent: 0.5in;}

04/19/23 28

The text-align propertyThe text-align property is used to determine how text is aligned within an element.

It can accept one of four values. A value of left aligns the text so that each line of text begins

at the left edge of the element. A value of right aligns the text so that each line of text ends

at the right edge of the element.. A value of center aligns the text so that each line of text is

centered between the left and right edge of the element A value of justify aligns the text so that each line is precisely

long enough to begin at the left edge of the element and end at the right edge.

The effect of the text-align property also applies to items within an element that are treated as text, such as images and tables.

From a design perspective it’s generally advisable to keep English text aligned to the left or justified.

04/19/23 29

text-align property examplesh1, h2, h3, h4 {text-align: left;}

.address{text-align: right;}

p {text-align: justify;}

#footer {text-align: center;}

04/19/23 30

The text-decoration propertyThe text-decoration property is used to apply various types of decoration to text.

It takes one of five values. A value of line-through instructs the browser to draw

a line through the mid-line of the text. This might be useful for indicating text that is being deleted

during a revision A value of overline instructs the browser to draw a line

over the top of the text. This might be useful in certain mathematical and scientific

formulas A value of underline instructs the browser to draw a

line underneath the text. This is seldom useful and not recommended since users generally

associate underlined text with links A value of none is useful for over-riding inherited

values and browser defaults. Setting this value is often used when authors wish to remove the

default underlines beneath link labels

04/19/23 31

text-decoration property examples.delete {color: #FF0000; text-

decoration: line-through;}

.length {text-decoration: overline;}

.badidea {color: #00F; text-decoration: underline;}

.a:link, a:visited {text-decoration: none;}

04/19/23 32

The text-transform propertyThe text-transform property is used to transform the case of text. It takes one of four values.

A value of uppercase instructs the browser to display all characters of the text as uppercase.

A value of lowercase instructs the browser to display all characters of the text as lowercase.

A value of capitalize instructs the browser to display the first character of each word in the text as uppercase.

A value of none is useful for overriding inherited values..upper {text-transform: uppercase;}

.lower {text-transform: lowercase;}h1, h2, h3 {text-transform: capitalize;}.astyped {text-transform: none;}

04/19/23 33

Controlling list item markersList items are traditionally preceded by a marker of some sort. CSS offers properties to control these markers. The list-style-image property is used to

specify an image that should be displayed as a list item marker.

Its value must be either a URL in functional notation or the keyword none

The list-style-type property is used to specify more traditional list item markers.

Its value may be one of the following nine keyword values: disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and none.

If list-style-image is also specified with a value other than none, the image will be used in place of the specified list-style-type, if it is available.

04/19/23 34

Controlling list item markers (cont.)

The list-style-position property is used to specify how the marker is displayed in relation to the list items.

Its value may be either inside or outside. The default value is outside, which leaves the marker hanging out to

the left of the list item text A value of inside causes the marker to move into the list, acting almost

like an indentation

The list-style property is a shorthand property that can accept a space separated list consisting of up to one value from each of the previously mentioned list-related properties.

Each of these properties is applicable to any element whose display property has a value of list-item and they are all inherited

They are therefore applicable to <li> elements, but are most commonly applied to <ol> and <ul> elements and inherited by the <li> elements they contain.

04/19/23 35

The background-image propertyThe background-image property allows you to set a background image to be used for an element. It takes as its value either the URL of the

image to use or the word none (which is the default). URLs in CSS are specified using functional

notation.

Note the lowercase url followed by the actual URL enclosed in parentheses.

In external style sheets, use absolute URLs even for local resources.

body {background-image:url(../images/texture.jpeg);}

04/19/23 36

The background-image property (cont.)

Choose images that are relatively homogeneous and tile nicely for background images.

A relatively homogeneous image will contain mostly similar colors, making it easier to choose foreground colors that remain uniformly visible against it.

An image tiles nicely when it can be placed adjacent to a copy of itself without any visible seam.

When setting a background image, always set foreground and background colors as well.

Set foreground colors that will contrast well against the background image so text remains easy to see and read.

Set a background color that approximates the effect of the background image. The background image will be shown over the background color whenever possible.

body {background-color: #FFFF66; background-image: url(../images/texture.jpeg); color: #000066;}

04/19/23 37

The background-repeat propertyIf you don’t specify otherwise, a browser will repeat a background image in as many rows and columns as needed to fill the background area of the element.

This process is commonly referred to a tiling, since it is similar to covering a wall with ceramic tiles.

The background-repeat property lets you specify exactly how the background image should be repeated.

Using a value of repeat instructs the browser to use as many rows and columns as it needs to fill the background area.

Using a value of no-repeat instructs the browser to simply show the background image once.

Using a value of repeat-x instructs the browser to use as many copies of the image as needed to span across the background area but only in a single row.

Using a value of repeat-y instructs the browser to use as many copies of the images as needed to span down the background area but only in a single column.

If no background image has been specified, this property has no effect.

body {background-color: #FFFF66; background-image: url(../images/texture.jpeg); background-repeat: repeat-x; color: #000066;}

04/19/23 38

The background-attachment property

Unless you specify otherwise, a background image scrolls along with the page on which it is displayed.

But you can use the background-attachment property to control whether the background image scrolls with the page or remains in a fixed position.

Use a value of scroll to instruct the browser to scroll the background with the page.

Use a value of fixed to instruct the browser to leave the background in its original position and allow the page to scroll “over” it.

If no background image has been specified, this property has no effect.body {background-color: #FFFF66;

background-image: url(../images/texture.jpeg); background-repeat: repeat-x; background-attachment: fixed; color: #000066;}

04/19/23 39

The background-position propertyBy default, the first copy of a background image is displayed with its upper left corner at the upper left corner of the background area of the element to which it’s applied.

The background-position property can be used to control precisely where the first copy of the background image gets displayed.

Any tiling needed then proceeds from that initial copy towards the right and/or bottom.

This property can accept a variety of value types, but there are typically two values separated by a space.

The first value represents the horizontal position desired. The second value represents the vertical position desired. It’s fairly common for the values to be percentages. Commonly used percentages have keywords associated with

them. And absolute length units are also acceptable .

04/19/23 40

Background positioning by percentage

When using the background-position property, percentages are relative to the background area which the image will be used to fill.

They are also relative to the dimensions of the background image itself The example below positions the upper left corner of the initial background image

in the upper left corner of the background area

This example positions the lower right corner of the initial background image in the lower right corner of the background area

This example positions the center of the initial background image in the center of the background area

And this last example positions the point 23% of the way across and 38% of the way down the initial background image 23% of the way across and 38% of the way down the background area

body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0% 0%;}




04/19/23 41

Background positioning by keyword

It’s also possible to use keywords instead of commonly used percentages as values of the background-position property.

The keywords left, center and right are equivalent to horizontal positions of 0%, 50% and 100%, respectively

The keywords top, center and bottom are equivalent to vertical positions of 0%, 50% and 100%, respectively

The keywords may be used in any combination with one another

But keywords cannot be combined with percentages or length units

body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: left center;}body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;}

04/19/23 42

The background propertySince it’s common to use several of these background related properties together, there is a single background property that lets you specify several values at once.

Such properties are often referred to as shorthand properties.

The background property can accept a value comprised of any combination of legal values for the other background related properties.

The example above is equivalent to the example below

If there are not explicit values for every background related property provided, the background property sets those values left unspecified to their defaults

The example above is equivalent to the example below

body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center;}

body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%;}

body {color: #000066; background: #FFFF66 url(../images/watermark.jpeg) no-repeat fixed center center;}

body {color: #000066; background: #FFFF66 url(../images/watermark.jpeg);}

04/19/23 43

XHTML elements presentedclass attribute<div>…</div>id attribute<link /><span>…</span>style attribute<style>…</style>

04/19/23 44

CSS properties presented in parts 2 and 3see text p. 78, Appendix C, p. 612 for details

backgroundbackground-

attachmentbackground-colorbackground-imagebackground-positionbackground-repeatborderborder-bottomborder-bottom-widthborder-colorborder-leftborder-left-widthborder-rightborder-right-widthborder-styleborder-topborder-top-widthborder-width

marginmargin-bottommargin-leftmargin-rightmargin-toppaddingpadding-bottompadding-leftpadding-rightpadding-toptext-aligntext-decorationtext-indenttext-transformvertical-alignwidth

clearcolordisplayfloatfontfont-familyfont-sizefont-stylefont-variantfont-weightheightline-heightlist-stylelist-style-imagelist-style-

positionlist-style-type

04/19/23 45

Thanks to Mike Gildersleeve for sharing information from his Summer, 2006 CS403 PowerPoint.

Information also used from:Web Developer & Design Foundations with

XHTML by Terry Felke-Morris

Documents

Cascading Style Sheets Part 2