Chapter 4- Cascading Style Sheets
Download file with answers
Not a member!
Create a FREE account here to get access and download this file with answers
Chapter 4: Cascading Style Sheets
TRUE/FALSE
- Style rules express the style characteristics for an HTML element.
- You can combine selectors and property declarations in a variety of ways.
- It is not necessary to use the <style> element in an external style sheet.
- The advantage of the external style sheet is that you can state the style rules in one document and affect all the pages on a Web site.
- You will probably use the style attribute method of styling an element the most.
- CSS allows comments within the <style> element, but not in an external style sheet.
- By default, most CSS properties inherit from parent elements to child elements.
- The difference between an id attribute and a class attribute is that an id should refer to only one occurrence within a document.
- Rules with more specific selectors take precedence over rules with less specific selectors.
- The !important keyword allows you to specify that a rule should take precedence no matter what the order in the style sheet.
MULTIPLE CHOICE
- A style rule is composed of ____ parts.
| a. | two | c. | four |
| b. | three | d. | five |
- In a style rule, the ____ determines the element to which a rule is applied.
| a. | style tag | c. | declaration |
| b. | selector | d. | style sheet |
- In a style rule, the ____ details the exact property values.
| a. | selector | c. | style tag |
| b. | style sheet | d. | declaration |
- A declaration is enclosed by ____.
| a. | () | c. | [] |
| b. | <> | d. | {} |
- In a style rule, the ____ is a quality or characteristic, such as color, font size, or margin.
| a. | value | c. | declaration |
| b. | selector | d. | property |
- In a style rule, a property is followed by a ____.
| a. | semicolon (;) | c. | comma (,) |
| b. | colon (:) | d. | question mark (?) |
- In a style rule, a value is followed by a ____.
| a. | colon (:) | c. | semicolon (;) |
| b. | question mark (?) | d. | period (.) |
- ____ is simply a text document that contains the style rules.
| a. | An internal style sheet | c. | The style attribute |
| b. | The <style> element | d. | An external style sheet |
- External style sheets have a(n) ____ extension.
| a. | .ess | c. | .cs |
| b. | .ss | d. | .css |
- The ____ element lets you establish document relationships.
| a. | <style> | c. | <relate> |
| b. | <link> | d. | <head> |
- Style rules contained in ____ affect only the document in which they reside.
| a. | an internal style sheet | c. | the <body> tag |
| b. | an inline style | d. | an external style sheet |
- CSS comments begin with ____.
| a. | /? | c. | /* |
| b. | */ | d. | ?/ |
- The elements in an HTML document are structured in a hierarchy of ____ elements.
| a. | unrelated | c. | sibling |
| b. | parent and child | d. | related |
- ____ elements contain nested elements called ____ elements.
| a. | Child, parent | c. | Sibling, child |
| b. | Parent, sibling | d. | Parent, child |
- The simplest type of selector is the ____ selector.
| a. | grouping | c. | type |
| b. | combining | d. | descendant |
- When grouping selectors, the selectors are separated by ____.
| a. | semicolons | c. | periods |
| b. | colons | d. | commas |
- When combining declarations, the declarations are separated by ____.
| a. | semicolons | c. | periods |
| b. | colons | d. | commas |
- The symbol for the universal selector is the ____.
| a. | asterisk ( * ) | c. | period ( . ) |
| b. | comma ( , ) | d. | apostrophe ( ‘ ) |
- The ____ selector lets you write rules, give them a name, and then apply that name to any elements you choose.
| a. | div | c. | core |
| b. | class | d. | span |
- In a style rule,the ____ flag character indicates that the selector is a class selector.
| a. | question mark (?) | c. | semicolon (;) |
| b. | period (.) | d. | colon (:) |
- The ____ element can be used with the class and id attributes to create logical divisions on a Web page.
| a. | <span> | c. | <class> |
| b. | <div> | d. | <paragraph> |
- The ____ element lets you specify inline elements within a document that have their own name and style properties.
| a. | <span> | c. | <class> |
| b. | <div> | d. | <paragraph> |
- Pseudo-____ select elements based on characteristics other than their element name, such as changing the color of a new or visited hyperlink text.
| a. | elements | c. | classes |
| b. | attributes | d. | ids |
- The fact that style sheets ____ means that multiple style sheets and style rules can apply to the same document.
| a. | join | c. | cascade |
| b. | stack | d. | coincide |
- The ____ states selectors let you choose an element based on its state of user interaction.
| a. | hover | c. | W3C attributes |
| b. | pointer | d. | UI element |
COMPLETION
- ____________________ let you control the display characteristics of your Web site.
ANS:
Cascading Style Sheets (CSS)
CSS (Cascading Style Sheets)
Cascading Style Sheets
CSS
PTS: 1 REF: 151
- A set of style rules is called a(n) ____________________.
ANS: style sheet
PTS: 1 REF: 152
- In a style rule, a declaration contains a(n) ____________________ and a value.
ANS: property
PTS: 1 REF: 153
- In a style rule, the ____________________ is the precise specification of the property.
ANS: value
PTS: 1 REF: 153
- Placing style sheets in a(n) ____________________ document lets you specify rules for multiple Web pages.
ANS: external
PTS: 1 REF: 155
- The ____________________ is useful for testing styles during development.
ANS: style attribute
PTS: 1 REF: 156
- You can style multiple document elements with just a few style rules if you let ____________________ work for you.
ANS: inheritance
PTS: 1 REF: 160
- The ____________________ element is a block-level element, and <span> is its inline equivalent.
ANS:
<div>
div
PTS: 1 REF: 170
- The CSS cascading mechanism determines which rules are applied to document elements by assigning a(n) ____________________ to each rule.
ANS: weight
PTS: 1 REF: 180
- CSS applies weight to a rule based on its ____________________ within a style sheet.
ANS: order
PTS: 1 REF: 181
ESSAY
- Briefly describe the concept of style sheets. What are selectors, declarations, properties and values?
ANS:
In CSS, style rules express the style characteristics for an HTML element. A set of style rules is called a style sheet. Style rules are easy to write and interpret.
A style rule is composed of two parts: a selector and a declaration. The style rule expresses the style information for an element. The selector determines the element to which the rule is applied. Selection is the key to working with CSS. The declaration, contained within curly brackets, details the exact property values.
The property is a quality or characteristic, such as color, font size, or margin, followed by a colon (:). The value is the precise specification of the property, such as blue for color, 125% for font size, or 30 px (pixels) for margin, followed by a semicolon (;). CSS contains a wide variety of properties, each with a specific list of values.
PTS: 1 REF: 152-153
- What are the three ways that you can combine CSS style rules with HTML code? Describe each method, along with an example of using the method.
ANS:
Inline style: You can define the style for a single element using the style attribute.
<h1 style=“color: blue”>Some Text</h1>
You generally use the style attribute to override a style that was set at a higher level in the document, as when you want a particular heading to be a different color from the rest of the headings on the page. The style attribute is also useful for testing styles during development. You will probably use this method of styling an element the least, because it affects only one instance of an element in a document.
Internal style sheet: Use the <style> element to created an internal style sheet in the <head> section of the document. Style rules contained in an internal style sheet only affect the document in which they reside. The following code shows a <style> element that contains a single style rule:
<head>
<title>Sample Document</title>
<style type=“text/css”>
h1 {color: red;}
</style>
</head>
In this code sample, note the type attribute to the <style> element. The value “text/css” defines the style language as Cascading Style Sheets.
External style sheet: Placing style sheets in an external document lets you specify rules for multiple Web pages. This is an easy and powerful way to use style sheets because it lets you control the styles for an entire Web site with one style sheet file. Additionally, external style sheets are stored in the user’s cache, so once downloaded, they are referenced locally for every file on your Web site, saving time for your user.
An external style sheet is simply a text document that contains style rules. External style sheets have a .css extension.
The <link> element lets you establish document relationships. It can be used only within the <head> section of a document. To link to an external style sheet, add the <link> element as shown in the following code:
<head>
<title>Sample Document</title>
<link href=“styles.css” rel=“stylesheet” type=“text/css”>
</head>
The <link> element in this code tells the browser to find the specified style sheet. The href attribute states the relative URL of the style sheet. The rel attribute specifies the relationship between the linked and current documents. The browser displays the Web page based on the CSS display information.
The advantage of the external style sheet is that you can state the style rules in one document and affect all the pages on a Web site. When you want to update a style, you only have to change the style rule once in the external style sheet.
PTS: 1 REF: 153-156
- What are the four basic selection techniques? Briefly describe each technique.
ANS:
Using Type Selectors: A type selector is used to apply a rule to every instance of the element in the document. This is the simplest kind of selector, and many style sheets are composed primarily of type selector style rules.
For instance in the following code:
h1 {color: red;}
Grouping Selectors: To make your style rules more concise, you can group selectors to which the same rules apply. For example, the following style rules set the same declaration for two different elements—they set the color of <h1> and <h2> elements to red:
h1 {color: red;}
h2 {color: red;}
These two style rules can be expressed in a simpler way by separating the selectors with commas:
h1, h2 {color: red;}
Combining Declarations: In many instances you want to state multiple property declarations for the same selector. The following style rules set the <p> element to 12-point blue text:
p {color: blue;}
p {font-size: 125%;}
These two style rules can be expressed in a simpler fashion by combining the declarations
in one rule. The declarations are separated by semicolons:
p {color: blue; font-size: 125%;}
Using Descendant Selectors: A descendant selector (sometimes known as a contextual selector) is based on the hierarchical structure of the elements in the document tree. This selector lets you select elements that are the descendants of other elements. For example, the following rule selects only <em> elements that are contained within <p> elements. All other <em> elements in the document are not affected.
p em {color: blue;}
Notice that the selector contains multiple elements, separated only by white space. You can use more than two elements if you prefer to choose more specific selection characteristics. For example, the following rule selects <em> elements within <li> elements within <ul> elements only:
ul li em {color: blue;}
PTS: 1 REF: 161-163
- Explain pseudo-elements.
ANS:
Pseudo-elements let you change other aspects of a document that are not classified by elements, such as applying style rules to the first letter or first line of a paragraph. For example, you might want to create a drop initial or drop capital that extends below the line of type, or make the first line of a paragraph all uppercase text. These are common publishing design techniques that are not possible with standard HTML code. With CSS you can use the :first-letter and :first-line pseudo-elements to add these two style characteristics to your documents.
PTS: 1 REF: 173
- Define “cascade” as it relates to CSS and explain the CSS cascading mechanism.
ANS:
One of the fundamental features of CSS is that style sheets cascade. This means that multiple style sheets and style rules can apply to the same document. HTML authors can attach a preferred style sheet, while the reader might have a personal style sheet to adjust for preferences such as human or technological handicaps. However, only one rule can apply to an element. The CSS cascading mechanism determines which rules are applied to document elements by assigning a weight to each rule based on the following three variables:
Specificity of the selector
Order of the rule in the style sheet
Use of the !important keyword
PTS: 1 REF: 180
Leave a reply