Configuring Color and Text with CSS - Chapter 3

Which of the following can be a CSS selector? a.an HTML element name b. a class name c. an id name d. all of the above

d. all of the above

CSS Style Rule Selector

The selector can be an HTML element name, a class name, or an id name.

Which of the following uses CSS to configure a class called news with red text, large font, and Arial or sans-serif font? a. news { color:red; font-size: large; font-family: Arial, sans-serif;} b. .news {color:red; font-sized: large; font-family: Arial, sans-serif;} c. .news {text: red; font-size: large; font-family: Arial, sans-serif;} d. #news {text: red; font-size: large; font-family: Arial, sans-serif; }

b. .news {color:red; font-sized: large; font-family: Arial, sans-serif;}

Which of the following is the CSS property used to set the background color of a web page? a. bgcolor b. background-color c. color d. none of the above

b. background-color

Which of the following is the declaration property used to set the font typeface for an area of a web page? a. face b. font-family c. font-face d. size

b. font-family

Which of the following associates a web page with an external style sheet? a. <style rel="external" href="style.css"> b. <style src="style.css" c. <link rel="stylesheet" href="style.css"> d. <link rel="stylesheet" src="style.css">

c. <link rel="stylesheet" href="style.css">

White-Space Property

specifies the way that whitespace (such as a space character, or line feed within code) is displayed by the browser. Commonly used values for white-space are normal (default), nowrap (text will not wrap to the next line), and pre (preserves all whitespace in the browser display)

Hexadecimal color values

specify RGB color with numeric value pairs raining from 00 to FF (0 to 255 in base 10).

The _______ CSS property can be used to center text within a block display element

text-align

The _______ CSS property can be used to indent the first line of text

text-indent

text-decoration

the purpose of the CSS text-decoration property is to modify the display of text. Commonly used values for the text decoration property include none, underline, overlain, and line through

font-style property

typically is used to configure text displayed in italics. Valid values for font-style are normal (the default), italic, and oblique

descendant selector

used when you want to specify an element within the context of its container (parent) element. Using descendant selectors can help you reduce the number of different classes and ids but still allows you to configure CSS for specific areas on the web page

Class selector

when you need to apply a CSS declaration to certain elements on a web page and not necessarily tie the style to a particular HTML element

Which of the following configures a background color or #00CED1 for a web page using CSS? a. body {background-color: #00CED1;} b. document {background: #00CED1;} c. body {bicolor: #00CED1;} d. document { bgcolor: #00CED1;}

