CSS Flashcards
1
Q
What does CSS stand for?
A
Cascading Styles Sheets
2
Q
What are the two different methods or syntax for writing CSS code?
A
CSS ruleset and CSS inline style
3
Q
What is a selector? (Ruleset)
A
A selector is the beginning of the ruleset used to target the element that will be styled.
Ex:
p {
color: blue;
}
p = the selector
4
Q
What is a declaration block? (Ruleset)
A
The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).
p {
color: blue;
}
The declaration block = {color: blue:)}
5
Q
What is a declaration? (Ruleset)
A
The group name for a property and value pair that applies a style to the selected element.
p {
color: blue;
}
The declaration = color: blue;
6
Q
What is a property? (Ruleset)
A
The first part of the declaration that indicates the aspects of the element you want to change. For example, color, font, width, height and border.
p {
color: blue;
}
property = color
7
Q
What is a value? (Ruleset)
A
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
8
Q
Style attribute
A
The style attribute is used to add CSS inline styles to an HTML element.
9
Q
What do we often call the CSS code inside the <style> element in a html file?</style>
A
internal stylesheet
10
Q
How do we link html and css files?
A
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.
11
Q
What does the type selector do?
A
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.
12
Q
What is the type selector also referred to as?
A
The type selector is sometimes referred to as the tag name or element selector.
13
Q
What does the universal selector do?
A
The universal selector selects all elements of any type. The universal selector uses the * character
* {
font-family: Verdana;
}
14
Q
What is a common way for selecting an element when working with html and css?
A
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 {
}
15
Q
How can we add multiply classes to an html element?
A
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’
16
Q
What do we use to when we want to give an html element its own unique style?
A
large-title {
We use the id attribute.
h1 id=’large-title’ …./h1
Important note: Greater than/less than have been removed in code above.
}
17
Q
How is the class attribute different than the id attribute?
A
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.
18
Q
What is the attribute selector?
A
Attribute selectors allow you to create rules that apply to elements that have an attribute with a specific value.
19
Q
What is one advantage of using the attribute selector compared to class or id?
A
When we use the attribute selector we do not need to write any new code (new html markup- id or class)
20
Q
What are pseudo-class selectors?
A
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.
21
Q
:hover
A
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.
22
Q
:active
A
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.
23
Q
:focus
A
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.
24
Q
:visited
A
Visited represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
25
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.
26
What is specificity?
Specificity is the order by which the browser decides which CSS styles will be displayed.
27
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.
28
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.
29
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.
30
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.
31
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.
32
font-family property
The font-family property is used to change the typeface on your webpage.
33
What should you keep in mind when setting the font on your web page?
1. The font must be installed on the users computer or downloaded with the site.
2. 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
34
font-size property
We use the font-size property to change the size of text on the web page.
35
font-weight property
The font-weight property controls how bold or thin text appears.
36
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.
37
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.
38
color property
The color property styles an element’s foreground color.
39
background-color property
The background-color property styles an element’s background color.
40
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.
41
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');
}
42
!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;
}
43
What is the box model?
All elements on a web page are interpreted by the browser as “living” inside of a box.
44
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.
45
width and height (box model)
The width and height of the content area.
46
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.
47
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;
}
48
Margin (box model)
The amount of space between the border and the outside edge of the element.
49
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.
50
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.
51
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.
52
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.
53
What is the default border in CSS?
medium, none, color Where color is the current color of the element.
54
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.
55
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%;
}
56
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
57
What is a shorthand property?
A shorthand property is a declaration that uses multiple properties as values.
58
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.
59
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;
}
60
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;
}
61
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;
}
62
How does margin shorthand work?
Margin shorthand uses all of the same syntax as padding shorthand (4 values, 3 values, 2 values)
63
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.
64
What does the 0 auto syntax (margin: 0 auto) 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.
65
What are the top and bottom margins also called?
vertical margins
66
What are the left and right margins also called?
horizontal margins
67
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.
68
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.
69
How can you limit the minimum and maximum height of an element?
Using the min-height and max-height properties.
70
overflow property
The overflow property controls what happens to content that spills, or overflows, outside its box.
71
What are the most common values for the overflow property?
1. display
2. scroll
3. hidden
72
What is the hidden value for the overflow property?
The overflow value will allow any content that overflows will be hidden from view.
73
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.
74
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.
75
What are user agent stylesheets?
Default stylesheets the major browser have. In this case, the term user agent is a technical term for the browser.
76
How can developers reset the default stylesheet values?
By using the code below, which resets the default margin and padding values of all HTML elements. It is often the first CSS rule in an external stylesheet.
Note that both properties are set to 0. When these properties are set to 0, they do not require a unit of measurement
* {
margin: 0;
padding: 0;
}
77
What does the box-sizing property control?
It controls the type of box model the browser should use when interpreting a web page.
78
What is the default value for the box -sizing property?
content-box
79
How can we reset the entire box model and specify a new one?
By setting the box-sizing property to border-box.
80
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).
81
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.
82
How can we change the default position of an element?
We can change the default position of an element by using the position property.
83
What are the five values for the position property?
static, relative, absolute, fixed, sticky
84
What is the default value for the position property?
static
85
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.
86
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;
87
What type of values can you use for the offset property (related to size)?
Pixels, rem, percentages
Ex:
postion: relative:
top: 50px;
left: 50px;
88
Does relative positioning affect the positioning of other elements?
no
89
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.
90
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;
}
91
What's a website feature that commonly uses the fixed value for position?
Navigation bars
92
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)
93
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)
94
What type of values does the z-index property accept?
integers
95
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)
96
What are three values for the display property?
inline, block, inline-block
97
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.
98
What can we not alter with inline elements?
We can not alter the size of inline elements (height and width)
99
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;
}
100
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).
101
What is the default height for block-level elements?
Unless we manually change it, they are the height necessary to contain their content.
102
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.
103
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.
104
What are the best examples of default inline-block elements?
images
105
What is the float property commonly used for?
The float property is commonly used for wrapping text around an image.
106
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.
107
What should we include to make sure the float property is actually visible?
A specified width
108
What is the clear property used for?
The clear property specifies how elements should behave when they bump into each other on the page.
109
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.
110
What are the three ways we can describe colors in CSS?
1. Named colors — English words that describe colors, also called keyword colors
2. RGB — numeric values that describe a mix of red, green, and blue
3. HSL — numeric values that describe a mix of hue, saturation, and lightness
111
What is the foreground color?
Foreground color is the color that an element appears in.
112
What does the color property do?
The color property styles an element’s foreground color.
113
What does the background-color property do?
The background-color property styles an element’s background color.
114
What do the characters in a hex color represent?
The characters represent values for red, blue and green.
115
What do hex colors begin with?
A hex color begins with a hash character (#)
116
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”
117
How many digits does the hexadecimal system have?
16 (0-15)
118
How are RGB colors and hex colors different?
RGB colors use decimal numbers instead of hexadecimal numbers.
119
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.
120
What does the syntax for a RGB color look like?
h1 {
color: rgb(143, 188, 143);
}
121
What does HSL stand for?
hue-saturation-lightness color scheme
122
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)
123
What is the syntax for a HSL color?
h1 {
color: hsl(120, 60%, 70%);
}
124
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.
125
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.
126
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.
127
What's a major benefit of HSL colors?
HSL makes it easy to adjust colors (change the lightness, saturation, or hue).
128
What does opaque mean?
Non-transparent
129
What is opacity?
Opacity is the amount of transparency and element has.
130
How can we use opacity in the HSL color scheme?
by adding alpha (a) at the end of the hsl syntax (hsla)
131
What is the syntax for HSL with opacity?
h1 {
color: hsla(34, 100%, 50%, 0.1);
}
132
What is alpha?
Alpha or opacity is a decimal number from 0 to 1.
0 = completely transparent
1 = opaque
0.5 = half transparent
133
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);
}
134
What can alpha (opacity) not be used with?
Named colors
135
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).
136
What is the named color keyword for zero opacity and what is it's syntax?
transparent
Syntax:
h1 {
color: transparent;
}
137
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
138
What property do we learn to change the font?
font-family
h1 {
font-family: Arial;
}
139
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';
}
140
What are web safe fonts?
Fonts that appear the same across all browsers and operating systems.
141
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';
}
142
What's a fall back font?
Web safe fonts that can be used if your preferred font is not available.
143
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.
144
What keywords can also be used as a final fallback font if nothing else in the font stack is available.
Serif and Sans-Serif
145
What keyword values can the font-weight property take?
1. bold: Bold font weight.
2. normal: Normal font weight. This is the default value.
3. lighter: One font weight lighter than the element’s parent value.
4. bolder: One font weight bolder than the element’s parent value
146
What's the range for numerical values that the font-weight property can take?
Numerical values can range from 1 (lightest) to 1000 (boldest)
147
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
148
font-weight syntax with numerical values
.left-section {
font-weight: 700;
}
149
font-weight syntax with keyword values
.right-section {
font-weight: bold;
}
150
How can you italicize text using css?
You can italicize text with the font-style property.
151
What is the syntax for italicize? (CSS)
h3 {
font-style: italic;
}
152
How can we make text appear in all uppercase or lowercase?
By using the text-transform property?
153
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
154
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.
155
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.
156
What is the syntax used for setting the horizontal spacing between the individual characters in an element?
p {
letter-spacing: 2px;
}
157
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.
158
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.
159
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.
160
What does the word-spacing property do?
The word spacing property sets the space between words.
161
What does the line-height property do?
The line-height property sets how tall we want each line containing our text to be.
162
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.
163
What is the syntax for line-height?
p {
line-height: 1.4;
}
164
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)
165
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
166
How do you use Google Fonts?
1. Go to Google Fonts online.
2. Select the font you want.
3. In the list of style variations pick the style you prefer.
4. Click “+ Select this style”
5.Copy the provided element, and paste it into the element inside index.html.
167
What is @font-face?
The at @font-face ruleset can be used to add fonts to the CSS stylesheet.
168
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)
169
What should we include with our @font-face rule to ensure compatibility on all browsers?
We should include TTF, WOFF, and WOFF2 formats
170
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.
171
Where should we define the @font-face ruleset?
at the top of your CSS stylesheet.
172
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.
173
What is the syntax for using the @font-face ruleset once it is defined?
p {
font-family: 'MyParagraphFont', sans-serif;
}
174
What is the difference between CSS ruleset and a CSS rule?
There is no difference - both mean a style rule, which is a qualified rule that associates a selector list with a list of property declarations and possibly a list of nested rules in CSS.
175
Name one way of selecting by type and/or attribute values.
One way is by using type[attribute*=value]. In short, this code selects an element where the attribute contains any instance of the specified value.
176
What are pseudo-classes in CSS?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.
177
What is overflow-x property?
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.
178
What is overflow-y property?
The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.
179
Explain the visibility property and give its three possible values.
Elements can be hidden from view with the visibility property.
The visibility property can be set to one of the following values:
hidden — hides an element.
visible — displays an element.
collapse — collapses an element.
180
What’s the difference between display: none and visibility: hidden?
An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.
181
What is the difference between the default box model and the new border-box model?
In the default box model, box dimensions are affected by border thickness and padding, the border-box model is not affected by border thickness or padding.
182
How do you implement the new box model?
* {
box-sizing: border-box;
}
183
What is the cursor property?
The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
184
Name main states for links.
Links have four main states: normal (not clicked), hover, active (clicked), and visited. These four states have associated CSS pseudo-classes: :link, :hover, :active, and :visited. These four states can be used to give a full range of visual feedback to users about the status of their link interaction.
185
What is skeuomorphism?
The concept of UI elements that replicate or imitate real-life counterparts.
186
What is flat design?
Flat design is an alternative approach to skeuomorphism that embraces the fact that computer interfaces do not necessarily need to model real-life interfaces. As users grow more familiar with digital displays and interfaces, designers have felt less need to model physical interactions and instead rely on other signifiers to indicate interactive elements. To generalize, flat design uses simplicity and lack of clutter for its UI elements.
187
What is the proper order of link states?
The proper order of these rules is:
:link
:visited
:hover
:active
188
What is + in CSS?
The + is called the adjacent sibling combinator; it 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.
189
::before
The ::before part of this selector creates a pseudo-element. The ::before pseudo-element is often used with the content property, to add content that will be displayed just before the selected element.
190
What are the breadcrumb types?
There are three major types of breadcrumbs:
Location
Attribute
Path
191
What are location breadcrumbs?
Location based breadcrumbs are based on where you are with respect to the navigation structure of the website. In our previous shoe shopping example, the first three li elements are location based. We are in the “shoes” section of the website, which is contained within the “fashion” section, which is contained within the “shopping” section.
192
What are attribute breadcrumbs?
Attribute based breadcrumbs are based on the attributes of the page or product that you are browsing. In our previous example, the final two li elements are attribute based. We are shopping for shoes that are “flats” and “brown”. Since the order of these attributes is not prescriptive, you’ll see some sites display these at the same level in the UI. If you want to allow users to remove attributes, provide an (x) button or similar to indicate they can be removed.
193
What are path breadcrumbs?
Breadcrumbs can be based on a user’s unique path through the site. For example, if they landed on the home page, browsed to the about page and finally the registration page, their breadcrumb trail may look like:
Home > About > Register
Note that this breadcrumb trail will be different for each user and each visit. For even mildly complex sites, the number of steps will become large. To simplify the display, the beginning of the trail is often abbreviated:
... > About > Register
194
What does a > symbol means in css when used with selecto?
The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent.
P > SPAN means applying the style that follows to all SPAN tags that are children of a P tag.
Note that "child" means "immediate descendant", not just any descendant. P SPAN is a descendant selector, applying the style that follows to all SPAN tags that are children of a P tag or recursively children of any other tag that is a child/descendant of a P tag. P > SPAN only applies to SPAN tags that are children of a P tag.
195
What does a + symbol means in css?
The + sign is best known as an adjacent sibling combinator, which means it separates two selectors, then combines the second selector with other elements which are placed immediately after the chosen selector. The + sign selector is used when the user wants to have the same styling for different elements.
196
Compound selector
Compound selector
A sequence of simple selectors that are not separated by a combinator. A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.
In a compound selector, the type selector or a universal selector in a compound selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. Since whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors in a compound selector.
Example: a#selected {...}
