More CSS Flashcards
Name the four common elements of a webpage layout
Header
Navigational links
Various sections
Footer
Blank at the top that identifies the website
Header
Blank at the top or left side that present the main links for navigating the website
Navigational Links
Blank that include related content
Various sections
Blank at the bottom that contains contact information, copyright, author name, etc.
Footer
Some web pages use a blank, which uses a fixed-width container to envelop the web page contents. Ex: The figure below shows a web page at the top using a fixed layout where the entire contents fit inside 960px. Resizing the browser does not change the width of the web page contents.
fixed layout
A web page that uses a blank allows the page contents to fill the browser, sometimes by using percentages for widths. Ex: The figure below shows a web page at the bottom using a fluid layout where the contents always fit the browser’s width. Fluid layouts make better use of the available space than fixed layouts and do not produce a horizontal scroll bar when the browser is resized.
fluid layout
The blank is a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.
Flexible Box or flexbox
Many developers find the flexbox layout easier to use than blank elements when creating fluid layouts.
floating
A blank is an element that has the CSS property display set to flex to create a block-level flex container or inline-flex to create an inline flex container. Ex: <div style="display: flex">.
flex container
Flex containers hold blank
flex items
A flex item is a blank of a flex container that is positioned and sized according to various CSS flexbox properties.
child element
The blank property defines the direction of flex items within the container using values:
flex-direction
Name the flex-direction values
row (default)
row-reverse
column
column-reverse
The blank property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items.
gap
The blank property justifies the flex items within the container using values:
justify-content
Name the justify-content values
flex-start (default)
flex-end
center
space-between
space-around
The blank property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items
flex-wrap
Name the flex-wrap values
nowrap (default)
wrap
wrap-reverse
A flex item’s width is determined by the combination of what three CSS properties
The flex-basis property
The flex-grow property
The flex-shrink property
Blank sets the initial length of a flex item. The values can be auto (the default), a percentage, or a length unit. The default value auto makes the flex item the same initial length as the content.
flex-basis property
Blank sets a proportion that determines how much of the available container space should be assigned to the item. The default is 0, meaning the size should be based on the item’s content.
Flex grow property
Blank sets a proportion that determines the item’s minimum size. The default is 1, meaning the size should shrink at the same rate as other items when the container width shrinks. A value of 0 means the item should not change sizes when the container width shrinks.
Flex shrink property
The shorthand property blank specifies flex-grow, flex-shrink, and flex-basis together. Ex: flex: 0 1 auto; is the same as flex-grow: 0; flex-shrink: 1; flex-basis: auto;.
flex
Blank is a CSS layout mode that divides a web page into a rectangular grid in which to position page elements.
Grid layout
Grid layout is ideal for designing blank web page layouts.
two-dimensional
A blank is an element that has the CSS property display set to grid to create a block-level grid container or inline-grid to create an inline grid container. Ex: <div style="display: grid">.
grid container
A blank is a child element of a grid container that is by default placed into a single grid cell.
grid item
The blank property defines the grid container’s number of columns and optionally the width of each column. Ex: grid-template-columns: 50px 90px auto auto; specifies 4 values that create 4 columns: the first is 50px wide, the second is 90px wide, and the third and fourth columns are automatically sized to fit the remainder of the grid width.
grid-template-columns
The blank property defines the gap between each grid row and column. Ex: gap: 5px 25px; puts a 5px gap between each row and a 25px gap between each column.
gap
The blank property defines the height of each row. Ex: grid-template-rows: 20px 40px; makes the first row 20px tall and the second row 40px tall.
grid-template-rows
The blank property horizontally aligns the grid items inside the grid container
justify-content
Name the values of the justify-content property
start
end
center
stretch
space-around
space-between
space-evenly
Aligns grid flush with the grid container’s starting edge.
start
Places equal spacing between grid items, including the sides of the grid container.
space-evenly
Places equal spacing between grid items with no space on either side of the grid container.
space-between
Places equal spacing between grid items with half the space on either side of the grid container.
space-around
Stretches the grid items to fill the grid container width.
stretch
Aligns grid in the center of the grid container.
center
Aligns grid flush with the grid container’s ending edge.
end
The blank property vertically aligns the grid items inside the grid container
align-content
Name the values used for align-content
start
end
center
stretch
space-around
space-between
space-evenly
Places equal spacing between grid items, including the sides of the grid container.
space-evenly
Places equal spacing between grid items with no space on either side of the grid container.
space-between
Places equal spacing between grid items with half the space on either side of the grid container.
space-around
Stretches the grid items to fill the grid container height.
stretch
Aligns grid in the center of the grid container.
center
Aligns grid flush with the grid container’s ending edge.
end
Aligns grid flush with the grid container’s starting edge.
start
The justify-content and align-content properties have no effect unless the grid width or height is blank than the grid container’s width or height.
less
A grid item by default appears in a blank based on the ordering of the grid item within the grid container. However, grid items may be positioned at specific grid locations using the column line and row line numbers
single row and column
The blank property lists the grid item’s starting and ending row line numbers. Ex: grid-row: 1 / 3; makes the grid item start at row line 1 and end at row line 3, so the grid item spans 2 rows.
grid-row
The blank property lists the grid item’s starting and ending column line numbers. Ex: grid-column: 1 / 4; makes the grid item start at column line 1 and end at column line 4, so the grid item spans 3 columns.
grid-column
The blank property lists the grid item’s starting and ending row and column numbers. Ex: grid-area: 1 / 2 / 3 / 4; makes the grid item start at row line 1 and column line 2 and end at row line 3 and column line 4, so the grid item spans 2 rows and 2 columns.
grid-area
Grid items may be assigned names with the blank.
grid-area property
The grid container’s blank property specifies the grid layout using the named grid items.
grid-template-areas
The CSS blank property gives developers more control over where elements should appear in the browser.
position
position has what four possible values:
static
relative
fixed
absolute
blank positioning positions the element relative to the nearest positioned ancestor
Absolute
Blank positioning positions the element relative to the viewport in a fixed location
Fixed
Blank positioning positions the element relative to the element’s default position
Relative
Blank positioning is the default positioning
Static
Fixed positioning places the element at a fixed location in the viewport, and blank does not move the element.
scrolling
A blank is the visible area of a web page
viewport
The blank is detached from the normal flow of elements in the page and is layered on top of the page contents.
fixed element
Absolute positioning is similar to fixed positioning except for what two things:
The position is based on the nearest positioned ancestor element that uses fixed, absolute, or relative positioning. If no positioned ancestor element exists, the element is positioned relative to the document body.
An absolute-positioned element scrolls with the document unless an ancestor element is using fixed positioning.
When a relative, absolute, or fixed element is placed on top of another positioned element, the element that is blank in the HTML is placed on top.
specified last
The CSS blank property is used to specify a relative distance that orders the appearance of elements. Elements with higher blank values are placed on top of elements with lower blank values.
z-index
Shadows are added to text using the CSS property blank
text-shadow
Name four values used for text-shadow
offset-x
offset-y
blur-radius
color
Horizontal pixel offset of shadow
offset-x
Vertical pixel offset of shadow
offset-y
Optional shadow color (default is usually the current CSS color)
color
Optional shadow blur (default is 0)
blur-radius
The CSS property blank adds a shadow to the box around an element
box-shadow
Name six possible values of box-shadow
inset
offset-x
offset-y
blur-radius
spread-radius
color
Optional value that draws the shadow inside the box (default is outside the box)
inset
Optional shadow color (default is usually the current CSS color)
color
Positive value causes shadow to grow, negative values to shrink (default is 0)
spread-radius
Optional shadow blur (default is 0)
blur-radius
Vertical pixel offset of shadow
offset-y
Horizontal pixel offset of shadow
offset-x
An element border’s corners can be rounded using the CSS property blank
border-radius
If a border-radius has blank all four corners are equally rounded
Single value
If a border-radius has blank. First value is top-left and bottom-right corners, second value is top-right and bottom-left corners
Two values
If a border-radius has blank. First value is top-left, second is top-right and bottom-left, third is bottom-right
Three values
If a border-radius has blank. First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left
Four values
Each corner may also be assigned a radius using what four CSS properties
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
The CSS property blankl renders an element’s border using sections of an image.
border-image
The border image takes the place of any border properties specified by blank.
border-style
What CSS properties are specified by border-image all at once
border-image-source - Image URL
border-image-slice - Image section size
border-image-repeat
what are the three possible values for border-image-repeat?
“repeat” to repeat the image section, “round” to repeat the image section but resize the image if needed to fit, or “stretch” to stretch an image section
A border image will not appear unless the blank property is non-zero and blank is set to any legal value except none and hidden.
border-width
border-style
A blank is a prefix added to an experimental or nonstandard CSS property that only works on a specific browser type
vendor prefix
Name four typical vendor prefixes:
-webkit
-moz
-ms
-o
vendor prefix for Chrome, Safari, and newer versions of Opera
-webkit
vendor prefix for for Firefox
-moz
vendor prefix for Internet Explorer
-ms
vendor prefix for older versions of Opera
-o
A CSS background may use blank that transition from one color to another.
gradient colors
Name the two CSS gradients:
Linear gradient
Radial gradient
Blank is a gradient that follows a straight line
linear gradient
Blank is a gradient that radiates outward into an ellipse
radial gradient
The CSS function blank creates a linear gradient that transitions from color1 to color2 when moving from the top edge to the bottom edge.
linear-gradient(color1, color2)
To change the gradient’s direction, the first argument to blank can be a direction or an angle
linear-gradient
Name the four linear-gradient direction values
to left
to right
to top
to bottom
Angle - A CSS angle that points in the direction of the linear gradient. What does angles 0deg, 90deg, 180deg, and 270deg correspond to
to top, to right, to bottom, and to left
The blank function repeats a linear gradient where the color values are supplied an optional percent.
repeating-linear-gradient()
The blank value after the last color is the percent of the gradient’s total length the repeating gradient should occupy.
percentage
A blank is created with the CSS function radial-gradient(color1, color2), which creates an ellipse-shaped gradient that begins with color1 in the center and ends with color2 on the perimeter
radial gradient
A blank can be placed after a color to give more emphasis to the color. Ex: radial-gradient(red 10%, yellow 30%) gives more emphasis to red and yellow than the default rendering.
percentage or length
The blank shape of a radial gradient fits the gradient’s bounding rectangle.
ellipse
a circular radial gradient can be created with the blank. Ex: radial-gradient(circle, red, yellow) creates a circle gradient.
circle argument
A radial gradient’s ellipse or circle is centered by default in the enclosing rectangle, but the center position can be specified using blank where centerX and centerY specify a distance or percentage. Ex: radial-gradient(at 50px 10px, yellow, green) specifies a center that is 50px from the left edge and 10px from the top.
“at centerX centerY”
By default, a radial gradient’s shape reaches to the blank of the containing rectangle.
farthest corner
An blank describes the size of the radial gradient’s shape:
extent keyword
Name four possible extent keyword values
closest-side
farthest-side
closest-corner
farthest-corner
Circle touches the rectangle’s side closest to the circle’s center. Ellipse touches the vertical and horizontal sides closest to the ellipse’s center.
closest-side
Circle or ellipse touches the corner farthest from the shape’s center. (Default behavior.)
farthest-corner
Circle or ellipse touches the corner closest to the shape’s center.
closest-corner
Circle touches the rectangle’s side farthest from the circle’s center. Ellipse touches the vertical and horizontal sides farthest from the ellipse’s center.
farthest-side
Developers often use blank and blank like jQuery to produce animations.
JavaScript and JavaScript libraries
A blank transforms an element’s styles over a set time period, producing an animation.
CSS animation
CSS animations have three advantages over JavaScript animations. Name them
CSS animations do not require any JavaScript code.
CSS animations often put less load on the computer and can use techniques to produce smoother animations when the computer’s resources are limited.
CSS animations allow the browser to more efficiently control animations and stop animations from running in browser tabs that are not visible.
A CSS animation’s behavior is defined with the blank rule, which contains a keyframe list
@keyframes
A blank has a name and contains the keyframes or the properties and values that will be animated.
keyframe list
A keyframe list contains two keyframe selectors. Name them and what do they mean
from - The animation starting state that lists the CSS properties and values that apply when the animation begins
to - The animation ending state that lists the CSS properties and values that the “from” values become by the time the animation ends
Blank may be used to specify keyframes at various points during the animation. Ex: 0% is equivalent to from and 100% is equivalent to to. The value 50% indicates the animation state at the halfway point.
Percentages
To create an animation, two CSS properties must be defined. Name them.
animation-name - Names the keyframe list associated with the animation
animation-duration - Length of the animation in seconds (s) or milliseconds (ms)
An animation begins immediately when the browser renders the web page unless an blank is used to delay the start of the animation
animation-delay
The blank property controls an animation’s speed between keyframes.
animation-timing-function
Several timing functions are available. Name them
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(n1,n2,n3,n4)
Slow start, then fast, then slow end (default)
ease
Same speed throughout
linear
Slow start
ease-in
slow end
ease-out
Slow start and end
ease-in-out
Specify numbers that control speed based on a Bezier curve
cubic-bezier(n1,n2,n3,n4)
Blank Indicates the number of times the animation will run. The value infinite runs the animation repeatedly without stopping. Ex: animation-iteration-count: 3 runs the animation three times.
animation-iteration-count
Name the four values of animation-direction
normal - Normal direction (default)
reverse - Reverse direction
alternate - Alternate between normal and reverse
alternate-reverse - Alternate between reverse and normal
Blank is the shorthand property indicating the animation name, duration, timing function, delay, iteration count, and direction. Ex: animation: move 3s linear 2s infinite normal.
animation
A blank animates an element’s transition from one state to another when an element’s CSS property changes value.
CSS transition
Transitions are commonly used with the blank to trigger an animation when the user mouses over an element.
:hover pseudo-class
Transitions differ from CSS animations in what two ways
Transitions execute when an element’s property values are changed, unlike CSS animations that execute at a particular time.
Transitions provide less control over the animation than CSS animations.
The blank defines a transition by specifying one or more CSS properties and each property’s transition duration.
transition property
Several transition-timing-function functions are available, and all complete in the same amount of time:
ease
linear -
ease-in
ease-out
ease-in-out
cubic-bezier(n1,n2,n3,n4)
transition timing - Slow start, then fast, then slow end (default)
ease
transition timing - Same speed throughout
linear
transition timing - Slow start
ease-in
transition timing - Slow end
ease-out
transition timing - Slow start and end
ease-in-out
transition timing - Specify numbers that control speed based on a Bezier curve
cubic-bezier(n1,n2,n3,n4)
The blank property delays the transition’s start.
transition-delay
The blank property applies a 2D or 3D transformation to an element.
transform
A blank is a graphical operation that alters the position, shape, or orientation of an object.
transformation
The transform property is assigned a blank
transformation function
transform function that moves an element on the x-axis x distance and along the y-axis y distance
/* Moves right 10px and up 20px */
translate(10px, -20px)
translate(x, y)
transform function that Increases (values > 1) or decreases (values < 1) the width and height by the x and y multiplier
/* Halves the width, doubles the height */
scale(0.5, 2)
scale(x, y)
transform function that rotates clockwise by angle /* Rotates clockwise 45 degrees */
rotate(45deg)
rotate(angle)
The W3C recommends putting form elements in blank, but many leading web frameworks like Bootstrap use blank instead. Either container is acceptable, and this material uses both styles.
<p> tags
<div> tags
</div></p>
The best places for labels are immediately above or to the left of an input field. Some developers use only the blank HTML attribute in place of labels to save screen space and reduce clutter, especially on mobile devices. However, usability experts warn that placeholders used as labels can create a number of problems for users and should be avoided.
placeholder
The CSS property blank is used to control a widget’s appearance based on the operating system’s theme. Setting appearance to blank hides the widget.
appearance
none
To display a custom radio button or checkbox, the blank pseudo-element selector and content property are used to insert content before the label’s content that looks like a radio button or checkbox.
::before
blank is a popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets. Other popular CSS preprocessors, like Less and Stylus, offer similar and unique features with different syntax.
Sass
Sass version 3 introduced a new syntax called blank, which uses semicolons and brackets like CSS. Some online references still refer to the old Sass syntax which relies on indentation and has no brackets.
Sassy CSS (SCSS)
Selectors may be blank in Sass to create child selectors that only apply to the parent selector. In the figure below, the strong child selector is nested in a .notes parent selector, creating a .notes strong selector in the resulting CSS.
nested
The blank is used to reference the parent selector from a child selector’s properties.
& character
Sass allows properties that share the same prefix to be blank under the prefix.
nested
Blank is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions. SassScript also provides basic control directives for performing conditional logic and looping.
SassScript
A SassScript variable begins with a blank and can store data types
$
Name the SassScript data types
Number - Any number that is optionally followed by a CSS unit. Ex: 3, 5.1, 20px
String - “Double”, ‘single’, or unquoted strings. Ex: “red”, ‘red’, red
Color - Color name or value. Ex: green, #00ff00, rgb(0,255,0)
Boolean - true or false
Null - null
List of values - Separated by spaces or commas. Ex: 10px 20px 30px 40px,
Helvetica, Arial, sans-serif
Map - Key/value pairs. Ex: (111:red, 222:blue)
Blank like addition, subtraction, multiplication, and division may be performed on numbers and numeric variables. Ex: 20px + 15 = 35px. Arithmetic on color values results in the red, green, and blue values being added, subtracted, multiplied, or divided one at a time. Ex: #0011aa + #bb2244 results in 00 + bb = bb, 11 + 22 = 33, and aa + 44 = ee; so the final value is #bb33ee.
Basic arithmetic
SassScript function that returns string using all uppercase characters.
/* Returns “BEHOLD!” */
$message: to-upper-case(“Behold!”);
to-upper-case(string)
SassScript function that returns a color lightened by an amount between 0% and 100%
/* Returns #d00 */
$color: lighten(#a00, 10%);
lighten(color, amount)
SassScript function that returns the inverse (negative) of a color
/* Returns #5ff */
$color: invert(#a00);
invert(color)
SassScript function that returns a number rounded to the nearest whole number
/* Returns 21px */
$width: round(20.5px);
round(number)
SassScript function that returns a random integer between 1 and limit (inclusive)
/* Returns a number between 1 and 5 that is multiplied by 20px */
$width: random(5) * 20px;
random(limit)
A blank is set of reusable styles and is defined by the @mixin directive.
mixin
A directive is an extension to the CSS at-rules, which are statements that begin with the blankcharacter.
@
Mixins may take blank, which give mixins the ability to customize the styles that the mixin defines.
arguments
Mixins are included in a document using the blank directive.
@include
Sass contains other features including blank like @if and @for, that support conditional styling and looping
Control directives,
Sass contains other features including the ability to import SCSS and Sass files using the blank directive
@import
Sass contains other features including the ability to extend the styles in a class with the blank
@extend directive
Sass contains other features including the ability to write blank functions
custom
A blank is a web browser designed for mobile devices that can display web pages using HTML, CSS, and JavaScript.
mobile web browser
A blank is a website that is designed for mobile devices with smaller screen sizes and touch interfaces.
mobile website
Mobile and desktop websites are created with the blank.
same technologies: HTML, CSS, and JavaScript
Developers implement mobile websites using what three main techniques:
Separate websites
Dynamic serving:
Responsive web design:
Two different websites are created, one for desktop and one for mobile.
Separate websites
The web server sends back the same HTML to both desktop and mobile browsers, but the browsers alter the appearance of the web page to match the device size.
Responsive web design:
The same URL is requested by both desktop and mobile web browsers, but the web server sends back a desktop version to desktop browsers and a mobile version to mobile browsers.
Dynamic serving:
Blank is a collection of techniques to create web pages that adapt to the browser’s size.
Responsive web design (RWD)
RWD is characterized by what three things:
Elements are laid out on fluid, proportion-based grids that use relative units like percentages instead of absolute units like pixels.
Images are sized with relative units to adapt to various screen sizes.
CSS media queries apply different CSS styles depending on the browser’s width.
RWD allows developers to create a blank that looks good on mobile, desktop, and tablet browsers.
single web page
An blank adapts to the width of the browser at specific widths. Ex: A container is 400 pixels wide when the browser is wider than 500 pixels, but the container shrinks to 200 pixels when the browser is less than 500 pixels wide. A responsive website will instead smoothly adjust the width of the container to fit the browser width.
adaptive website
Developers follow what two general strategies to design websites for all three platforms:
Graceful degradation
Progressive enhancement
Design the desktop website first and modify the design to fit smaller screens.
Graceful degradation
A “mobile first” design methodology that begins with designing the website for the smallest device and then adapts the design for larger screens.
Progressive enhancement
Good practice is to use blank to build websites that show equivalent text and images and provide the same functionality on all platforms.
progressive enhancement
A blank is ideal for both desktop and mobile devices.
fluid layout
A fluid layout that works well on a desktop does not always work well on a mobile device. Developers use blank to modify a web page’s layout depending on the browser’s width.
responsive web design
Webpages using responsive web design adapt to different viewport sizes using blank.
media queries
A blank is a combination of media type and optionally one or more media feature expressions that evaluate to true or false.
CSS media query
A blank is a device category that a media query applies to. Ex: all, print, and screen
media type
A blank is a characteristic of a browser, device, or environment. Ex: aspect-ratio, height, and orientation.
media feature
Some media features may be prefixed with blank or blank to express ≥ or ≤ constraints. Ex: min-width:200px means width ≥ 200px.
“min-“ or “max-“
Media type for all devices (default value if no media type is listed)
all
Media type for printers and documents viewed on screen in print preview mode
Media type intended for screens
screen
Viewport’s width-to-height aspect ratio
aspect-ratio
Viewport’s height
height
Viewport’s width
width
Viewport’s orientation: portrait or landscape
orientation
Device’s pixel density
resolution
Media queries often are used in blank elements and in stylesheets.
<link></link>
A media query in a <link></link> is specified with the blank. When the media query matches (evaluates to true), the link’s stylesheet is downloaded.
media attribute
A media query in a stylesheet is specified with the blank. An at-rule is a CSS statement that starts with the @ character and instructs the CSS engine how to behave. When a media query in a stylesheet matches, the @media’s inner rules are defined.
@media at-rule
Developers choose blank to determine when content should be displayed, resized, or hidden in a web page.
“breakpoints”
A blank is the screen width that activates a media query. Ex: In the media query @media screen and (max-width: 800px), 800 is the breakpoint.
breakpoint
Good practice is to use breakpoints that target the blank rather than a specific device.
content
Media query breakpoints do not work properly unless the viewport blank sets the viewport width to the device width.
meta tag
Blank is one of the most popular free, open-source frameworks. It uses HTML, CSS, and JavaScript to help a developer create responsive websites.
Bootstrap
Bootstrap was created by Mark Otto and Jacob Thornton at Twitter during a hackathon session in mid-2010. It was originally called blank, but it was renamed Bootstrap before its release.
Twitter Blueprint
A designer may choose to employ blank, which are visual signals that help communicate information to the website visitor. The Bootstrap framework has many icons that can be used both within and without the framework.
website icons
The overall appearance of the text on your website is called blank. You need to make sure that the website’s typography is consistent throughout. The Bootstrap framework allows you to control global settings, headings, body text, lists, and other elements, to create that unified website look and feel.
typography