a. body {background-color: #00CED1;}

Which of the following describe two components of CSS rules? a. selectors and declarations b. properties and declarations c. selectors and attributes d. none of the above

a. selectors and declarations b. properties and declarations

Text-shadow property

adds depth and dimension to text displayed on web pages. Configure a text shadow by coding values for the shadow's horizontal offset, vertical offset, blur radius (optional), and color page 97

External Styles

are coded in a separate text file. This text file is associated with the web page by configuring a link element in the head section.

Inline Styles

are coded in the body of the web page as an attribute of HTML tag. The style applies only to the specific element that contains it as an attribute.

Embedded Styles (internal styles)

are defended within a style element in the head section of a web page. These style instructions apply to the entire web page document.

link element

associates an external style sheet with a web page. It is placed in the head section of the page. The link element is a stand-alone, void tag. When coding in HTML5, two attributes are used with the link element: related and href the value of the rel attribute is "stylesheet" the value of the href attribute is the name of the style sheet file

CSS was first proposed as a standard by the W3C in ____________

1996

Write the code to configure a web page to associate with an external style sheet called mistypes.css.

<link rel="stylesheet" href="mystyles.css">

Imported Styles

Are similar to external styles in that they can connect styles coded in a separate text file with a web page document. An external style sheet can be imported into embedded styles or into another external style sheet by using the @ import directive.

When designing a page that uses colors other than the default colors for text and background, explain why it is a good reason to configure both the text color and the background color

Because visitors may set their browsers to certain colors, it is a good idea when changing a text or background color to configure both the text color and the background color properties to provide good contrast between text and background.

Describe one advantage to using embedded styles instead of inline styles

Embedded styles are coded once in the header section of the web page and apply to the entire page. This practice is more efficient than using inline styles to code individual styles on HTML elements

Style Element

Embedded styles are placed within a style element located in the head section of a web page. the opening <style> tag and the closing </style> tag contain the list of embedded style rules.

Describe a reason to use embedded styles. Explain where embedded styles are placed on a web page.

Embedded styles can be used to configure the text and color formatting for an entire web page. Embedded styles are placed in the head section of a web page. The <style> tag is used to contain the CSS selectors and properties that configure the embedded styles

Describe a reason to use external styles. Explain where external styles are placed and how web pages indicate that they are using external styles

External styles can be used to configure the text and color formatting for some or all of the pages on a website in one file. This single file can be changed, and all the web pages associated with it will display the new styles the next time they are rendered in a browser. External styles are placed in a separate text file that uses a .css file extension. Web pages use the <link> tag to indicate that they are suing an external style sheet

RGB Color

Monitors display color as a combination of different intensities of red, green, and blue, a concept known as RGB Color. RGB intensity values are numerical from 0-255. Usually Hexadecimal color values are used to specify RGB color on web pages.

List three reasons to use CSS on a web page

Reasons to use CSS on a web page include the following: greater control of typography and page layout, separation of style from structure, potentially smaller web page documents, and easier site maintenance.

CSS Style Rule Declaration

The declaration indicates the CSS property you are setting (such as color) and the value you are assigning to the property.

class attribute

The styles set in the new class can be applied to any element you wish. You do this by using the class attribute, such as class="feature".

Style attribute

The value of the style attribute is set to the style rule declaration that you need to configure.

ID selector

Used to identify and apply a CSS rule uniquely to a single area on a web page. Unlike a class selector which can be applied multiple times on a web page, an id may only be applied once per web page.

Cascading Style Sheets (CSS)

Web designers use CSS to separate the presentation style of a web page from the information on the webpage. CSS is used to configure text, color, and page layout. There was CSS2, and now CSS3. CSS is a flexible, cross-platform, standards-based language developed by the W3C

Which of the following is true if a web page contains both a link to an external style sheet and embedded styles? a. embedded styles will be applied first, and then then external styles will be applied b. the inline styles will be used c. external styles will be applied first, and then the embedded styles will be applied d. the web page will not display

c. external styles will be applied first, and then the embedded styles will be applied

Which of the following do you configure to apply a style to only one are on a web page? a. group b. class c. id d. none of the above

c. id

Which type of CSS is coded in the body of the web page as an attribute of an HTML tag? a. embedded b. external c. inline d. imported

c. inline

font-family property

configures font typeface.

text-align property

configures the alignment of text and inline elements within block display elements, such as headings, paragraphs, and divs. The values for the text-align property are left (default), right, and center.

font-weight property

configures the boldness of the text

Text- transform Property

configures the capitalization of text. Valid values for text- transformation are non(default), capitalize, uppercase, or lowercase.

text-indent property

configures the indentation of the first line of text within an element. The value can be numeric (such as px, pt, or em unit) or a percentage.

Letter-Spacing property

configures the space between text characters. Valid values for letter-spacing are normal (default) and numeric pixal or em unit.

Word-Spacing Property

configures the space between words. Valid values for word-spacing are normal (default) and a numeric pixel or em unit

The ________ element is useful for creating areas on a web page that are embedded within paragraphs or other block display elements

span

Where do you place the code to associate a web page with an external style sheet? a. in the external style sheet b. in the DOCTYPE of the web page document. c. in the body section of the web page document d. in the head section of the web page document

d. in the head section of the web page document

span element

defense a section on a web page that is not physically separated from other areas; this formatting is referred to as inline display. Use <span> tag if you need to format an area that is contained within another, such as within <p>, <blockquote>, <li>, or <div> tag

How many methods are there to incorporate CSS technology?

inline, embedded, external, and imported

em unit

is a relative font unit that has its roots in the print industry, dating back to the day when printers set type manually with blocks of characters.

margin

is the empty space surrounding an element.

line-height property

modifies the default height of a line of text and is often configured with a percentage value. For example, code line-height: 200%; to configure text to appear double spaced

font-size property

sets the size of the font