CSS Flashcards
Describe the syntax of a CSS rule-set.
A typical CSS rule-set consists of one of more selectors which identifies the HTML elements to be styled, and the declaration block within curly braces, which contains the CSS property name(s) and property value(s), separated by a colon and completed with a semicolon. If there there are multiple property-value sets, they should be separated by semicolons.
In CSS, how do you select elements by their class attribute?
.class-name
In CSS, how do you select elements by their type?
Using just the element name, ex: h1, p, div
In CSS, how do you select an element by its id attribute?
id-name
Name three different types of values you can use to specify colors in CSS.
RGB Values, Hex Codes, and color names. -extra- HSL HSLA RGBA
What CSS properties make up the box model?
The content width and height, padding, border, margin.
Which CSS property pushes boxes away from each other?
Margins.
Note: Be aware of margin collapse where the top and bottom margins of elements can collapse into a single margin that is equal to the largest value of the two margins.
Which CSS property adds space between a box’s content and its border?
Padding
What is a pseudo-class?
It’s a keyword added to a selector that specifies a special state of the selected element(s)
What are CSS pseudo-classes useful for?
CSS pseudo-classes are used to add styles to selectors when those selectors meet certain conditions, whether that’s based on the content of the document tree, or on external factors, ex: position of the mouse (hover)
Name at least two units of type size in CSS.
Px and percentages
-extra-
ems, ex, and rem
What CSS property controls the font used for the text inside an element?
Font-family
What is the default flex-direction of a flex container?
The default flex-direction of a flex container is row.
What is the default flex-wrap of a flex container?
Nowrap
What is the default flex-direction of an element with display: flex?
Row
What is the default value for the position property of HTML elements?
position: static
How does setting position: relative on an element affect document flow?
It does not affect the position of surrounding elements; they stay
in the position they would be in in normal flow. The elements just moves.
How does setting position: relative on an element affect where it appears on the page?
Relative positioning moves an element in relation to where it would have been in normal flow, based on the box offset property values.
How does setting position: absolute on an element affect document flow?
It is taken out of normal flow, it does not affect the position of any surrounding elements, it’s like it’s not there.
How does setting position: absolute on an element affect where it appears on the page?
Absolutely positioned elements move as users scroll up and
down the page. It will position itself in relation to the nearest ancestor container it’s in that has a non-static position property.
How do you constrain an absolutely positioned element to a containing block?
They constrain themselves to the first non-static containing block, so it must be set to a position property that is relative or it will go up the chain of parents that have a non-static property on it.
What are the four box offset properties?
Top, bottom, left, right.
What are the four components of “the Cascade”.
Source order, Inheritance, specificity, and important keyword
What does the term “source order” mean with respect to CSS?
The order that your CSS rules are written in your stylesheet.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance.
NOTE: The inherit keyword, used as the value of the desired property, or if you want all style properties inherited, the short-had property all with a value of inherit.
List the three selector types in order of increasing specificity.
Type selector (and pseudo elements), then class selector (and attribute and pseudo-classes), then Id selectors
Why is using !important considered bad practice?
Because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
Scale()
Skew()
Rotate()
Translate()
Give two examples of media features that you can query in an @media rule.
Display-mode, min-width
– Extra –
Hover, pointer, monochrome, orientation, device-width, max-width, width and more.
Which HTML meta tag is used in mobile-responsive web pages?
angle bracket
meta name=”viewport” content=”width=device-width, initial-scale=1”
close angle bracket
What is the purpose of CSS?
To define visual styles and formatting for web pages displayed on different devices and screen sizes.
What are the different ways to insert CSS into web pages?
There are three primary ways to insert css styling for web pages:
1) External CSS - defining the css styling in a separate .css file. Each HTML page must include a reference to the external style sheet file inside the <link> element within the <head> section of the HTML document. The <link> element should include two attributes: the rel attribute that defines the relationship of the linked resource to the current document, here it would be something to the effect of stylesheet, and the href attribute containing the value of the file path to the the stylesheet.
2) Internal CSS - defining the css styling using a <style> element within the <head> section of an HTML document .
3) Inline CSS - used to apply a unique style for a single element by add the style attribute to the relevant element. The style attribute can contain any CSS property.
If properties have been defined for the same selector (element) in different style sheets or even styles defined on the HTML document, the value from the last read style sheet will be used. For example, If the internal style is defined after the link to the external style sheet, the styles in the external style sheet will be applied.
The cascade is as follows:
- First, Highest Priority: Inline
- Then, External and Internal
- Finally, Lowest Priority: Browser Default.
What are some key differences between borders and outlines?
Borders…
- impact the flow of webpage elements because they occupy space.
Outlines…
- do not impact the flow of webpage elements because they do not occupy space, they are only visual elements.
- are drawn outside of an element’s content.
What are the five different categories of CSS selectors?
1) Simple Selectors - select elements based on name, id, class, universal, grouping
2) Combinator selectors - select elements based on a specific relationship between them
3) Pseudo-Class selectors - select elements based on a certain state
4) Pseudo-Elements selectors - select and style a part of an element
5) Attribute selectors - select elements based on an attribute or attribute value.
What is the syntax for a class selector?
.class-name {}
Can also use the class on a specific element by using the syntax element.class-name {}
Note - a class name cannot start with a number
What is the syntax for the universal selector?
* {}
What is the syntax for an id selector
#id-name {}
Note - an id name cannot start with a number
What is the syntax for a grouping selector?
Grouping selectors can be comprised of any kind of selector, (except maybe universal, as that would be redundant), where each type of selector is separated by a comma before the declaration block. element, .classname, #id-name, element.class-name {}
When using the font-family property in a CSS declaration block, what is the syntax for a font name with more than one word, like Times New Roman?
If the font name is more than one word, the property value must be in quotation marks:
.p1 {“Times New Roman”, serif; }
What are fallback fonts?
Fallback fonts are backup fonts that should always be included in a font-family property. The fist named font family should be your font of choice, the second should be a backup font family that would work in your web page’s style and layout, and the last should be the final backup font which should always be a generic font family - such as serif, sans-serif, monospace, etc.
Note - Arial is one of the safest web fonts and is available on all major operating systems.
What are the five major fallback fonts?
1) serif
2) sans-serif
3) monospace
4) cursive
5) fantasy
What are the two types of font sizing, and what are some examples of each?
A font size can be either absolute or relative.
Absolute size value:
- sets the text to specified size
- doesn’t allow a user to change the size in all browsers
- is useful when the physical size of the output is known
Examples - point sizing, pixel sizing
Relative size value:
- sets the size relative to surrounding or existing elements and values
- allows a user to change text size in most browsers (IE is finicky)
Examples - em sizing, rem sizing, viewport width sizing
What is the default size for normal text, like paragraphs?
16px
What is the difference between em and rem units?
In font sizing,em sizing is based on and relative to the parent element’s size, so if a body element’s font-size is set to 20px, than every child element’s font size in em units will be relative to that value, essentially setting 1em as a value of 20px. In this same sense, the grandchildren element will be based on the child element’s size, so the same 1em size will now be 40px.
rem units are set relative to the root element’s size font-size, so if the root size is set to the default 16px, that will be the size of 1rem. The value of 1rem will not change in any successive level of nesting.
What is the difference between padding and margin?
Margins are used to create space around elements, outside of any defined borders. Negative values are allowed.
Padding is used to create space around and element’s content, inside of any defined borders. Negative values are not allowed.
What is margin collapse?
Margin collapse is where the top and bottom margins of elements can collapse into a single margin that is equal to the largest value of the two margins.
This doesn’t happen on left and right margins.
What does the border-style property do, and what is an example of a value?
The border-style property specifies the type of border decoration to display. It can have one to four values to specify the style of each border. The border-style property must be set in order to apply other border properties such as border-width and border-color with the exception of border-radius. If using the shorthand, the style value must still be present in the border shorthand for the other properties to to by applied.
Examples of border-style values include:
- dashed
- solid
- double
- dotted
- groove
- ridge
- none
- hidden
- inset
- outset
What types of values does the border shorthand set?
The border shorthand property sets the size, style, and color of the element’s border. You can also use the shorthand to specify the properties for a single side by including the side in the property: border-left: 5px solid red;
NOTE: a value for border-style must be defined for the border to be applied to the element, with the exception of border-radius.
What property is used to add rounded borders to an element?
border-radius, and it accepts length values and percentages. Negative values are invalid.
