Ch.3 Designing a Web Page with CSS

Specify the code to enter the comment Sunny Acres Color Styles in a style sheet.

/ Sunny Acres Color Styles /

Describe the item selected by the following selector: #top > p:first-of-type:first-line

The item selected will be the first line of the first paragraph that is a direct child of the element with the id top.

Describe the items selected by the following selector: div.links img[usemap]

The items selected will be inline images containing the usemap attribute, and which are descendant elements of the div element belonging to the links class.

What is progressive enhancement?

a coding technique in which older styles are listed first and newer styles are listed afterwards so that a browser can adopt the most up-to-date style it is capable of supporting.

Provide a style rule to display the text of all previously visited hypertext links in gray

a:visited { color: gray; }

The color chartreuse is located at 90° on the color wheel with 100% saturation and 50% lightness. Provide a style rule to display address text with chartreuse as the background color.

address { background-color: hsl(90, 100%, 50%); }

Provide a style rule to display all unordered lists using the star.png image file, placed inside of the containing box.

ul { list-style-image: url(star.png); list-style-position: inside; }

Based on the following style rule for paragraph text, which style property will be used by an older browser that supports only CSS2? p { color: rgb(232, 121, 50); color: hsla(23, 80%, 55%, 0.75); }

color: rgb(232, 121, 50);

Provide a style rule to display h1 and h2 headings with a background color of yellow (an equal mixture of red and green at highest intensity with no blue) at 70% opacity.

h1, h2 { background-color: rgba (255, 255, 0, 0.7); }

Provide a style rule to center all h1 through h6 headings, and to display the text with normal weight.

h1, h2, h3, h4, h5, h6 { text-align: center; font-weight: normal; }

Provide a style rule to remove underlining from the hypertext links for all elements marked with the <a> tag and nested within a navigation list.

nav a { text-decoration: none; }

By default, most browsers indent lists from the surrounding text. Provide a style rule to remove the indentation from every unordered list nested within a section element.

section ul { padding-left: 0px; }

What are inline styles

styles applied directly to an element through the use of the style attribute in the element's tag.

What are embedded styles

styles placed in the head section of a document and apply to elements within that document

The initial h1 heading in a document has the id top. Provide a style rule to display the text of this h1 heading in Arial, Helvetica, or a sans-serif font.

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

Provide a style rule to display the text of all address elements nested within a footer element in red.

footer address { color: red; }

Provide a style rule to double space the text of all paragraphs in the document.

p { line-height: 2em; }

Provide a style rule to insert the text string "*** " before every paragraph belonging to the review class.

p.review:before { content: "*** "; }

What keyword do you add to a style property to override style precedence and style inheritance?

! Important Ex: h1 {color: orange !important} h1 {color: blue; text-align: center} Color of font would still be orange but now centered. Multiple designers working on page - helps set limits

Provide the @font-face rule to create a Web font named Cantarell based on the font file cantarell.ttf. Which browsers will be able to work with this font file?

@font-face { font-family: Cantarell; src: url(cantarell.ttf) format('truetype'); } This font can be used by Chrome, Firefox, Opera, and Safari.

What is the difference between an absolute unit and a relative unit?

An absolute unit is fixed in size regardless of the device rendering the Web page. Relative units are expressed relative to the sizes of other objects on the Web page.

If you want to use Web fonts with Internet Explorer, what font file format should you use?

Embedded OpenType (EOT)

Provide the style rule to display blockquote text in red using an RGB triplet.

blockquote { color: rgb(255, 0, 0); }

Provide a style rule to display all blockquote elements belonging to the reviews class in italic and indented 3em.

blockquote.reviews { font-style: italic; text-indent: 3em; }

What are external style sheets

files separate from the document and can be applied to any document on a Web site. External style sheets are best for setting the styles of an entire Web site.

Provide a style rule to display all ordered lists with lowercase letters as the marker.

ol { list-style-type: lower-alpha; }