Section 1
Preview this deck
Provide the style rule to display block quote text in red using an RGB triplet.
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
1
All-time users
1
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (87)
Section 1
(50 cards)
Provide the style rule to display block quote text in red using an RGB triplet.
blockquote {color: rgb(255, 0, 0);}
Provide a style rule to change the width property for the header element so that it measures the total width of the header content, padding, and border spaces. Include web extensions for older browsers.
header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Provide a style rule to set the width of the page body to 90% of the browser window ranging from 320 pixels up to 960 pixels.
body { min-width: 320px; max-width: 960px; width: 90%; }
Provide a style rule to horizontally center the header element within the body element. Assume that the header is a direct child of the page body.
body > header { margin-left: auto; margin-right: auto; }
Describe the items selected by the following selector: div.Links img[usemap]
All img elements containing the usemap attribute within the div element belonging to the Links class.
What keyword do you add to a style property to override style precedence and style inheritance?
!important
Provide a style rule to set the height of a navigation list with the id nav1 to 300 pixels but to be displayed with a scrollbar if there are too many entries to fit within the navigation list's boundaries.
nav#nav1 { height: 300px; overflow: auto; }
Provide a style rule to place the div element with the id graph1 50 pixels to the right and 15 pixels down from the top-left corner of its container element.
div#graph1 { position: absolute; top: 15px; left: 50px; }
Provide a style rule to display all unordered lists using the star.png image file, placed inside the virtual box.
ul { list-style-image: url(star.png); list-style-position: inside; }
Provide a style rule to display the footer element only after all floated elements have cleared.
footer { clear: both; }
The initial h1 heading in a document has the ID top. Provide a style rule to display the text of this h1 heading in Century Gothic, Helvetica, or a sans-serif font.
h1#top { font-family: Century Gothic, Helvetica, sans-serif; }
What must be true about a container element to have objects positioned absolutely within it?
It must have a position property of relative or absolute.
Create a style that adds a 2 pixel green dotted outline around all block quotes in the document.
blockquote { outline: 2px dotted green; }
What is the difference between relative positioning and absolute positioning?
Relative positioning shifts an object from its default placement in the document flow but it remains part of the document flow. Absolute positioning places the object at specified page coordinates and takes it out of the document flow.
Provide the style rule to set the padding around every h1 heading in a section element to 1em on top, 0.5em on the left and right, and 2em on the bottom.
section h1 { padding: 1em 0.5em 2em; }
Provide a style rule to display all unordered lists with lowercase letters as the list marker.
ul {list-style-type: loweralpha;}
Provide a style rule to remove underlining from the hypertext links marked with the <a> tag and nested within a navigation list.
nav a { text-decoration: none; }
Provide the code to enter the style comment "Tri and Succeed Sports Color Styles".
/ Tri and Succeed Sports Color Styles / _______________________________________________________ ____________________________________(you can't see it correctly so go here: https://www.adcconsultants.net/html2/Session2_5quickcheck.html) Answer 3
For the following style rules, what is the font size of the h1 heading in pixels? body {font-size: 16px;} body > article {font-size: 0.75em;} body > article > h1 {font-size: 1.5em;}
24px (found it out on my own)
Your layout has four floated elements in a row but unfortunately the last element has wrapped to a new line. What is the source of the layout mistake?
The widths of the floated elements exceed the available width of their container.
What is the difference between a fixed grid and a fluid grid?
In a fixed grid, the grid dimensions use absolute units such as pixels, while with a fluid grid, the dimensions are based on percentages and will change in response to changes in the screen size.
Provide a style rule to shift the aside element 5% to the right and 10% down from its default position in the document flow?
aside { position: relative; top: 10%; left: 5%; }
In a proposed grid, the columns all have the class names "span-integer" where integer indicates the size of the column. Create a style rule to float every grid column on the left margin.
div[class^='span-'] { float: left;}
Provide the style rule to change the left margin of the figure element to 20 pixels.
figure {margin-left: 20px;}
Provide a selector to match all address elements that are direct children of the footer element.
footer > address { }
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);
In a proposed grid, all of the grid rows have the class name container. Create a style rule to expand those grid rows around their floating columns.
div.container { content: ""; display: table; clear: both;}
What is lorem ipsum?
Placeholder text used in page design prior to having readily-available text content.
An inline image with the id logo_img is 400 pixels wide by 300 pixels high. Provide a style rule to clip this image by 10 pixels on each edge.
img#log_img { clip: rect(10, 390, 290, 10);
Provide a style rule to display the text of all previously visited hypertext links in gray.
a:visited {color: gray;}
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);}
Create a style rule to set the width of columns belonging to the span-4 class to 25% of the row width.
div.span-4 { width: 25%;}
Provide a style rule to set the size of body text to 2% of the viewport width.
body { font-size: 2vw; }
Taken from another website that was crappy. You're Welcome! created 9-12-18
(Fuq this Online Sh!t) Please post the MINDTAP - Case Problems if you can.
What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire web site?
Inline styles are styles applied directly to specific element using the style attribute. Embedded styles are added to a specific HTML file using the style element in the document head. External style sheets are files containing CSS style rules that are linked to an HTML file or files. To provide designs for an entire website, use external style sheet files.
Provide a style rule to set the width of the aside element to 240 pixels and to float on the right margin of its container.
aside { width: 240px; float: right; }
Provide the @font-face rule to create a web font named Cantarell based on the font files cantarell.woff and cantarell.ttf.
@font-face { font-family: Cantarell; src: url(cantarell.woff) format('woff'), url(cantarell.ttf) format('ttf'); }
What is a CSS framework?
A CSS framework is a software package that provides a library of tools to design your website, including style sheets for grid layouts and built-in scripts, in order to provide support for a variety of browsers and devices.
Provide the style property to set the opening quotation mark and closing quotation marks to curly quotes with Unicode values of 2018 and 2019 respectively.
quotes: "\2018" "\2019"
Create a style rule for the grid rows described in question 3 above so that their sizes are measured using the Border Box model.
div.container, div[class^='span-'] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Using the proposed specifications for CSS-based grids, create a grid for the body element that has three rows with heights automatically defined by the page content and five columns with widths of 25%, 2.5%, 50%, 2.5%, and 20%. Place the nav element in the first column, the article element in the third column, and the aside element in the fifth column.
body { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 25% 2.5% 50% 2.5% 20%; } nav { grid-column: 1; } article { grid-column: 3; } aside { grid-column: 5; }
Provide a style rule to prevent the header element from collapsing around its floating content.
header { clear: both; content: ""; display: table; }
Provide a style rule to horizontally center all h1 through h6 headings and to display their text with normal weight.
h1, h2, h3, h4, h5, h6 { text-align: center; font-weight: normal; }
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; }
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 in black with chartreuse as the background color.
address {background-color: hsl(90, 100%, 50%);}
Briefly describe the three types of page layouts.
A fixed layout is one in which the size of the page and the size of the page elements are fixed, usually using pixels as the unit of measure. A fluid layout sets the width of page elements based on a percent of the available width. An elastic layout is one in which all measurements are expressed in em units and are based on the default font size used in the page.
Describe the item selected by the following selector: #top > p:first-of-type:first-line
The first line of the first paragraph within the element with the id "top"
Provide the style rule to display all hypertext links within a navigation list as block elements with a gray background.
Nav a { display: block; background-color: gray; }
Provide a style rule to insert the text string "*" before every paragraph belonging to the Review class.
p.Review::before { content:
What is progressive enhancement?
A CSS technique in which styles that conform to older standards are entered first with newer standards placed last. HTML 104
Section 2
(37 cards)