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