CSS Flashcards
When is internal css styling useful?
Internal css styling is useful when applying styles to one html document.
Example:
<style>
html {
background: red;
}</style>When is inline css useful?
Inline css is useful when adding css styling to a single element on your html page. Not good for adding styling to several elements.
What are the three ways to add css to an html website?
- Inline
<tag></tag>
- Internal
<style>
css</style>
- External
<link></link>
What does CSS stand for?
Cascading Styles Sheets
What are named colors?
The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen.</named-color>
Example:
color: rebeccapurple;
What are the two different methods or syntax for writing CSS code?
CSS ruleset and CSS inline style
What is a selector? (Ruleset)
A selector is the beginning of the ruleset used to target the element that will be styled.
Ex:
p {
color: blue;
}
p = the selector
What is a declaration block? (Ruleset)
The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).
p {
color: blue;
}
The declaration block = {color: blue:)}
What is a declaration? (Ruleset)
A declaration is what we call the property and value that we want to add to an element. The property is what we want to change and the value is how we want to change it.
p {
color: blue;
}
The declaration = color: blue;
What is a property? (Ruleset)
A property specifies the aspects of the element you want to change. For example, color, font, width, height and border.
p {
color: blue;
}
property = color
What is a value? (Ruleset)
The second part of the declaration. Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color you want the text in these elements to be.
p {
color: blue;
}
value = blue
Style attribute
The style attribute is used to add CSS inline styles to an HTML element. It is an attribute available to all elements (global attribute).
What do we often call the CSS code inside the <style> element in a html file?</style>
internal stylesheet
How do we link html and css files?
use the link element to link HTML and CSS files together. The link element must be placed within the head of the HTML file. It is a self-closing tag and requires the following attributes:
- href
- rel -this attribute describes the relationship between the HTML file and the CSS file. Because we are linking to a stylesheet, the value should be set to stylesheet.
What does the type selector do?
A selector is used to target the specific HTML element(s) to be styled by the declaration. The type selector matches the type of the element in the HTML document.
What is the type selector also referred to as?
The type selector is sometimes referred to as the tag name or element selector.
What are four ways we can represent font size in css?
Pixels, points, em (pronounced “m”), rem.
How is 1em defined?
1 em is defined as the full width of the letter M. In practical terms, 1 em is going to be 100 percent of the parent size.
If the parent element is 20px than 1em would be 20px. If the parent element is 20px, a child element set to 2 em would be 40 px (twice as much).
How is rem different from em?
rem is a relative size just like em but instead of being relative to the parent it is relative to the root of your html file (which is usually an html element).
When we are setting the font size should we use rem or em and why?
It’s recommended to use rem because when you have different elements embedded in others it can become difficult to identify the parent elements.
What does the universal selector do?
The universal selector selects all elements of any type. The universal selector uses the * character
* {
font-family: Verdana;
}
What is a common way for selecting an element when working with html and css?
Using the class attribute.
Ex:
p class=’brand’ Sole Shoe Company /p
Important note: Greater than/less than have been removed in code above.
.brand {
}
How can we add multiply classes to an html element?
We can add multiple classes to an HTML element’s class attribute by separating them with a space.
Ex:
.green {
color: green;
}
.bold {
font-weight: bold;
}
h1 class=’green bold’
What do we use to when we want to give an html element its own unique style?
large-title {
We use the id attribute.
h1 id=’large-title’ …./h1
Important note: Greater than/less than have been removed in code above.
}
How is the class attribute different than the id attribute?
The class attribute accepts multiple values and can be used broadly throughout an HTML document. The element’s id can only have a single value and can only be used once per page.
What is the attribute selector?
Attribute selectors are CSS selectors that match elements based on their attributes. This can be an attribute alone, such as [type], or it can be an attribute and value combination, such as [type=checkbox] or [for=”email”].
Example:
p[draggable] {
color: red
}
<p>Drag Me</p>
What is one advantage of using the attribute selector compared to class or id?
When we use the attribute selector we do not need to write any new code (new html markup- id or class)
What are pseudo-class selectors?
Pseudo-class selectors allow you to change the appearance of elements when a user is interacting with them.
For example: When you’re filling out a form and the submit button is grayed out and disabled. But when all of the fields have been filled out, the button has color showing that it’s active.
:hover
This is applied when a user hovers over an element with a pointing device such as a mouse. Commonly used to change the appearance of links and buttons when a user places their cursor over them.
:active
Active is applied when an element is being activated by a user (a button being pressed or link being clicked). Makes the user “feel” like it is being pressed.
:focus
This is applied when an element has focus. Any element that you can interact with (link, form) can have focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s tab key.
:visited
Visited represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
Why should ID’s be used sparingly?
ID’s should be used sparingly because IDs override the styles of types and classes. We should only use them on elements that need to always appear the same.
What is specificity?
Specificity is the order by which the browser decides which CSS styles will be displayed.
What are the four broad categories when we are determining the level of importance for a css rule?
Position, specificity, type, and importance.
position- is the rule in a higher or lower position in the css relative to other rules.
Example: li {
color: red;
color: blue:
} (blue will be shown - the lower/the more important)
specificity - how specific a selector is ( type, class, attribute, id).
type - external, internal, inline styling. (inline is most important)
importance - using the important keyword. Ex:
h1 {
color: red;
color: green !important; (must have space in between green and important.)
What is a best practice in regards to specificity?
A best practice in CSS is to style elements while using the lowest degree of specificity so that if an element needs a new style, it is easy to override.
It’s best to style with a type selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.
What is chaining?
Chaining is when we combine multiply selectors in the CSS stylesheet.
For example:
h1.special {
}
This code will only affect the h1 element that has the class special. If we had a p element with the class special it would not be styled.
What is the descendant combinator?
The descendant combinator is a selector that allows us to select elements that are nested within other elements.
Example:
.main-list li {
}
This will select the element with the class main-list (ul) and then the descendant element (li). Must include a space between the class name and descendant element.
How can we increase the specificity of a CSS selector?
We can add more specificity by adding more than one tag, class, or ID to a CSS selector.
How do you add CSS styles to multiple selectors all at once?
We can separate the selectors by a comma to apply the same style to many selectors at once.
font-family property
The font-family property is used to change the typeface on your webpage.
What should you keep in mind when setting the font on your web page?
- The font must be installed on the users computer or downloaded with the site.
- Use web safe fonts -a group of fonts supported across most browsers and operating systems.
3.Unless you are using web safe fonts, the font you choose may not appear the same on all browsers and operating systems.
4.When the name of a typeface consists of more than one word, it’s a best practice to enclose the typeface’s name in quotes
Example: “Times New Roman”
What must we make sure we do when we are setting an elements position to absolute?
If you want a specific element positioned relative to another element, you must make sure to set the ancestor’s (what we are positioning it to) position to relative. If we do not do this then the element will be positioned relative to the document (top left corner).
font-size property
We use the font-size property to change the size of text on the web page.
font-weight property
The font-weight property controls how bold or thin text appears.
Why does the font-weight value “normal” exist?
If we were to make all of the text bold, we could use the normal value to make a specific part of the text not bold.
text-align property
To align text we can use the text-align property. The text-align property will align text to the element that holds it, otherwise known as its parent.
color property
The color property styles an element’s foreground color.
background-color property
The background-color property styles an element’s background color.
opacity
Opacity is the measure of how transparent an element is. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible.
The opacity property can be used to make elements fade into others for a nice overlay effect.
background-image
The background-image property will set the element’s background to display an image. The value provided is a url.
Ex:
.main-banner {
background-image: url(‘images/mountains.jpg’);
}
!important
!important can be applied to specific declarations, instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used.
One justification for using !important is when working with multiple stylesheets.
Ex:
p {
color: blue !important;
}
What is the box model?
All elements on a web page are interpreted by the browser as “living” inside of a box.
What does the box model include?
The model includes:
1.The content area’s size (width and height)
2.The element’s padding, border, and margin.
width and height (box model)
The width and height of the content area.
Padding (box model)
The amount of space between the content area and the border. Padding is like the space between a picture and the frame surrounding it.
Border (box model)
The thickness and style of the border surrounding the content area and padding. Like a frame around a painting.
Borders can be set with a specific width, style, and color
Ex:
p {
border: 3px solid coral;
}
How can we further modify a border once we define it?
We can add more specific rules in the next line of code.
Ex:
Border: 30px solid black;
Border-top: 0px;
Margin (box model)
The amount of space between the border and the outside edge of the element.
What happens when the width and height of an element are set in pixels?
It will be the same size on all devices — an element that fills a laptop screen will overflow a mobile screen.
What are the different parameters for a border’s width?
A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
What are the different parameters for a border’s style?
Web browsers can render any of 10 different styles. These styles include: none, hidden, dotted, dashed, double, groove, ridge, inset, outset, and solid.
What are the different parameters for a border’s color?
The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
What is the default border in CSS?
medium, none, color Where color is the current color of the element.
How can you modify the corners of an element’s border box?
You can modify the corners of an element’s border box with the border-radius property.
How can you create a border that is a perfect circle?
You can create a border that is a perfect circle by first creating an element with the same width and height, and then setting the radius equal to half the width of the box, which is 50%.
Ex:
div.container {
height: 60px;
width: 60px;
border: 3px solid blue;
border-radius: 50%;
}
How can you be more specific about the amount of padding on each side of a box’s content?
You can use the following properties:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
What is a shorthand property?
A shorthand property is a declaration that uses multiple properties as values.
What is padding shorthand?
Padding shorthand allows you to specify all of the padding properties as values on a single line.
You can specify these properties using 4, 3, or 2 values.
Padding shorthand with four values
The amount of padding for each section is specified in a clockwise rotation: top, right, bottom, left.
Example:
p.content-header {
padding: 6px 11px 4px 9px;
}
Padding shorthand with three values
This is used when the amount of padding is equal for the left and right sides. The first value sets the padding-top value (5px), the second value sets the padding-left and padding-right values (10px), and the third value sets the padding-bottom value (20px).
Example:
p.content-header {
padding: 5px 10px 20px;
}
Padding shorthand with two values
This shorthand is used when the top and bottom sides are equal and the left and right sides are equal. The first value sets the padding-top and padding-bottom values (5px), and the second value sets the padding-left and padding-right values (10px).
Example:
p.content-header {
padding: 5px 10px;
}
What is div short for and why do we use it?
Div is short for content division element and we use when we want to group different bits of content together (style it or lay it out together).
We can put as many elements as we want in between or div elements.
How does margin shorthand work?
Margin shorthand uses all of the same syntax as padding shorthand (4 values, 3 values, 2 values)
How can you center content using the margin property?
You can center content using the margin property by making sure you set a width and using the syntax 0 auto for the margin property.
What does the 0 auto syntax do when using the margin property?
The 0 sets the top and bottom margins to 0 pixels. The auto value tells the browser to adjust the left and right margins until the element is centered within its containing element.
What are the top and bottom margins also called?
vertical margins
What are the left and right margins also called?
horizontal margins
What is one big difference between vertical and horizontal margins?
Vertical margins collapse and horizontal margins do not. If we have two elements with the top margin of one set to 20px and the bottom margin of the other set to 30px, the margin will only be dependent on the larger margin (the margin will be 30px).
Horizontal margins will combine. Element 1 margin-right is 30 px and Element 2 margin-left is 30 px, total space between them will be 60px.
Why do we use min-width and max-width properties?
Content, like text, can become difficult to read when a browser window is narrowed or expanded. These two properties ensure that content is legible by limiting the minimum and maximum widths of an element.
How can you limit the minimum and maximum height of an element?
Using the min-height and max-height properties.
overflow property
The overflow property controls what happens to content that spills, or overflows, outside its box.
What are the most common values for the overflow property?
- hidden
- scroll
- visible
What is the hidden value for the overflow property?
The overflow value will allow any content that overflows will be hidden from view.
What is the scroll value for the overflow property?
The scroll value will add a scrollbar to the element’s box so that the rest of the content can be viewed by scrolling.
What is the visible value for the overflow property?
The visible value will allow the overflow content will be displayed outside of the containing element.
What are user agent stylesheets?
Default stylesheets the major browser have.
How can developers reset the default stylesheet values?
What does the box sizing property control?
It controls the type of box model the browser should use when interpreting a web page.
What is the default value for the box -sizing property?
content-box
How can we reset the entire box model and specify a new one?
By setting the box sizing property to border-box.
Why is the border-box value important?
The border-box value ensures that the the height and width of the box will remain fixed. (padding and the boarder will not add to the width or height of the box).
What are block- level elements?
Block-level elements are elements that create a block the full width of their parent elements, and they prevent other elements from appearing in the same horizontal space.
How can we change the default position of an element?
We can change the default position of an element by using the position property.
What are the five values for the position property?
static, relative, absolute, fixed, sticky
What is the default value for the position property?
static
What does the relative value for the position property allow you to do?
The relative value allows you to position an element relative to its default static position on the web page.
What must you add to the position declaration?
You must add an offset property (top, bottom, left, right) to indicate where the element should be positioned on the page.
Ex:
postion: relative:
top: 50px;
left: 50px;
What type of values can you use for the offset property (related to size)?
Pixels, rem, percentages
Ex:
postion: relative:
top: 50px;
left: 50px;
Does relative positioning affect the positioning of other elements?
no
What does the absolute value for the position property allow you to do?
The absolute value allows you to position the element relative to it’s closest parent element using the offset properties.
What does the fixed value for the position property allow you to do?
fix an element to a specific position on the page (regardless of user scrolling)
Example:
header {
position: fixed;
top: 0px;
left: 0px;
}
What’s a website feature that commonly uses the fixed value for position?
Navigation bars
What does the sticky value for the position property allow you to do?
The sticky value allows an element to behave like a relatively-positioned element until it reaches a certain point and then starts behaving like a statically-positioned element (“stick at that point)
What does the z-index property control?
The z-index property controls how far back or how far forward an element should appear on the web page when elements overlap.
Note: The larger z-index with overlap the smaller index (1 vs 0 or 10 vs unidentified)
What type of values does the z-index property accept?
integers
What does the display property do?
The display property controls if an element is treated as a block or inline element and the layout used for its children (flow layout, grid or flex)
What are three values for the display property?
inline, block, inline-block
What are inline elements?
Inline elements have a box that wraps tightly around their content and only take up the amount of space necessary to display their content. They also do not require a new line after each element.
What can we not alter with inline elements?
We can not alter the size of inline elements (height and width). The default to the height and width of there content.
What happens when you set the display property to none?
It makes that element disappear.
How can we get block elements to be displayed as inline elements?
We can make any element an inline element by using the display property.
Ex:
h1 {
display: inline;
}
What are block-level elements?
Block-level elements are elements that fill the entire width of the page by default (width can be changed using css).
What is the default height for block-level elements?
Unless we manually change it, they are the height necessary to contain their content.
What are some examples of block-level elements?
headings, , paragraphs, divs, footer, address, article, aside, block quote, details, dialogue, description list, field set, figure caption, figure, etc.
What does the inline-block element allow?
The inline-block element allows you to combine features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties.
What are the best examples of default inline-block elements?
images
What is the float property commonly used for?
The float property is commonly used for wrapping text around an image.
The float property is often set using what values?
left - moves, or floats, elements as far left as possible.
right - moves elements as far right as possible.
What should we include to make sure the float property is actually visible?
A specified width
What is the clear property used for?
The clear property specifies how elements should behave when they bump into each other on the page.
What are the values the clear property can take?
left- left side of element can not touch with any other element in the parent element)
right- right side of element can not touch with any other element in the parent element
both - neither side of the element can touch with any other element in the parent element
none—the element can touch either side.
What are the three ways we can describe colors in CSS?
- Named colors — English words that describe colors, also called keyword colors
- RGB — numeric values that describe a mix of red, green, and blue
- HSL — numeric values that describe a mix of hue, saturation, and lightness
What is the foreground color?
Foreground color is the color that an element appears in.
What does the color property do?
The color property styles an element’s foreground color.
What does the background-color property do?
The background-color property styles an element’s background color.
What do the characters in a hex color represent?
The characters represent values for red, blue and green.
What do hex colors begin with?
A hex color begins with a hash character (#)
What is hex short for and what is it?
Hexadecimal. Hexadecimal is a number system that has sixteen digits, 0 to 9 followed by “A” to “F”
How many digits does the hexadecimal system have?
16 (0-15)
How are RGB colors and hex colors different?
RGB colors use decimal numbers instead of hexadecimal numbers.
What do each of the three values in a RGB color represent?
Each of the three values represents a color component, and each can have a decimal number value from 0 to 255.
The first number represents the amount of red, the second is green, and the third is blue.
What does the syntax for a RGB color look like?
h1 {
color: rgb(143, 188, 143);
}
What does HSL stand for?
hue-saturation-lightness color scheme
What do each of the three values in a HSL color represent?
1st number -represents the degree of the hue (can be between 0 and 360)
2nd number - saturation (percentages)
3rd number- lightness (percentages)
What is the syntax for a HSL color?
h1 {
color: hsl(120, 60%, 70%);
}
What is hue?
Hue refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at 360.
What is saturation?
Saturation is the intensity or purity of the color. The saturation increases towards 100% as the color becomes richer. The saturation decreases towards 0% as the color becomes grayer.
What is lightness in terms of HSL color?
Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway.
Sliding towards 100% brings closer to white. Sliding down towards 0% brings closer to black.
What’s a major benefit of HSL colors?
HSL makes it easy to adjust colors (change the lightness, saturation, or hue).
What does opaque mean?
Non-transparent
What is opacity?
Opacity is the amount of transparency and element has.
How can we use opacity in the HSL color scheme?
by adding alpha (a) at the end of the hsl syntax (hsla)
What is the syntax for HSL with opacity?
h1 {
color: hsla(34, 100%, 50%, 0.1);
}
What is alpha?
Alpha or opacity is a decimal number from 0 to 1.
0 = completely transparent
1 = opaque
0.5 = half transparent
How can we add transparency to a RGB value.
by adding alpha at the end of the rgb syntax (rgba).
Example:
h1 {
color: rgba(234, 45, 98, 0.33);
}
What can alpha (opacity) not be used with?
Named colors
How can we add opacity to hex values?
By adding a two-digit hexadecimal value to the end of the six-digit representation (#52BC8280), or a one-digit hexadecimal value to the end of the three-digit representation (#F003)
Hex opacity ranges from 00 (transparent) to FF (opaque).
What is the named color keyword for zero opacity and what is it’s syntax?
transparent
Syntax:
h1 {
color: transparent;
}
When can hex colors be abbreviated?
Hex colors can be abbreviated when both characters of all three values colors are repeated.
Example:
#0000ff can be abbreviated by #00f
What property do we learn to change the font?
font-family
h1 {
font-family: Arial;
}
What should we use when using a typeface with multiple words, like Times New Roman?
We should use quotation marks (‘ ‘) to group the words together.
Example:
h1 {
font-family: ‘Times New Roman’;
}
What are web safe fonts?
Fonts that appear the same across all browsers and operating systems.
What is a font stack?
A font stack usually contains a list of similar-looking fonts.
Example:
h1 {
font-family: Caslon, Georgia, ‘Times New Roman’;
}
What’s a fall back font?
Web safe fonts that can be used if your preferred font is not available.
What is the difference between Serif and Sans-serif fonts?
Serif fonts have extra details (feet at the bottom) on the ends of each letter, as opposed to Sans-Serif fonts, which do not have the extra details.
What keywords can also be used as a final fallback font if nothing else in the font stack is available.
Serif and Sans-Serif
What keyword values can the font-weight property take?
- bold: Bold font weight.
- normal: Normal font weight. This is the default value.
- lighter: One font weight lighter than the element’s parent value.
- bolder: One font weight bolder than the element’s parent value
What’s the range for numerical values that the font-weight property can take?
Numerical values can range from 1 (lightest) to 1000 (boldest)
What is the common practice when using numerical values for the font-weight property?
Common practice to use increments of 100.
400 = normal
700 = bold
font-weight syntax with numerical values
.left-section {
font-weight: 700;
}
font-weight syntax with keyword values
.right-section {
font-weight: bold;
}
How can you italicize text using css?
You can italicize text with the font-style property.
What is the syntax for italicize? (CSS)
h3 {
font-style: italic;
}
How can we make text appear in all uppercase or lowercase?
By using the text-transform property?
What is the syntax for making text appear all uppercase or lowercase?
h1 {
text-transform: uppercase;
}
*we can also replace the uppercase keyword with lowercase
Why should we use CSS to make text appear in all uppercase/lowercase and not simply type it in our html file?
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. (breaking news)
It also helps avoiding uppercase text in the HTML file, which could make code difficult to read.
What does the letter-spacing property do?
The lettering-spacing property allows us to set the horizontal spacing between the individual characters in an element.
What is the syntax used for setting the horizontal spacing between the individual characters in an element?
p {
letter-spacing: 2px;
}
What are the values that the letter-spacing property can take?
The letter-spacing property takes length values in units, such as 2px or 0.5em.
Is it common to increase the spacing between words and characters in words?
No, but it may help enhance the readability of bolded or enlarged text.
What value is recommended for word spacing?
For word spacing, using em values are recommended because the spacing can be set based on the size of the font.
What does the word-spacing property do?
The word spacing property sets the space between words.
What does the line-height property do?
The line-height property sets how tall we want each line containing our text to be.
What type of values can the line-height property take?
Line height values can be a unitless number, such as 1.2, or a length value, such as 12px, 5% or 2em.
What is the syntax for line-height?
p {
line-height: 1.4;
}
What value is preferred for line-height?
Generally, the unitless value is preferred since it is responsive based on the current font size. (Changing the font-size will will automatically readjust the line height)
How can we use font services like Adobe fonts, Google fonts, and fonts.com?
We can use the services by using the link element. These services host fonts that you can link to from your HTML document
How do you use Google Fonts?
- Go to Google Fonts online.
- Select the font you want.
- In the list of style variations pick the style you prefer.
- Click “+ Select this style”
5.Copy the provided <link></link> element, and paste it into the <head> element inside index.html.
What is @font-face?
The at @font-face ruleset can be used to add fonts to the CSS stylesheet.
What are the different file formats for web fonts?
OTF (OpenType Font)
TTF (TrueType Font)
WOFF (Web Open Font Format)
WOFF2 (Web Open Font Format 2)
What should we include with our @font-face rule to ensure compatibility on all browsers?
We should include TTF, WOFF, and WOFF2 formats
Why should we include different formats with our @font-face rule?
The different formats are a progression of standards for how fonts will work with different browsers, with WOFF2 being the most progressive.
Where should we define the @font-face ruleset?
at the top of your CSS stylesheet.
What is the syntax for defining the @font-face ruleset?
@font-face {
font-family: ‘MyParagraphFont’;
src: url(‘fonts/Roboto.woff2’) format(‘woff2’),
url(‘fonts/Roboto.woff’) format(‘woff’),
url(‘fonts/Roboto.ttf’) format(‘truetype’);
}
*font-family property is used to set a custom name for the downloaded font.
What is the syntax for using the @font-face ruleset once it is defined?
p {
font-family: ‘MyParagraphFont’, sans-serif;
}
nth-of-type(even)
last-of-type
border-collapse property
How can you add space in between the cells of a table
What are signifiers?
Signifiers are indicators that offer clues about how to interact with new objects or situations.
Ex: Teacups with handles. Handles signify to the user that they can pick up the cup.
What should you not do if you are using underline value for links in website?
You should not use the underline feature in other aspects of the website (only for links).
Why are html title attributes helpful?
The title attribute is useful as additional context or advisory text for clickable elements.
What is a tooltip?
A tooltip is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element.
Also known as a infotip or hint.
How do you add a tooltip to an element?
You can easily add a tooltip to an element by adding a title attribute to the front tag.
What should hover states not be used for?
Hover state styling should never be used as the sole indication that something is a link.
cursor property
The cursor property changes the default appearance to a pointing hand.
a {
cursor: pointer;
}
What is the correct ordering of link state pseudo-class rules?
- :link
- :visited
- :hover
- : active
What is skeuomorphism?
Skeuomorphism is the concept of UI elements that replicate or imitate real-life counterparts
What is flat design
Flat design is an alternative approach to skeuomorphism which embraces the fact that computer interfaces do not necessarily need to model real-life interfaces.
What does the box-shadow property do?
The box-shadow property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Why is button text important in flat designs?
There is an increase chance that users will be confused with flat designs. Therefore, we should pair buttons with specific, descriptive labels. Ex: Click here vs submit form.
What are affordances?
Potentials for interaction are collectively called the affordances of an object.
What is the function of UX patterns?
User experience (UX) patterns establish reusable solutions to common problems. Ex: handles are used on objects of all shapes, sizes, and purposes to indicate that users can initiate an action by grabbing the handle with their hand(s).
What is the difference between primary and secondary navigation?
Primary navigation system typically contains the most important links and buttons that need to be displayed on every single page of the site. While secondary navigation (or breadcrumb) navigation usually consists of a clickable list of pages or attributes that led to the current page.
Child selector
The child selector selects all elements that are the children of a specified element.
div > p {
background-color: yellow;
}
What is the adjacent sibling combinator?
The adjacent sibling combinator will only select two li‘s when they are immediately next to each other, with the same parent. The element that actually gets selected is the second element of this sibling pair.
.breadcrumb li+li::before {
content: “/”;
}
::before
::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
What are gutters?
Gutters are the negative space between each column. Gutters help in ensuring the columns don’t run together
What are four main ways to create a responsive layout?
Media queries, css grid, css flexbox, external frameworks (like bootstrap).
How does a media query work?
We replace our selector with a media query and write code within the curly braces for what should happen for screen sizes below a certain width.
Example:
@media (max-width: 600px) {
/* css code for screens below or equal to 600px wide*/
}
What is a breakpoint?
The breakpoint comes right after the @ media keyword and identifies anything at or below a certain point (like 600px) the styling stated within the curly braces should be used.
Example:
@media (max-width: 600px) {
h1 {
font-size: 15px;
}
}
What does the min-width keyword do (media query)?
The min-width keyword will run a specific block of code if the size of the screen is at or above a certain width. Opposite of max-width. Targeting bigger screens.
How can we target a specific size using media queries?
By combining minimum and maximum width to get a size in between the two.
Example:
@media (min-width: 600px) and (max-width: 900px) {
/* styles for screen between 600px and 900px */
}
We can also do the opposite:
@media (min-width: 900px) and (max-width: 600px) {
/* styles for screen between 900px and 600px */
}
What does the print keyword do when using media queries?
Allows you to use the media query to target only when your website is being printed and to give it a different layout.
syntax
@ media print (orientation: landscape) {
/* styles for landscape orientation*/
}
What are the three major components of a grid?
columns, gutters, and margins
What are rows used for?
Rows are commonly used in web designs to group content together and re-order other content to allow for more whitespace.
A row can also be used to force content away from an area that has remaining columns not used.
What are flex containers?
A flex container is an element on a page that contains flex items.
What are flex items?
Flex items are all direct child elements of a flex container
What is the syntax to make an element a flex container?
div.container {
display: flex;
}
What is the syntax for making flex containers that are also inline?
.container {
width: 200px;
height: 200px;
display: inline-flex;
}
What does the justify-content property do? (flexbox)
The justify-content property controls the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
What are the five commonly used values for the justify-content property?
- Flex start : all items will be positioned in order, starting from the left of the parent container
- Flex end: all items will be positioned in order, with the last item starting on the right side of the parent container.
- Center: all items will be positioned in order, in the center of the parent container.
- Space around: items will be positioned with equal space before and after each item, resulting in double the space between elements.
- Space between: items will be positioned with equal space between them, but no extra space before the first or after the last elements.
How do we space flex items vertically?
We can align flex items vertically within the container using the align-items property.
What is the syntax for the align-items property?
.container {
align-items: baseline;
}
What are five commonly used values for the align-items property?
- flex-start — all elements will be positioned at the top of the parent container.
- flex-end — all elements will be positioned at the bottom of the parent container.
- center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
- baseline — the bottom of the content of all items will be aligned with each other.
- stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).
Describe what the flex-grow property does.
The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.
*Flex-grow is declared on items.
Describe what the flex-shrink property does.
the flex-shrink property can be used to specify which elements will shrink and in what proportions.
What is not affected by flex-grow and flex-shrink properties?
margin
What is the default value for flex-shrink?
1
What does the flex-basis property do?
flex-basis allows us to specify the width of an item before it stretches or shrinks.
What is the syntax for flex-basis?
.side {
flex-grow: 1;
flex-basis: 100px;
}
.center {
flex-grow: 2;
flex-basis: 150px;
}
What does the flex property allow you to do (shorthand)?
The flex property allows you to declare flex-grow, flex-shrink, and flex-basis all in one line.
What is the syntax for the flex property shorthand?
.big {
flex: 2 1 150px;
}
.small {
flex: 1 2 100px;
}
Note: the values declared are flex-grow, flex-shrink, and flex-basis (in that order).
Is there a way to set flex-shrink and flex-basis with a 2 value shorthand?
No
What is the shorthand for a flex-basis of 0, a flex-grow of 1, and a flex-shrink of 1?
flex: 1
What does the flex-wrap property allow us to do with our content?
The flex-wrap property allows flex items to move to the next line when necessary.
What are the three values that the flex-wrap property can use?
- wrap — child elements of a flex container that don’t fit into a row will move down to the next line.
- wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed
- nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
What does the align-items property do?
The align-items property controls how flex items are laid out along the cross axis on the current line. It is like the justify-content version for the cross-axis.
What does the align-content property do?
The align-content property aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
Note: Only works on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse.
What are some common align-content values?
flex-start, flex-end, center, space-between, space-around, and stretch.
What properties does the main axis use to position flex items?
justify-content
flex-wrap
flex-grow
flex-shrink
What properties does the cross axis use to position flex items?
align-items
align-content
What property do we use to switch the main axis and cross axis?
flex-direction property
What is the default direction for flex-direction?
row
What is the syntax for flex-direction?
.container {
display: flex;
flex-direction: column;
width: 1000px;
}
What are the four values that flex-direction can accept?
- row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
- row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
- column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
- column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner
What does the flex-flow property do?
the shorthand flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.
How can flex containers be nested inside of each other?
We can nest flex containers into flex containers by declaring display: flex or display: inline-flex for children of flex containers.
How can we select all of the direct children inside of an element?
We can combine the child combinator with the universal selector.
Example:
.container > * {
flex-basis: 100px;
}
How does Flexbox prioritize the size of Flexbox items?
min/max width –> flex-basis–> width (element height or width) –> content width
What is the default max-width and min-width that is set when using Flexbox?
The default max-width is all of the content lined up and the default min-width is the longest word in the content.
What’s an easy way to set something (an element or flex container) to the middle of the screen?
Using Flexbox, setting justify-content to center setting align-items to center, and setting height to 100vh (vertical height).
What is the difference between Flexbox and Grid?
Flexbox is a tool that helps you align content along a one dimensional line. Grid is a tool for laying out content along a two dimensional grid.
Many times you will use a combination of these two tools alongside floats or bootstrap.
What is the syntax for creating a grid?
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1 fr 1fr;
gap: 10px;
}
What does 1fr and 2fr mean when setting the value for the template columns and template rows property?
They are fractional ratios of 1: 2 and 1:1. Which means if the first column is 100px wide then the second column would be 200px wide. Or the rows would each be 100px long.
How can we combine grid-template-columns and grid-template rows in one property?
We can use the grid-template property.
Example:
grid-template: 100px 200px/ 400px 800px;
Rows first and then columns
What does the auto keyword do when being used as a property for grid?
The auto keyword allows each column to try to fit to 100% of the available space (horizontal space). Setting auto for rows will adjust the vertical height to be able to fit the content.
Example:
.container {
display: grid;
grid-template -rows: 100px auto;
grid-template-columns: 200px auto;
How can we limit the size of columns within our grid?
We can use minmax value for our grid-template-column property.
Example
.grid-container {
display: grid;
grid-template-row: 200px 400px;
grid-template-column: 200px minmax(400px, 800px);
}
How can we easily repeat a size when using grid columns and rows?
By using the repeat function.
Example:
grid-container {
display: grid;
grid-template-row: repeat(2, 200px);
grid-template-column: repeat(2, 100px);
}
repeat(2, 200px) = 200px 200px;
What happens if you don’t define enough rows and columns for your elements?
Anything that gets added afterwards will get an automatic size based on its height and the existing column sizes.
What happens if you define a grid that is larger than you have items for?
Our items are fitted into our grid from the top left all the way to the bottom right. Once we’ve laid out the first row, it’s going to double back and continue along the second row.
If we don’t have any items for the other sections of our grid then it’s just not going to add them in there.
What does grid-auto-rows and grid-auto-columns do?
The grid-auto-rows/grid-auto-columns allows any new element that is added to the prefixed grid to be added with some value we determine. For example, creating some code that adds more divs in the future.
Example:
.grid-container {
display: grid
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
grid-auto-rows: 300px;
}
What are tracks?
Tracks are what we call rows and columns in css grid. (row tracks and columns tracks)
What is a grid cell?
A grid cells is what is created within the intersections of the tracks. It is the smallest unit in a grid. You can use multiple cells to create a grid item.
What is the default height for a div? How can we make the height stretch down to the bottom of the window?
The default height for a grid is the amount of vertical space equal to the content. We can make the height stretch down to the bottom of the window by using 100 viewport height.
How can we make a div span two or more columns in a grid?
By using the grid-column property and setting a value of span 2.
Example:
.cowboy {
background-color: blue;
grid-column: span 2;
}
How can we make a div span two or more rows in a grid?
By using the grid-row property and setting a value of span 2.
Example:
.cowboy {
background-color: blue;
grid-row: span 2;
}
grid-column is shorthand for what other two properties?
grid-column-start and grid-column-end
How do the negative values work when using a grid-column-start and grid-column-end?
Negative values go in the opposite direction (right to left). The negative numbers are within the grid lines.
grid-column-start: -1; —> starts at the negative 1 grid line
grid-column-end: -3 ; –> ends at the negative 3 grid line.
What’s a trick for always being able to specify the right hand most line in the grid and the left hand most line in the grid?
Using -1 for the right hand side of the grid and 1 for the left hand side of the grid.
What is the default order for elements within a grid and how can we change the order?
The default order for elements in a grid is 0. We move an element to the end of the grid by giving it a any number larger than 0.
The direction goes left to right and top to bottom.
Syntax:
grid-area: 2/1/3/3;
What does the grid-area property do?
The grid-area property specifies the area of the grid in which the element should be placed. It combines the grid-column-start, grid-column-end, grid-row-start, and grid-row-end.
What is the order for the grid-area values?
1st - grid-row-start
2nd - grid -column-start
3rd -grid-row-end
4th - grid-column-end
What’s really important to remember when using grid-area?
If you use the grid-area property for one item you must use the grid-area property for the rest of the items as well.
What are two ways to color the grid lines?
Use the border color property and have a gap of 0. Make the background color what you prefer and create a gap that shows the background color.
Example (using border):
.white-box3 {
background-color: #F0F1EC;
grid-column: span 2;
grid-row: span 2;
border-right: solid 9px black;
border-bottom: solid 9px black;
}
Example (using background color):
.container {
height: 748px;
width: 748px;
display: grid;
background-color: #000;
grid-template-columns: 320px 198px 153px 50px;
grid-template-rows: 414px 130px 155px 22px;
gap: 9px;
}
