COMP 126 FINAL
If two CSS declarations conflict, which declarations override the other declarations/ have the highest priority?
!important declarations in the user's style sheet
Which of the follow selectors is most specific? (.nav, #nav, a, div)
#nav (IDs are the most specific)
Of the following measurement options (px, in, don't specify, %), which is the best choice if you want to create a fluid layout?
%
The following code: padding .5em 0 .25em; applies padding to an element:
.5em top, 0 left and right, and .25em bottom
Which of the following code snippets will center a flex item in the center of its container?
.container { align-items: center; justify-content: center; }
Which of these is a CSS comment
/* comment */
Suppose that the fixed width of an aside element in a fixed layout is 300 pixels, and the fixed width of its parent element (body) is 900 pixels. If you convert the page from fixed to fluid layout, the width of the aside should be set to
33.33%
How many levels of heading does HTML include by default?
6
The portion of a web page that must contain all the content to be displayed on the page should be coded as an HTML5
<body> element
What is the correct HTML element for inserting a line break?
<br>
Which of the following is the best choice to tag the header area in HTML, that is, the very top of a website where users can typically find the name and logo of that site, among other things?
<header></header>
Which of the following is an inline element by default?
<span></span>
Which of the following is not a guideline for usability?
All navigation bars should provide a link to the Home page
Which of the following is NOT a guideline for website typography?
Always use serif fonts
Why don't parent elements recognize their floated child elements?
Because floated elements are outside the normal document flow
CSS stands for
Cascading Style Sheet
Which of the following techniques can you NOT use to create a two-column layout
Code columns in any order in the HTML and then float both to the left
Which of the following is NOT a principle for graphics design?
Design elements shouldn't be continued from page to page
Which of the following is NOT a good way to show the users where they are in a website?
Include a text block in the heading that describes the contents of the page
What happens to a block element that directly follows a floated element?
It behaves as though the floated element were not there?
What happens to inline content that follows a floated element?
It flows around the floated element
When you set position: absolute; on an element, what is that element positioned in relation to?
Its parent element
Which of the following can you not do with flexbox properties and values alone?
Make a row of elements collapse together into a hamburger menu when viewed on a small mobile browser
Which of the following must also happen in order to absolutely position an element?
The element's parent element must also be given a position value.
What will happen if the CSS that follows is applied to an h1 element? h1 { animation: animateheading 2s ease-in-out 2; } @keyframes animateheading { from { font-size: 120%; } to { font-size: 200% } }
The font size of the heading will increase to 200% over 2 seconds, change back to 120%, and then repeat
How do element behave in what we call the "normal (or natural) flow of the document"?
They flow left to right and top to bottom
What do CSS selectors allow you to do?
To select and apply style to HTML elements
To make the best use of space on each web page, you should do all BUT one of the following. Which one is it?
Use striking images to generate attention
In this class, we will test the responsiveness of our web sites by
Using the developer tools of a modern browser
HTML and CSS are a collection of
Web Standards
When will the styles for the media query that follows be applied? @media only screen and (min-width: 768px) and (max-width: 959px) {}
When the width of the screen is greater than the 768 pixels and less than 959 pixels.
When you set position: relative; on an element, what is the element being positioned relative to?
Wherever the element would end up in the normal flow of the document
Two or more grid cells that form a rectangle can be combined into
a grid area
By default, an ordered list is displayed as
a numbered list
Which of the following can you use in a @keyframes selector to indicate property values for specific positions in an animation?
a percentage from 0 to 100
The fr unit represents
a proportion of the space available to a column or row
A vertical navigation menu is best coded as
a series of <a> elements within the li elements of an unordered list
To slowly rotate an image when the user hovers the mouse pointer over it, you can use
a transform and a transition
To gradually change one or more properties of an element, you can use
a transition
To create a drop-down menu from an item in a horizontal navigation bar, you nest
a ul element within an li element of the ul element for the navigation bar
If I want the fill color of an <a> element to change to red when the user's cursor is positioned over it, which of the following rules could I use?
a:hover {background: red;}
To position a dropdown menu directly below an item in a navigation bar, you apply
absolute positioning to the ul element for the drop-down list
You have a row of flex items that you set to run horizontally across the center line of a flex container. What CSS property can you use to place one of the items on the top of the container instead?
align-self
What kinds of elements can be floated?
all block elements and select inline elements
You use the justify-content property to align the flex items in a container
along the main axis
In order to apply absolute positioning to an element you must also
apply an explicit position value to its next nearest container element
When you define grid areas for a grid with grid gaps, the gaps
are added between the grid areas
What type of HTML element will always by default appear on a new line in the browser?
block elements
If the following CSS appears in a stylesheet, what color will the associated <h1> appear? h1, h2, h3 {color: red; font-size: 36px;} h3 {font-size: 24px;} h1 {color: blue;}
blue
Which of the following do you NOT have to do to create a scalable image whose width is limited to its native size? a. remove the image's height and width properties from the HTML b. set the image's width property to 100% c. set the image's height property to auto d. set the image's max-width property to the width of the image in pixels
c. set the image's height property to auto
Which of the following is required for a floated element? a. it must be a block-level element b. it must be an image c. you must set its width if its not implied d. you must set its position value
c. you must set its width if its not implied
What line of code can stop elements following a floated element from flowing around or ignoring it?
clear: left;
You've floated two elements to the left to position them as consecutive columns on a page. Now you want to create a full-viewport-width footer element that is positioned below the two columns without interfering with them. Which of the following property value pairs can you use to ensure the footer element does this?
clear:left;
Which of the following can you not do with a filter?
convert an image to black and white (you can grayscale, but not the same)
The first steps in the design of any website should be to
define the target audience and goals of the website
Which CSS property do you use to display a block element as a flex container?
display
When you set the position property for a block element to fixed, the element
doesn't move in the browser window even when you scroll
What is the term we use to describe any item on a web page that can be distinguished via HTML tags?
element
What position value do you set on an element to position relative to the four sides of the viewport?
fixed
A flex container can contain one or more
flex items
Which CSS property do you use to determine whether flex items should be displayed horizontally or vertically?
flex-direction
To layout a web page so that it adjusts to the width of the screen, you use
fluid layout
Unless you specify otherwise, grid items are laid out within a grid container
from left to right and top to bottom
One way to create a menu that drops down from an item in a navigation bar when the user hovers over it is to use CSS to change the display property for the menu
from none to block
When you use numbered lines to layout the elements in a grid container, you use the
grid area for each element in the container
The lines on each side of a grid column or row are called
grid line numbers
By default, items in a flex container are displayed
horizontally from left to right
You can align the row tracks within a container vertically
if the row tracks are less than the height of the container
In the box model for an element, the border
is between the padding and the margin
Unlike traditional writing, "chunking" is better for web writing because
it lets the users select the content they're interested in
What happens to an absolutely positioned element when user scrolls the webpage?
it scrolls along with its parent element
When you set the border for a block element, you can set
its color, style, and width
When you design a website, you should
keep the mobile design in mind even if you design for desktop first
To get a layout to stack vertically instead of horizontally when viewed on a phone, you can use
media queries
This CSS causes a heading to be h1 { animation: move 3s ease-in-out 2s; } @keyframes move { from { margin-left: 20%; color: blue; } to { margin-left: 60%; color: red; } }
moved to the right over 3 seconds after a delay of 2 seconds
You use the grid-row and grid-column properties to define grid areas when you use
named or numbered lines
Which of the following selectors indicate a CSS rule that should apply to all instances of the <p> element that are located inside a <nav> element on a webpage?
nav p {}
What property and value can you apply to a parent element to force it to recognize floated child elements?
overflow: auto;
Which CSS property should you alter to create more space between the contents of an element and the border of the same element?
padding
What can be used to create a navbar that stays in place on the page even when the user scrolls?
position: fixed;
If you don't explicitly set a value for the position property of an element, what value will it have?
position: static;
Which of the following methods would you use to transform an element so it appears wider than its original size?
scaleX
A CSS formatting rule consists of what two parts
selector and declaration
One way to create a horizontal navigation menu from an unordered list is to
set the float property to each li element to left
When you develop responsive web pages, you use a meta element in the HTML to
set the width of the viewport to the device width
Which position value leaves an element in the normal/natural flow of the document?
static
HTML is used to define the
structure and content of a webpage
When you set the position property for a block element to absolute, the browser
takes the element out of the flow of the elements on the web page
To remove the underlining from an <a> element, you can use CSS to set its
text-decoration property to none
A CSS grid container consists of grid items
that consist of one or more grid cells
The <title> element in the <head> section of an HTML document specifies the text
that's displayed in the browser's tab for the page
What is the main axis in terms of flexbox properties?
the axis running in whatever flex direction you set
you can use the CSS list-style-type property to change
the bullet or number style in an unordered list
Which of the following can you NOT specify within a CSS transition rule?
the condition that will cause the transition to occur
Where does the link created by this code go? <a href="8reasons.html#reason6"> Complete, real-world applications</a>
the element with reason6 as its id on the page named 8reasons.html
When you apply a position value, what should you generally also provide to position the element where you want it?
the element's offset values
When you use ems or percentages to size fonts
the font size changes as the size of the font used by its parent element changes
When you use viewport height (vh) to size fonts
the font size changes as the size of the viewport changes
What will happen if the CSS that follows is applied to an image with an ID of #image1? #image1 { transition: 2s; } #image1:hover { transform: rotateX(360deg); }
the image will rotate horizontally around its center and end up where it began
Which of the following is not a website convention
the maximum number of characters in a text line should be around 90
The href attribute for an <a> element specifies
the page and/or placeholder that the link should go to
The term website conventions refers to
the presentation and operation features that most websites share
To use floats to create a three-column page layout consisting of an aside, a main element, and another aside, you need to set
the width of the body element and one or more of the contained elements to percentages
When you use the float property to create columns for a page layout, you must also set
the width of the floated elements
What do HTML elements use tags for
to structure content
Psuedo-class selectors let you apply formatting
to the element in specific states or conditions
A scalable image is scaled
to the width of the element that contains it
Which of the following methods would you use to transform an element so it appears lower than its original position?
translateY
How can you easily view the code behind a website that you find online?
use the developer's tools in your browser
When you use fixed positioning for a block element, you can
use the top, bottom, left, and right properties to set its position on the page
The div element should only be used
when the existing HTML5 structural-semantic elements don't apply
Flexbox allows you to lay out elements side by side...
without using floats
When you use template names for page layout
you first define the template areas and then assign templates to those areas
When elements overlap on a web page, what property can you use to indicate which elements should appear in front of and/or behind the others?
z-index