Week 7

* Assignment *

Questions from last time?

Note the Midterm Project Assignment details at the end of this page!

 

Chapter 9: Making Selectors

The selector is the first part of the style rule, which specifies what items on the Web page will be formatted by the style rule (and then the style rule's declarations are applied to format all items on the page that match that selector). For example, the selector in this style rule:

h1 { color:red; }

...is the h1, and therefore all h1 elements on the page will be formatted with red text color. We have already seen examples of selectors in previous lectures, and we have used simple selectors in our exercises, but now we want to define selectors in more detail.

I will show you examples today using this file, and this external style sheet (you can load them in tabs in your browser for later reference).

 

Selectors can be built up out of element tags (as above), class names, id names, attributes, and complex combinations of these (with special characters that relate multiple items). There are also pseudo-classes or pseudo-elements that can affect specific parts of the page (such as the first letter in a paragraph, or a link that has the mouse pointer hovering over it).

(Note that no selector is needed when applying local (inline) styles, since the element to be formatted is simply the one with the style attribute in it, such as:

<p style="color:red; margin-left:50px;">This paragraph gets formatted.</p>

...but we won't be doing much inline styling.

 

Remember that class names can be assigned to multiple items on a page by putting a class attribute inside the opening tag of the element, such as:

<h2 class="bluesubhead">Here is Item One</h2>

<p class="details">Item one is a wonderful thing. Yes indeed.<p>

<h2 class="bluesubhead">Here is Item Two</h2>

<p class="details">Item two is a very fine thing as well. You bet!<p>

You can even assign multiple class names to a single element (although you can only have one class attribute in a tag) by doing separating the class names with a space, like this:

<p class="firstpara details">This paragraph has two class names!</p>

 

 

Remember that an id name can be assigned to an item on a page by putting an id attribute inside the opening tag of the element, such as:

<div id="footer">
     <p>This Web page was created by Thomas Beach ©2010</p>
</div> <!-- end of footer -->

...and remember that any particular id name can only be used ONCE on each Web page (whereas a class name can be used multiple times on a Web page). It is OK (and advantageous) to use the same id on different Web pages (for example, the id="footer" that is has its style rule in an external style sheet could be used on many pages that link to the style sheet—but only once per each page).

 

An element can contain both class AND and id attributes, if desired.

<div id="navbar" class="summer">

 

 

Type Selectors (Tag Selectors)

The simplest selector is a single element tag, which specifies the type of element you want to format, such as:

h1 { color:red; }

h2 { color:blue; text-align:center; }

img { border: none; }

p {
    color:green;
    line-height:120%;
}

The first style rule above would apply to all level one headings on the page. The second rule would apply to all level two headings. The third would apply to all images. And the fourth would apply to all paragraphs. You don't have to do anything to those elements on the page (such as adding class or id names to them)—they will simply get the formatting specified in the rules simply because the elements uses the tags that are the selectors.

The asterisk ( * ) can be used as a wildcard to represent ANY element tag. We will see shortly how this can be used.

 

Class Selectors

Class selectors start with a period ( . ) as shown below. You can use any names you like as long as they don't contain spaces and various special characters. Long names are a bother to type, but are more descriptive. Examples:

.bluesubhead { color:blue; text-align:center; }

.rbordr { border: 2px solid red; }

Note that the selector *.cool (with the wildcard * that matches any element) is equivalent to the selector .cool (without the wildcard).

The .bluesubhead style above would apply to any element on the page that has the attribute class="bluesubhead" in the opening tag of that element.

 

ID Selectors

All id selectors start with a pound sign ( # ) as shown below. You can use any names you like as long as they don't contain spaces and various special characters, and you don't repeat an id on any one page. Long names are a bother to type, but are more descriptive. Examples:

#main { margin-left: 2em; color:white; }

#navbar { border: 2px solid red; text-align:right; }

Note that the selector *#cool (with the wildcard * that matches any element) is equivalent to the selector #cool (without the wildcard).

Remember from before that id selectors are more specific than class selectors, and if an id style and a class style specify conflicting rules, the id style dominates. Class and id selectors are both more specific than type (tag) selectors.

 

Combining Type Selectors with Class or ID

You can combine type (tag) and either class or id selectors to make more specific selectors that only affect certain elements, such as:

p.details { color:red; }

h2.revised { color:blue; }

article#review { border: 1px solid red; font-size:x-small; }

The first rule above would only affect paragraphs that have the attribute class="details" in their opening tag. The second rule would only affect level two headings that have the attribute class="revised". The third rule would only affect an article that has the attribute id="review" (note that since the id "review" can only be used once on the page, it would work just as well to use the selector #review to format the article that has that id).

 

Descendent Selectors

This very powerful kind of selector lets you affect elements based on their context, i.e. where they are located relative to other elements. Remember from before, the definitions of parent, child, descendent, and ancestor elements: A child element is one that is directly enclosed in a parent element. A grandchild or great-grandchild element is nested even deeper within the parent (which is called an ancestor of those tags). Child, grandchild, great-grandchild, etc., elements are referred to as descendent elements of that parent (ancestor). Elements that have the same parent element are called sibling elements.

When this type of selector was first developed, it was known as a "contextual selector", but that name was later changed to "descendent selector". CSS3 changed the name again to "descendent combinator"... but I still call them "descendent selectors".

Below are some example descendent selectors:

section p { color:red; }

The rule above will apply to paragraphs ONLY if they are a descendent (a child, grandchild, etc.) of a <section> element. Note that you MUST have the space between the section and p as shown (this is what indicates that p is a descendent of section). Keep in mind that the rule above applies to all descendent <p> elements of a section, and not just to child <p> elements.

section#vacation p { color:red; }

The rule above is similar to the previous one, but will apply to paragraphs ONLY if they are a descendent (a child, grandchild, etc.) of a <section> element that has the id="vacation" attribute. The paragraphs in any other <section> elements would not be affected by this rule. Also, note that since id="vacation" can only be applied once on the page, you could shorten the selector to #vacation p and get the same effect.

p.revised em { color:red; }

The rule above will apply to any emphasized text (text surrounded by <em> tags) that is a descendent (a child, grandchild, etc.) of a paragraph that has the class="revised" attribute.

section#sidebar2 p.links a { text-decoration:none; }

The rule above applies only to links (which use the <a> tag) that are a descendent of a paragraph with class="links", which must be a descendent of a section with id="sidebar2". The rule would not affect links that are descendents of section#sidebar2 but are not within a p.links paragraph.

div#main * p { color:red; }

Do you remember that I told you that the asterisk ( * ) is a wildcard that matches any element? It is! And therefore the rule above says that any <p> element that is a grandchild or lower descendent of div#main will be affected by this rule (but a <p> element that is a child of div#main would NOT be affected). So, if there are <section> or <article> or <nav> children in div#main, the paragraphs inside them would be affected by this rule.

 

Child Selectors

If you want to limit a rule to applying to child elements (and NOT to more distant descendents), you can use the > symbol like this:

body > p { color:red; }

The rule above will apply only to paragraphs that are child elements of the <body> tag (and would NOT apply directly to any paragraphs that are enclosed within <div> tags that are children of the <body> tag, for example). Note that the spaces in the above selector are optional, and it would be identical to type it as body>p

Versions of Internet Explorer prior to version 7 did not support child selectors (or some of the other selectors below).

 

Don't get confused by situations like the one shown below. There are three nested divs, and I made them different colors and added padding so you could easily see them. And then I applied this style rule to set the text color of any child div of the top div (#1) to blue:

div#topdiv > div { color: blue; }

1. This text is inside the div with id="topdiv"

2. This text is inside a div that is a child of div#topdiv

3. This text is in a div that is a grandchild of div#topdiv

 

 

But you may be wondering why the grandchild (the innermost div) also has the blue color. Doesn't the selector target only the child div (#2)? Yes...but, the innermost div (#3) inherits the blue color from its parent (#2 div) through normal inheritance...so it also shows the blue color

The example below is silimar to the one above, but it has a blue border applied to the child div (#2) of div#topdivbdr. Because the border property is NOT inherited, only the child (#2) is affected (as expected), and not the grandchild (#3).

div#topdivbdr > div { border: 1px solid blue; }

1. This text is inside the div with id="topdivbdr"

2. This text is inside a div that is a child of div#topdivbdr

3. This text is in a div that is a grandchild of div#topdivbdr

 

 

 

 

First-Child Selectors

If you want to limit a rule to applying to only the FIRST child element within a parent (and NOT to any later siblings), you can use the :first-child pseudo-class like this:

section#main > p:first-child { text-indent: 0; }

The rule above will apply only to paragraph that is the first child element of the section#main (and would NOT apply to any other paragraphs). Note that the paragraph MUST be the first child inside the <section>—if there was an <h2> line before the paragraph, then the paragraph after the <h2> would NOT be the first child of the <section> and would not get this formatting.

The reason that the > is needed above (instead of section#main p:first-child) is so that any paragraphs that are the first children of descendent divisions within section#main will not get the formatting. Because what "section#main p:first-child" says is "Any DESCENDENT of section#main that is the first child of ANYTHING within section#main will get the formatting".

 

Adjacent Sibling Selectors

Siblings are elements with the same parent element. You can use the plus sign ( + ) to build selectors that select elements in terms of their preceding siblings. For example:

p + p + p { color: red; }

...would apply to any paragraph that has two sibling paragraphs immediately preceding it (so, not just the 3rd paragraph in a row, but also the 4th, 5th, etc., because they also have two preceding sibling paragraphs). The spaces around the + sign are optional—the selector above could also be written as p+p+p with the same result.

h2 + p { text-indent: 0; }

The rule above would apply to a paragraph that immediately follows a sibling level two heading (they have to be siblings, i.e. both in the body or in the same section).

General Sibling Selectors

CSS3 has added the general sibling combinator for selecting any subsequent siblings (not necessarily the siblings that immediately follow a specified sibling). This selector is similar to the adjacent sibling selector above, but uses the tilde symbol ( ~ ) instead of the plus sign. For example:

h2 ~ p { text-indent: 0; }

The rule above would apply to any paragraph that follows a sibling level two heading (it does not need to immediately follow the <h2>, but can be located several elements later.

 

 

Attribute Selectors

You can also select elements based on their HTML attributes, either items that have a given attribute present, or items that have an attribute set to a specific value. Here are some examples:

a[accesskey] { color: red; }

The rule above would apply to any link (which use the <a> tag) that has an accesskey attribute specified in the opening tag of the element.

*[title] { color: red; }

The rule above would apply to ANY element (the * is a wildcard) that has any title attribute.

p[title="Caption"] { color: red; }

The rule above would apply to all paragraphs that have title="Caption" as an attribute and value. It would NOT match paragraphs that have title="Something else" as an attribute and value.

The two examples below are only useful in some circumstances:

p[class~="details"] { color: red; }

Note the the tilde ( ~ ) in the rule above. This means that the rule would apply to any paragraph that has details as one of possibly several class names assigned to it (recall that you can assign more than one class to an element). For instance, the rule above would apply to a paragraph with the HTML code shown below:

<p class="firstpara details">This paragraph has two class names!</p>

Note that the paragraph above would NOT be matched by a style rule with the selector p[class="details"] because that selector says the class attribute must be EXACTLY as shown ("details" and not "firstpara details"). The tilde ( ~ ) in front of the equals means the rule will apply if the value specified is one of the values of class, even if there are multiple values listed.

p[lang|="en"] { color : red; }

Note the pipe character ( | ) in the style rule above. It means that the rule will apply to any paragraph that has a lang (language" attribute that STARTS WITH "en" (where "en" is either a whole word or is a word followed by a hyphen). Therefore, the rule would match paragraphs with either lang="en-US" or lang="en-GB" (that is, it would match paragraphs where the language is specified as US English and would also match paragraphs where the language is specified as Great Britain English).

CSS3 added a few more variations for selecting elements with attributes that have various valuse, but these are not as well supported in all browsers:

p[lang^="e"] {color: red; }

The example above would apply to any paragraph that has has a lang attribute that begines with 'e', even if the 'e' is not a full word -- so it will match "es" (Spanish) or "en" (English) or "eo" (Esperanto) or "et" (Estonian), etc.

In addition to the ^= syntax above, CSS3 added $= (to specify that an attribute's value must END with a specific string or substring) and *= (to specify that an attribute's value must CONTAIN a specific string or substring). See pages 234-235 for some examples of how you might use these new features.

 

Pseudo-Class Selectors and Dynamic Links

Pseudo-classes specify elements based on characteristics other than their name, attributes or content. Pseudo-classes may be dynamic. For example, there are several pseudo classes that apply to links (the <a> tag) that can be used to control how the link looks when it is in different states, such as a link that has not been visited recently, a link that has been visited recently, a link that the user's mouse pointer is hovering over, etc. These pseudo classes can be used to make rollover effects on links. Examples:

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

a:visited { color:lime; text-decoration: none; }

a:focus { color:blue; text-decoration: underline; }

a:hover { color:blue; text-decoration: underline; }

a:active { color:orange; text-decoration: underline; }

The set of styles above would mean that all unvisited links would appear green (with no underline) on the page. Visited links would appear lime (also with no underline). A link that has focus (if you tabbed to the link to highlight it) would appear blue and underlined. Also, a link that you hover over with the mouse would appear blue and underlined. A link that you are currently clicking down on would appear orange and underlined.

It is important that you define the link style rules in the order shown, otherwise the rollover effect may not be seen. For instance, if you had the link rule last, it would override any previous visited or hover rules. You do not need to use all of the rules if you don't want to change a default behavior (if you leave off the active rule, for example, the default behavior of a text link showing up as red when clicked on would still apply).

Note that you can even use a:visited:hover if you want to make visited links look different that unvisited links when they are hovered over.

 

Many browsers will also let you apply pseudo classes to other elements besides links, for example:

p.roll:hover { color:white; background-color:black; }

...would make a paragraph with class="roll" attribute change to white text on a black background when the user's mouse pointer hovers over it. Fun!

 

Pseudo-Element Selectors

Pseudo elements include such things as first-line and first-letter. The first-line pseudo element can be used to apply a style rule to the first line in a paragraph, even though what words are in the first line will depend on many factors, such as how wide the user's browser window is and what font overrides they have in place.

p:first-line { color:red; }

The rule above makes the first line of every paragraphs show up with red text.

NOTE than in CSS3 the syntax for pseudo-elements has been changed to use TWO colons, so the example above would be written as:

p::first-line { color:red; }

...BUT not all recent browsers support the double colon (versions of Internet Explorer prior to IE9 do not recognize the double colon) . So for now you may want to stick to the older syntax of using a single colon. The purpose of CSS3 introducing the double colon is to distinguish psuedo-elements from pseudo-classes, which use a single colon.

Only the following properties can be applied to the first-line pseudo element: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.

p:first-letter { font-size: 3em; }

The rule above makes the first letter in every paragraph twice as big as normal.

Only the following properties can be applied to the first-letter pseudo element: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if 'float' is 'none'), text-transform, line-height, float, clear.

These are called psedo-elements because they are not actual elements that you have marked up in your html code.

Two other pseudo-elements are :before and :after (or ::before and ::after in the newer syntax). These can be used to append content to the beginning or ending of a selected element. For example:

p.joke:after { content: url(smiley.gif); }

p.changed:before {
     content:"Read this - ";
     background-color:yellow;
     color:red;
}

The first example above would append the simley.gif image to the end of any paragraph that has class="joke". The second example above would put the text "Read this - " (in red color on a yellow background) in front of any paragraph marked up with class="changed".

 

Grouping Selectors

If you have several style rules that have the same formatting, you can replace them with one rule that has all of the selectors separated by commas. For example:

h1, h2, h3, p.red { color: red; }

...would be the same as using:

h1 { color: red; }

h2 { color: red; }

h3 { color: red; }

p.red { color: red; }

 

Complex Selectors

You can combine the various selectors we have discussed into quite complex selectors that are very specific about what will be formatted. For example, the rule:

div#one > h2 + p + p[title]:first-line { color: red;}

...would apply only to the second paragraph following a level two heading that is the child of the division with id="one", AND it will only do so if that paragraph has a title attribute. If all this matches, then the first line of that paragraph will be red.

Be happy: You probably aren't likely to need selectors as complex as the one above.

 

 

Chapter 10: Formatting with Styles

Chapter 10 deals primarily with the kinds of style declarations (property:value pairs) that are used to format text, but many of the properties also apply to non-text items.

Font Family

You can specify the font to be used as shown in the examples below. Often you specify more than one font—if the first font in your list is unavailable on the user's computer, the browser will look for the next font in the list, etc.   Be sure to enclose multi-word font names in quotes.

body { font-family: Arial, Helvetica, sans-serif; }

h1 { font-family: "Times New Roman", Times, serif; }

In the first rule above, the font used in the body (and its descendents) will be Arial if it's available, otherwise it will be Helvetica if that's available, otherwise it will appear in a default sans-serif font. The second rule above shows how some font names need to be in quotes because they contain multiple words.

The font-family property is inherited.

 

Italics

You can apply italics to a style using font-style:italic as shown below:

p.caption { font-style: italic; }

p.caption em { font-style: normal; }

In the style rules above, the first rule makes all paragraphs with class="caption" display in italics. The second rule is used to make sure that any <em> elements (which normally appear in italics) within the p.caption paragraphs are displayed as normal (not italic) so that they are still emphasized. These two rules are demonstrated on the paragraph below:

This is a paragraph that has the caption class. It will appear in italics. But the last word in the previous sentence will not be in italics, because it has <em> applied, so rule two above applies. Note that these rules are in the internal style sheet of this page.

Note that when you request that a font be displayed in italics, the Web browser will use a special italic version of the font (if it is installed), otherwise it will fake it by slanting the characters of the regular font (this is called displaying the font as"oblique"). The font-style property value oblique tells a browser to slant the letters of a font, but generally you should use italic because it will use any special italic version of the font (if available) and default to oblique otherwise.

Note: To emphasize small sections of text on your page with italics, it is perfectly acceptable to just use the <em> tag. If you need to format larger items as italics, such as whole paragraphs or sections, it would be better to use CSS formatting.

The font-style property is inherited.

 

Bold

You can apply italics to a style using font-weight property with the values bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or normal. A value of 400 corresponds to normal weight for a font, while 700 corresponds to bold. You may not be able to see differences between the different numerical values, depending on your browser.

p.yell { font-weight: bold; }

The normal value would be used if you want to make some text NOT bold that would otherwise be bold (for a <span> of text within a heading, for example).

Note: To emphasize small sections of text on your page with bold, it is perfectly acceptable to just use the <strong> tag. If you need to format larger items as bold, such as whole paragraphs or sections, it would be better to use CSS formatting.

The font-weight property is inherited.

 

Font Size

You can change the size of text by using the font-size property with values that either specify the size in some units (such as 18px or 1.5em or 120%—remember to not put any space between the number and the unit!), or by using preset values such as xx-small, x-small, small, medium, large, x-large, and xx-large.

Specifying font sizes in terms of ems or percent will use a size relative to the normal font size of the element (which would be either its default value, the value inherited from its parent, or some default value the user has set in their browser). On most systems, the default font size of 1em displays as 16px. An element that inherits a smaller font size setting from its parent element will display that smaller size if you specify 1em for that element.

body { font-size: large; }

footer { font-size: small; }

The example above shows how you can make the default font size of your page large, and how your could make the font size of a footer division small.

You can use units such as in (inches), mm (millimeters), and pts (points), but these are only really useful when making styles that apply to printing.

The font-size property is inherited.

 

Line Height

You can change the line spacing of text by using the line-height property with values that either specify a number of line multiples (such as 1 or 1.5 or 3), or by using percentage (such as 120%), or by specifying an actual length (such as 20px or 1.5em).

p { line-height: 1.2; }

How the line-height is inherited depends on how you specified it.:

If you specified a specific spacing length, such as 24px, then all the descendents inherit that spacing.

If you specified a percentage or em value (such as 120% or 1.2em), then the spacing length for the parent is calculated (its font size times this factor), and all descendents will get that same absolute spacing length (regardless of their font size).

If you specified a line multiple (a number with no units), then the descendents inherit that number and will use it along with the font size of the descendent to calculate its line spacing.

(So if a parent has font-size:24px and line-height:1.5em, the parent and all of its descendents get the calculated line spacing of 36px. If, on the other hand, the parent has font-size:24px and line-height:1.5 (with no units), the parent would get 36px line spacing but the descendents would calculate their line spacing individually using their own font-size and the 1.5 factor.)

 

Small Caps

You can use font-variant:small-caps to format text to be displayed in small caps.

p.smcap { font-variant: small-caps; }

These two paragraphs are formatted as small caps. I don't know how useful it is, but it might be useful for headlines where it certainly would be easier to read that line in all caps:

Monster Carrot Eats Chicago!

The font-variant property is inherited.

 

Setting All the Font Properties at Once!

You can set all of the separate font properties discussed above at the same time using the combined font: property as shown below. This is a shortcut to specifying all the properties separately.

.cat { font: italic bold small-caps 1.2em/150% "Times New Roman", Times, Georgia, serif; }

...where the red item above specifies the font-size and the gray item specifies the line-height. You can leave out any of the properties you want. The first three properties can be in any order or omitted—but if you omit them it will be the same as setting them to normal. The font size value and the font family MUST be specified. The line height is optional (put in the slash only if you include it).

This paragraph uses the .cat class style rule from above. It isn't particularly pretty.

The font property is inherited.

 

Word and Letter Spacing

You can control the spacing between words with the word-spacing property, and the spacing between letters with the letter-spacing property. You specify the spacing length in pixels or ems or some other unit. Positive values spread out the spacing. Negative values tighten up the spacing. Using normal or 0 will set the spacing back to default (if an element inherits some spacing you don't want in it). Example:

.spacefun { word-spacing: 5px; letter-spacing: 1px; }

This paragraph uses the .spacefun class (with the settings shown above). Extra spacing sometimes looks good in headings. The word-spacing and letter-spacing properties are inherited (whatever amount that was calculated for the parent gets inherited by the descendents).

 

Indenting First Lines

You can cause the first lines of paragraphs to be indented with the text-indent property, specifying the indent as a length (such as 20px or 1.5em). You can remove an inherited indent by setting the text-indent to 0 (that's a zero). Example:

p.ind { text-indent: 2em; }

Here is a paragraph that has been indented using a style like the one shown above. Note that only the first line is indented. If you wanted to indent the whole paragraph, you could use a margin-left property. You can also specify an indent as a percent, but that is a percentage of the width of the parent element that contains the paragraph.

Here is a paragraph that has its text-indent: -2em to create a hanging indent. Note that only the first line is outdented. The style used for this paragraph looks just like the p.ind style above except that it has a minus sign in it.

The text-indent property is inherited. If you use ems or percentages to specify the indent, it is the calculated indent of the paragraph (in pixels) that gets inherited by any descendents.

 

Text Alignment

The align attributes of HTML are deprecated, so you should use the text-align property, specifying alignment from one of the preset values: left, center, right, or justify. The default alignment is left. Examples:

h1 { text-align: center; }

p.book { text-align: justify; }

The text-align property is inherited.

 

Text Transform — Controlling Case

You can control the case of the text in an element using the text-transform property, specifying one of the preset values: lowercase, uppercase, capitalize, or none. Example:

p.capit { text-transform: capitalize; }

This paragraph uses the style p.capit that is shown above. It's pretty lame because it capitalizes all words, and in a title you don't want to capitalize short words like a and the and and.

The text-transform property is inherited.

 

Text Decoration

The text-decoration property lets you specifying one of the preset values: underline, overline, line-through, blink, or none. Blink is not supported by most browsers (Netscape and Firefox do support it. Note that users are often annoyed by blinking text). Text decoration is mainly useful for affecting whether or not links are underlined. Example:

a { text-decoration: none; }

You can also use multiple values, as on this link (the style is below):

a.hmm:hover { text-decoration: underline overline; }

The text-decoration property is inherited.

 

White Space

The white-space property lets you specifying one of the preset values: normal, pre, or nowrap. The pre value has the same affect as the <pre> tag in HTML, except it doesn't change the font. The normal value allows text to wrap. The nowrap value disables automatic text wrapping within an element (although you can still insert <br> tag to cause a wrap). Nowrap can be useful when you want to force some content on your page to not wrap if the page is displayed in a narrow window (in cases where the wrapping may mess up your page layout). Example:

p.nowrp { white-space: nowrap; }

Here is a paragraph that uses the p.nowrp style shown above, even though it isn't particularly useful here.

The white-space property is inherited.

 

 

Color

To change the color of elements on a Web page, use the color property. This is not just the text color, since it can also affect the colors of other elements (such as the color of a border around an image if the border attribute of the <img> tag is used). Here are examples, with color specified as a name, a hex value, and rgb values in two ways:

body { color: gray; }

.sunkist { color: #FF9933; }

.spud { color:rgb(255,190,50); }

footer { color:rgb(100%,80%,10%); }

The color property is inherited.

CSS3 also allws specifying colors as hsl values, and specifying transparency as rgba and hsla values, as discussed in last week's lecture.

 

Background Color

To change the background color of elements on a Web page, use the background-color property. Here are examples (color can be specified as a name, a hex value, and rgb values or percentages, hsl, rgba, and hsla):

body { background-color: silver; }

div#doggie { background-color:#F322D8; }

.sunny { background-color:rgb(255,255,0); }

The background color of an element fills its content area AND the padding area and border around the content area of the element (we will talk in detail about the CSS box model with content, padding, border, and margins next time). So, a short line of text with a background color would have the color run all the way across to fill the content area of the paragraph:

Like this!

The background-color property NOT inherited.

 

Background Image and the Background Property

Many people know that you can specify the background image of a page, but you can also specify the background image for any element using the background-image property. Examples:

body { background-image: url(images/lake.jpg); }

p.nice { background-image: url(prettyday.gif); }

If the image is smaller than the element's size, the image will be tiled by default (the image will be repeated across and then down the page). But, CSS gives you lots of control over the background:

You can set how a background repeats using the background-repeat property with the values repeat (the default tiling), no-repeat (the image appears just once), repeat-x (the image is tiled horizontally only), and repeat-y (the image is tiled vertically only).

You can control whether the background image scrolls along with the page contents, or if it stays fixed in place as the user scrolls, by using the background-attachment property with the values scroll (the default) or fixed (the image does not move as the user scrolls).

You can control the positioning of the background image with the background-position property. You can use values left, center, or right for the x position, followed by top, center, or bottom for the y position. Or you could specify x and then y distances in either an absolute distance (such as 20px), or as a percentages of the parent container size. These x and y offsets are relative to the 0,0 point in the upper-left corner of the window. If you specify an x and y offset when an image is being repeated, this will determine the x,y position of the upper-left corner of the image, but it will repeat for the full range of the container.

All of the background properties can be specified at once using the background property. For example:

body {background: silver  url(unmlabkg.jpg)  fixed  no-repeat  center  top; }

In the style rule above, the background of the <body> is set to silver color, and the image "unmlabkg.jpg" is set at the center top (with no repeat) and is fixed in place. We can try this in the example page. You can change the order of the property values in the background property (the x positioning must come before the y positioning). You can specify transparent as a color for the background if no color is desired. Note that a color for the background is often specified even if you intend to have an image completely tile the background because the color will a) show up before the image is downloaded, and b) will be used if the image link is broken.

Here are some examples of using background images on elements besides the body. The first three are <h3> elements that are styled with classes. I have them inside this division with a white background color because they were designed to be used against a white background:

Example Text

The example above uses this style (which is in the internal style sheet of this page):

.grad2 {
   color: black ;
   font: italic 24px/150% Arial ;
   background: url(gradient2.gif) repeat-y ;
   padding: 0 0 2px 10px ;
}

The gradient2.gif is this 1 x 200 pixel image: gradient2

 

Flower Shop

The Flower Shop uses the style below:

.flower {
   color: #CC0000 ;
   font: italic 36px Arial ;
   background: url(flowers.jpg) no-repeat right 7px ;
   border: 1px solid #CC0000 ;
   padding-left: 10px ;
   height: 48px ;
   width: 280px ;
}

And the image flowers.jpg looks like: flowers

 

The two lines below use the same background image, just moved around. It is long enough so that it could be used for lines of varying lengths. The style is below.

Rocket Launches

Zia Spacemodelers Club Info

.rocket1 {
   color: black ;
   font: 24px/50px Arial ;
   background: url(rocket.jpg) no-repeat -300px ;
   padding-left: 10px ;
}

By making these heading lines with a background image, it's easy to change the text as needed (compared to if each heading was an image made in Photoshop).

 

Below is a <div> that is formatted with a spiral notebook motif:

 

My Spiral Notebook

Tom Beach

UNM-LA

.spiral {
    background: #AD0818        url(spiralEdge.jpg)  repeat-y ;
    color: white ;
    font: bold  Arial ;
    padding-left: 50px ;
{

 

 

The image used for the edge of the spiral notebook is this: spiral notebook edge

 

 

Avoiding Deprecated Properties in HTML

Now that we know a lot more about CSS, we no longer need to use the deprecated tags (such as the <font> and <center> tags) or properties (such as align="center" for paragraphs, headings, and divisions) because we can use CSS instead. Let's review some of the deprecated properties we no longer need.

Background color or background image on your Web page: No longer use any attributes in the <body> tag. Use a style rule to set the default text color, background color, or background image of the body:

body {
      color: black;
      background-color: #EDE4C7;
      background-image: url(nicebkg.jpg);
}

I used separate properties to set the background color and image above, but you could also use the combined background property to set these (and several other background settings).

We still need to learn a bit more CSS from Chapter 11 before we can do away with all the deprecated attributes for the image tag.

 

 

 

 




Assignment 7 - Due Saturday, Oct. 12

You will build one or more Web pages using the techniques we have covered from Chapters 9 and 10.

Use the HTML5 DOCTYPE. You can get full credit only if your page validates (except for the validator's experimental warning).

You must include the following:

  1. Create an external style sheet that will hold all the styles created for this assignment. You will be making many style rules that use a variety of selectors (see #2) and properties (see #3 and #4). Create Divisions, Sections, Articles, (or other sectioning elements as needed), Headings, and Paragraphs as you need for applying your style rules. Try to make rules that are not just copies of the ones in my examples.
  2. Apply formatting using the following kinds of selectors (see the other steps for the kind of formatting that you need to apply with your style rules):
    • Class selector
    • ID selector
    • Combined Type selector and Class or ID selector
    • Descendent selector
    • Child selector
    • First-Child selector
    • Adjacent Sibling selector
    • Attribute selector
    • Pseudo-element selector
  3. Make Pseudo-class selectors that format your links so that they exhibit some kind of dynamic rollover effect, including changing the text decoration. You should have at least two links on the page.
  4. Your styles should apply the following CSS properties to format various items on your page(s):
    • Font Family
    • Italics
    • Bold
    • Font size
    • Line height
    • Text Alignment
    • First Line Indent
    • Color
    • Background Color
    • Background Image on something other than the Body (although you can have one on the Body, too, if you like).

Upload the pages to your web space on ftp.unm.edu using the web tools discussed/used in class or similar tools. You may name the page whatever you like. If there are multiple pages, be sure there are links to them from the main page of your exercise.

Validate your pages using the validator at: http://validator.w3.org/

Validate your CSS using the validator at: http://jigsaw.w3.org/css-validator/

Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.

NOTE! The Subject line of this email should be "IT145 YourName Asg. 7"

You will be graded on:

How well you followed directions
You sent the correct URL in your email.
The pages validate using the validators listed above

Extra Credit:

Reading Assignment:

 

 




Midterm Project (see above for Assignment 7)

The Midterm Project is due at the start of class on October 28

The project is worth 30% of your grade in the course!

You will build a Web site using text, links, graphics, CSS formatting, external CSS files used by multiple pages, and placing the site on server (make sure all links work properly).  The pages should validate as HTML5.

You should do formatting with CSS styles instead of deprecated tags and properties.

CSS page layout is not required (the Chapter 11 material we will cover next time). If you want to include some, you can, but don't spend too much time trying to figure that out at this point, since it is not worth many points in this project—it will figure heavily in the Final Project.

Incorporate as many of the techniques we covered up to this point in the course (as of the Week 7 lecture).  The purpose of this project is to demonstrate all of the techniques we have covered that you have mastered (all the types of formatting, content, links, etc.).  A more complex project is worth more credit.  Originality is important (don’t just modify previous exercises).

The content of the site should be coherent, and it should not be filled with gibberish. You can use "Lorem ipsum" paragraphs to pad out some space if needed, but there should be some real content on the site that makes sense. All images used should be optimized. The site can be about any topic you want (a personal site, a special interest site, a site for a group, a site for a made-up company, etc.)

You must include a page in the site that lists where you have incorporated all of the techniques on your pages so I can find them.

You will hand in a copy of your midterm project folder (the root folder of your project site that contains all of the files in the project) in class, but you must also have the site uploaded to your UNM Web space.