Week 2
border-image: url(some-border.png) 50 repeat;
*50 x 50 pixel sections of some-border.png are used to create the border image. True *If some-border.png is 50 x 50 pixels, then the border will have empty sides. True *If some-border.png is 150 x 150 pixels, the border image section is stretched on the sides. False *The width and height of a border image are specified by border-image-width and border-image-height.False
Box model components
*Content: The innermost box contains the content of the element, such as text and images. *Padding: The padding box contains the content box and adds a transparent area around the content. *Border: The border box contains the padded content and adds an optionally colored area around the padding. *Margin: The margin box contains all three boxes and adds a transparent area around the border.
A CSS background may use gradient colors that transition from one color to another. Two CSS gradients exist:
*Linear gradient - A gradient that follows a straight line *Radial gradient - A gradient that radiates outward into an ellipse
The padding and margin properties may have from 1 to 4 values:
*One value - Specifies uniform thickness around the box. *Two values - Specifies top and bottom, right and left thickness. *Three values - Specifies top, right and left, and bottom thickness. *Four values - Specifies top, right, bottom, and left thickness.
An element border's corners can be rounded using the CSS property border-radius
*Single value - All four corners are equally rounded *Two values - First value is top-left and bottom-right corners, second value is top-right and bottom-left corners *Three values - First value is top-left, second is top-right and bottom-left, third is bottom-right *Four values - First value is top-left, second is top-right, third is bottom-right, forth is bottom-left
Border styles
*The border-width property specifies the border's width. Ex: border-width: 5px; specifies a border that is 5px thick. *The border-style property specifies the border's style. Ex: border-style: dashed; specifies a border that is dashed. *The border-color property specifies the border's color. Ex: border-color: green; specifies a border that is green.
Pseudo-class selectors match elements based on user behavior or metainformation about HTML elements. Example pseudo-class selectors include:
:enabled - Element is enabled. :hover - Mouse is hovering over the element. :empty - Element has no child elements. :lang(language) - Element contains text in a specified language.
To create an animation, two CSS properties must be defined:
animation-name - Names the keyframe list associated with the animation animation-duration - Length of the animation in seconds (s) or milliseconds (ms)
Underline the first line in each blockquote. <blockquote>To be or not to be...</blockquote>
blockquote::first-line{ text-decoration: underline; }
Set the text color for input buttons of type submit. <button type="submit">Submit</button>
button[type = "submit"] { color: green; }
Applying CSS
can be applied to HTML in three ways: -An inline style places CSS declarations inside a tag's style attribute. -An embedded stylesheet places CSS rules in an HTML document's head using <style> tags. -An external stylesheet places CSS rules in a separate file that is imported into an HTML document with a <link> tag.
flex item
child element of a flex container that is positioned and sized according to various CSS flexbox properties.
An absolute size is a size that is fixed and independent of other CSS sizes. Absolute size units include:
cm - centimeters mm - millimeters in - inches px - pixels (1px = 1/96in) pt - points (1pt = 1/72in) pc - pica (1pc = 12pt)
What is the proper syntax to use a CSS variable called --section-color?
color: var(--section-color);
CSS rule
consists of a selector followed by a declaration block between braces ({ }).
CSS variable
custom CSS property that defines a value.A CSS variable is defined with two dashes preceding the variable name. Ex: --my-variable: red; A CSS variable is accessed with the var() function. Ex: var(--my-variable);
The box model
describes the size of each element as a series of nested boxes. The box model is important to understand when considering design and layout.
Cause the text background of any div to be changed to light blue when the mouse hovers (moves over) any part of the div contents.
div:hover{ background-color: lightblue; }
flex container
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 containers hold flex items.
The box-shadow property creates a shadow for text.
false: box-shadow creates shadows for the box around an element. text-shadow creates a shadow for text.
Cause all heading 1 text to be displayed with the bold font-weight attribute.
h1{ font-weight: bold; }
Create a border for images where the alt attribute starts with test. <img src="pic1.jpg" width="50" height="50" alt="testing">
img[alt^="test"] { border: red 1px solid; }
Set the input area width for any text input elements to 300 pixels. <input type="text" name="firstName">
input[type ="text"] { width: 300px; }
The float property specifies whether the element will float to the right or left of the element's parent container, allowing text to flow around the element. Values for the float property include:
left - Element floats to parent container's left side right - Element floats to parent container's right side none - Element does not float (default value)
Make the first letter uppercase in all list items. <li>Bread</li>
li::first-letter{ text-transform: uppercase; }
What CSS declaration sets the margin to have a uniform space of 20 pixels?
margin: 20px
What is $value? $value: #ff1150 - #001120;
#ff1150 - #001122 = ff - 00, 11 - 11, 50 - 20 = ff, 00, 30 = #ff0030
What is $value? $value: #ff1150 + 2;
#ff1352
Cause the element with the ID special to be displayed with the text color red.
#special{ color: red; }
other animation properties include:
*animation-iteration-count - Indicates the number of times the animation will run. The value infinite runs the animation repeatedly without stopping. *animation-direction - Indicates animation direction normal - Normal direction (default) reverse - Reverse direction alternate - Alternate between normal and reverse alternate-reverse - Alternate between reverse and normal *animation - Shorthand property indicating the animation name, duration, timing function, delay, iteration count, and direction.
The animation-timing-function property controls an animation's speed between keyframes. Several timing functions are available:
*ease - Slow start, then fast, then slow end (default) *linear - Same speed throughout *ease-in - Slow start *ease-out - Slow end *ease-in-out - Slow start and end *cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve
The transition-timing-function property controls the speed of the transition. Several timing functions are available, and all complete in the same amount of time:
*ease - Slow start, then fast, then slow end (default) *linear - Same speed throughout *ease-in - Slow start *ease-out - Slow end *ease-in-out - Slow start and end *cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve
What is the proper syntax to declare a CSS variable set to black?
--section-color:black;
.highlight { border: { width: 2px; } }
.highlight border { width: 2px; }
2D transformation functions:
1. translate(x, y): Moves an element on the x-axis x distance and along the y-axis y distance 2.scale(x, y):Increases (values > 1) or decreases (values < 1) the width and height by the x and y multiplier 3.rotate(angle): Rotates clockwise by angle
What is $value? $value: random(3) * 100px;
100px, 200px or 300 px
What is $value? $value: round(16.4pt);
16pt
If #grid-container is modified, how many columns will the grid have? #grid-container { display: grid; grid-template-columns: auto auto; }
2
What is $value? $value: 20pt + (10 / 2) ;
25pt
Where is the image located relative to the image's default location? <img src="world.jpg" style="position:relative; top:-30px">
30px higher (30px is a negative value, so the image is 30 pixels higher from the image's default location.)
Where is the image located relative to the image's default location? <img src="world.jpg" style="position:relative; left:30px">
30px to the right bc not a negative value
If #grid-container is modified, how wide is the second column? #grid-container { width: 600px; display: grid; grid-template-columns: 200px auto; }
400px
What is $value? $value: 20px - 15;
5px
Change the text color to green for any text that is currently selected using the mouse.
::selection{ color: green; }
What selector must a CSS variable be declared in to have global scope?
:root
Which label is selected by input[type=radio] + label?
<input type ="radio"><label></label>
What does the DOM look like after the CSS and HTML below are rendered? span::before { content: "Before"; } <span>Test</span>
<span>BeforeTest</span>
directive
A directive is an extension to the CSS at-rules, which are statements that begin with the @ character.
grid item
A grid item is a child element of a grid container that is by default placed into a single grid cell.
A CSS animation's behavior is defined with the @keyframes rule, which contains a keyframe list.
A keyframe list has a name and contains the keyframes or the properties and values that will be animated.
Mixins
A mixin is set of reusable styles and is defined by the @mixin directive
Flexbox
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.
Combinators
CSS selectors that match specific relationships between other selectors. The descendant, child, adjacent sibling, and general sibling selectors are all combinators.
Style sheet
Describes the visual presentation of structured documents.
An inline style does not use a selector.
False
An inline style uses curly braces ({}).
False
If two elements are stacked on top of each other and both have margin:20px, the total margin between the two elements is 40px.
False
Inline styles cannot be used with embedded stylesheets or external stylesheets.
False
The #div1 transition takes longer to complete than the #div2 transition. div { width: 100px; height: 100px; transition: width 1s; } #div1 { transition-timing-function: ease-in; } #div2 { transition-timing-function: linear; }
False
The :focus selector normally selects more than one element at a time.
False
The max-width property should never be used in a fluid layout. True False
False
The sass command-line tool creates a .scss file from a .css file.
False
The transition property below makes the width take 3 seconds longer than the height to complete the transition. transition: width 3s, height 1s;
False
if animation-duration is assigned the value 0s, the animation occurs very quickly.
False, no animation occurs unless a positive value is assigned
Justify-content
Flex container property that defines the alignment of the flex items.
flex-direction
Flex container property that indicates which direction the flex items are placed in the flex container.
flex-basis
Flex item property that defines the default size of the item before the remaining space is distributed.
flex-grow
Flex item property that indicates the growth factor of the flex item.
flex-shrink
Flex item property that indicates the shrink factor of the flex item.
grid layout
Grid layout is a CSS layout mode that divides a web page into a rectangular grid in which to position page elements. Grid layout is ideal for designing two-dimensional web page layouts.
Where is the image located relative to the image's default location? <img src="world.jpg" style="position:static; left:-20px; top:30px">
No change (Static positioning leaves the image at the default location.)
What does the element using the keyframes below look like at the end of the animation? @keyframes example { from { transform: rotate(-45deg) scale(0.5, 0.5); } to { transform: rotate(45deg) scale(1.5, 1.5); } }
Rotated 45 degrees and scaled larger
What does the <p> look like when the mouse clicks the element? p { transition: all 1s; } p:hover { transform: translate(10px, 0); } p:active { transform: scale(2, 2); }
Scaled larger
Nesting
Selectors may be nested in Sass to create child selectors that only apply to the parent selector.The & character is used to reference the parent selector from a child selector's properties.
sibling elements
Sibling elements are elements that share the same parent element
Child Selector
The child selector, specified using a greater than character (>) between two selectors, matches any elements where the second element is a direct child of the first element. Ex: Match all list items that are direct children of ordered lists. ol>li
transform
The transform property applies a 2D or 3D transformation to an element. A transformation is a graphical operation that alters the position, shape, or orientation of an object.
A CSS transition animates an element's transition from one state to another when an element's CSS property changes value.
The transition property defines a transition by specifying one or more CSS properties and each property's transition duration.
A property that is listed in the from keyframe selector but not the to keyframe selector will not be animated.
True
A transition can animate one or more CSS properties.
True
A valid keyframe list must define the starting (from) and ending (to) animation states.
True
An advantage to using an SCSS variable to store a color value used multiple times in a stylesheet is that if the color needs to be changed in the future, only the variable needs to be changed.
True
An animation without an animation-delay property begins immediately.
True
Many browsers add a border around an input when the input has the focus.
True
The CSS below causes a paragraph to disappear when the mouse hovers over the paragraph. p { transition: opacity 500ms; } p:hover { opacity: 0; }
True
The SCSS below results in CSS that sets a web page's background color to blue. $theme-color: blue; body { background-color: $theme-color; }
True
f two elements are horizontally adjacent to each other and both have margin:20px, the total margin between the two elements is 40px.
True
Set the text color to blue for any links where the rel attribute contains nofollow. <a rel="abstract nofollow" href="https://example.com">
a[rel~="nofollow"] { color: blue; }
fluid layout
allows the page contents to fill the browser, sometimes by using percentages for widths.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.
grid container
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">.
SassScript variable data types:
begins with a $ and can store one of the following data types: *Number - Any number that is optionally followed by a CSS unit. *String - "Double", 'single', or unquoted strings. *Color - Color name or value. *Boolean - true or false *Null - null *List of values - Separated by spaces or commas. *Helvetica, Arial, sans-serif *Map - Key/value pairs.
What is $value? $value: invert(white);
black
A keyframe list contains two keyframe selectors:
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
Which CSS selector selects only checkboxes that are checked?
input[type=checkbox]:checked
Select the CSS that results from the given SCSS: p { em { color: red; } }
p em { color: red; }
Sass
popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets. Sass version 3 introduced a new syntax called Sassy CSS (SCSS), which uses semicolons and brackets like CSS
grid-template-columns
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.
section { article { &:hover { color: blue; } } }
section article:hover { color:blue; }
SassScript
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.
Cause all hyperlinks inside a table to be displayed with the bold font-weight attribute.
table a { font-weight: bold; }
translate(), scale(), and rotate() are _____ functions.
transformation
Which function moves an element 20 pixels to the left and 5 pixels down?
translate(-20px, 5px)
A fluid layout widens to fit the browser's width.
true
SCSS is syntactically different than the original Sass syntax.
true
fixed layout
uses a fixed-width container to envelop the web page contents. Resizing the browser does not change the width of the web page contents.
z-index
z-index property is used to specify a relative distance that orders the appearance of elements. Elements with higher z-index values are placed on top of elements with lower z-index values.
font properties
*The font-family property specifies the font family, such as "Times New Roman" or serif. *The font-size property changes the font size, such as 120%, small, or 12px. *The font-weight property specifies the font weight, such as normal or bold. *The font-style property changes the text style, such as normal, italic, or oblique. *The font-variant property specifies the variant of the text, such as normal or small-caps. *The font property is shorthand for setting several font properties at the same time. Ex: font: italic 12pt Georgia, serif;
The CSS properties that control the padding, border, and margin are:
*The padding property specifies the padding thickness. Ex: padding: 5px; creates a 5 pixel padding around the content. *The border property specifies the border's thickness, style, and color. Ex: border: 2px solid blue; creates a solid blue border that is 2 pixels thick. *The margin property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.
Text properties
*The text-align property changes the horizontal alignment of text for an element. Possible values are: left, right, center, and justify. *The text-decoration property can add or remove text decorations like underlining or a line-through. Possible values are: overline, line-through, underline, and none. *The text-transform property converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters. Possible values are: uppercase, lowercase, and capitalize. *The text-indent property specifies the first line's indentation amount.
The CSS property border-image renders an element's border using sections of an image. The border image takes the place of any border properties specified by border-style. The following CSS properties are specified by border-image all at once:
*border-image-source - Image URL *border-image-height - Image section height *border-image-width - Image section width *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
The clear property can stop elements from floating. Values for the clear property include:
*both - No elements allowed to float *left - No element allowed to float on parent container's left side *right - No element allowed to float on parent container's right side *none - Elements allowed to float (default value)
A relative size is a size that is relative to another size. Some common relative size units include:
*em - Relative to the element's font size. Ex: 2em = 2 × current font size. *rem - Relative to the root element's font size. Ex: 1.5rem = 1.5 × <html> element's font size. *vw - 1% of the viewport's width. Ex: 10vw = 10% of browser's width. *vh - 1% of the viewport's height. Ex: 5vh = 5% of browser's height. *% - Percentage of the element's font size. Ex: 120% = 20% larger than the current font size.
The display property controls the layout of the element on a web page. Values for the display property include:
*inline - Displays the element as an inline element, like span or a elements. *block - Displays the element as a block element, like p, h1, or div elements. *none - Hides the element from being displayed, like style elements. *inline-block - Displays the contents of the element as a block element, but formats the element as an inline element. *list-item - Displays the contents of the element as a list item element.
box-shadow adds a shadow to the box around an element using the following properties:
*inset - Optional value that draws the shadow inside the box (default is outside the box) *offset-x - Horizontal pixel offset of shadow *offset-y - Vertical pixel offset of shadow *blur-radius - Optional shadow blur (default is 0) *spread-radius - Positive value causes shadow to grow, negative values to shrink (default is 0) *color - Optional shadow color (default is usually the current CSS color)
Shadows are added to text using the CSS property text-shadow, which accepts four values:
*offset-x - Horizontal pixel offset of shadow *offset-y - Vertical pixel offset of shadow *blur-radius - Optional shadow blur (default is 0) *color - Optional shadow color (default is usually the current CSS color)
The CSS position property gives developers more control over where elements should appear in the browser. position has four possible values:
*static - Static positioning is the default positioning *relative - Relative positioning positions the element relative to the element's default position *fixed - Fixed positioning positions the element relative to the viewport in a fixed location *absolute - Absolute positioning positions the element relative to the nearest positioned ancestor
background properties
-The background-color property specifies the background color. -The background-image property specifies a background image. -The background property is shorthand for setting several of the element's background properties at the same time.
Five common selector types are:
-The element selector matches elements with the specified element names. Ex: p { color: blue; } -The class selector, specified with a period character followed by the class name, matches elements that have the specified class name.Ex: .notice { color: blue; } -The ID selector, specified with a hash character followed by the ID name, matches the element that has the specified ID.Ex: #byLine { color: blue; } -The descendant selector, specified with a selector followed by a space and another selector, matches elements that are contained in other elements.Ex: h2 em { color: blue; } -The pseudo-class selector, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation.Ex: :hover { color: blue; }
Cause all elements with the class name logbase to be displayed as superscript text.
.logbase{ vertical-align: super; font-size: smaller; }
A CSS animation transforms an element's styles over a set time period, producing an animation. CSS animations have three advantages over JavaScript animations:
1.CSS animations do not require any JavaScript code. 2.CSS animations often put less load on the computer and can use techniques to produce smoother animations when the computer's resources are limited. 3.CSS animations allow the browser to more efficiently control animations and stop animations from running in browser tabs that are not visible.
A shadow with blur-radius:4px is less blurry than a shadow with blur-radius:2px.
False
The offset-x and offset-y must be a non-zero value.
False, when 0 appears to be a glow
flex
Flex item property that indicates flex-grow, flex-shrink, and flex-basis combined.
Attribute selector
The attribute selector, specified with an attribute name and optional value comparison enclosed in square brackets ([ and ]), matches elements with the specified attribute or the specified attribute and value.
color property
The color CSS property changes the text color to a specified color value. A color value can be specified in several ways: color names, rgb color values, hexadecimal colors, hsl color value(hue, saturation, lightness), RGBA color value specifies a color using the rgba(red, green, blue, alpha)
Cascading
The process of combining multiple style rules and resolving conflicting styles.
A website should use an external stylesheet to create styles that apply to all web pages.
True
A zero spread-radius makes the shadow the same size as the box.
True
If the box-shadow uses the value inset, then the shadow appears inside the box.
True
Multiple shadows can apply to the same text.
True
Positive offset-x and offset-y make the shadow appear to the right and below the text, but negative values make the shadow appear to the left and above the text.
True
Add a red asterisk at the end of each paragraph. <p>Turn the switch on.</p>
p::after{ content: "*"; color: red; }
What CSS declaration changes the right padding to be 10 pixels wide?
padding-right: 10px
What CSS declaration changes the top and bottom padding to be 20 pixels and right and left to be 30 pixels?
padding: 20px 30px
fixed positioning
places the element at a fixed location in the viewport, and scrolling does not move the element. A viewport is the visible area of a web page.
Absolute positioning
similar to fixed positioning except the position is based on the nearest positioned ancestor element that uses fixed, absolute, or relative positioning.
Multiple selector
specified using a comma (,) to separate selectors, matches all listed elements to apply a style rule
adjacent sibling selector
specified using a plus character (+) between two selectors, matches an element that immediately follows another element, where both elements have the same parent.
general sibling selector
specified using a tilde character (~) between two selectors, matches the second element if the second element occurs after the first element and both elements are siblings.
universal selector
specified using an asterisk character (*), matches all elements in the web page
pseudo-element selector
specified with two colon characters (::) followed by a pseudo-element, matches parts of elements. The pseudo-element selectors allow styles to apply to the first line or first letter of the text of an element or to text that is selected by the user, or allow additional content to be inserted before or after an element.
