CSS Flashcards
What does CSS stand for?
Cascading Style Sheets
What are the two parts of a CSS rule-set?
A CSS rule-set consists of a selector and a declaration block
What are the five categories of CSS selectors?
Simple, Combinator, Pseudo-class, Pseudo-elements, and Attribute selectors
What is the CSS Universal selector?
*
How do you group multiple selectors?
With a comma between them?
Ex: h1, h2, p {…}
What symbol is used for id selectors?
#
What symbol is used for class selectors?
.
True or False: Elements can only have one class for styling.
False, HTML elements can refer to more than one class.
How can you specify that only specific HTML elements (such as h1) should be affected by a class (such as header)?
You would have the element followed by the class with a period in between and no spaces.
h1.header {...}What symbols do you use to hold CSS comments?
/* CSS comments in here */
CSS colors are specified using predefined color name or…
RGB, HEX, HSL, RGBA, HSLA values
What does the A in HSLA and RGBA mean?
The A stands for alpha channel - which specifies the opacity for a color
What is the formula for a RGB value?
rgb(red, green, blue)
What is the formula for a HSL value?
hsl(hue, saturation, lightness)
What is the formula for a HEX value?
rrggbb [r = red, g = green, b = blue]
How do you insert an background image?
background-image: url(“path”);
True or False: The background-image property repeats an image both horizontally and vertically by default.
True.
What is used to repeat a background horizontally? Vertically?
Horizontally –> background-repeat: repeat-x;
Vertically –> background-repeat: repeat-y;
What is used to show the background image only once?
background-repeat: no-repeat;
Using “fixed” or “scroll” what property can specify whether the background image should scroll or not with the rest of the page?
background-attachment
What is the shorthand for specifying all the background properties? And what is the order of the property values?
background: (color) (image) (repeat) (attachment) (position);
How many different border-styles are there? And what are they?
10.
dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
What are the different values for the border-style property, if not using one for all?
top, right, bottom, and left border
What property specifies the width of the four borders?
The border-width property
What property sets the color of the four borders?
The border-color property
What is the ordering of border properties for the border shorthand? And which one is required?
border: (width) (style) (color);
style is required
What is property is used to add rounded borders to an element?
The border-radius property
What CSS property is used to create space around elements, outside of any defined borders?
CSS margin
Setting the CSS margin to “auto” does what?
Setting the margin property to “auto” horizontally centers the element within its container
What value would you use for a CSS margin if you wanted the child element to copy the styling of the parent element?
“Inherit”
What is margin collapse?
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
What CSS property is used to create space around an element’s content, inside of any defined borders?
CSS padding
True of False: Negative values are allowed for CSS Padding.
False, negative values are not allowed.
What CSS problem can you solve by adding the “box-sizing: border-box;” property?
The issue of padding being added after the width, giving the element a larger content area than desired. Box-sizing fixes that, keeping the padding within the already created and desired total width of the element.
What does the CSS Box Model consist of?
Margin, border, padding, and the actual content; in that order.
Outlines are similar to borders, but how are they different?
The outline is drawn outside the element’s border and may overlap other content. The outline is NOT a part of the element’s dimensions.
For W3C compliant CSS, what must you define with the “color” property?
You must also define the “background-color” property.
What does “text-align: justify” do?
Each line is stretched so that every line has equal width, and the left and right margins are straight
What do the “direction: rtl” and “unicode-bidi: bidi-override” do?
The direction and unicode properties can be used to change the text direction of an element
What property sets the vertical alignment of an element?
The vertical-align property sets the vertical alignment of an element
What are the optional values of the “text-decoration” property?
none, overline, line-through, underline
What property is connected to these values; uppercase, lowercase, capitalize?
The “text-transform” property
What does the “text-indent” property do?
The “text-indent” property is used to specify the indentation of the first line of a text
What does the “letter-spacing” property do?
The “letter-spacing” property is used to specify the space between the characters in a text
What does the “line-height” property do?
The “line-height” property is used to specify the space between lines
What does the “word-spacing” property do?
The “word-spacing” property is used to specify the space between the words in a text
What does the “white-space” property do?
The “white-space” property specifies how white-space inside an element is handled
What is the ordering used for a “text-shadow”?
text-shadow: “horizontal shadow” “vertical shadow” “blur effect” “color”
What are the generic font families in CSS?
“Serif”, “Sans-serif”, “Monospace”, “Cursive”, “Fantasy”
How should you create your font-family in your CSS file?
The “font-family” property should hold several font names as a fallback system to ensure maximum compatibility between browsers/operation systems
What are the best web safe fonts for HTML and CSS, according to w3schools?
Arial Verdana Helvetica Tahoma Trebuchet MS Times New Roman Gerogia Garamond Courier New Brush Script MT
What property is connected to these values; normal, italic, oblique?
The “font-style” property
What does the “font-weight” property do?
The “font-weight” property specifies the weight of a font; such as normal, bold, or a number
What are the different option size types you can use for setting the “font-size” property? (ex: px)
px
em
%
vw
What is the ordering of the “font” property?
font: “font-style” “font-variant” “font-weight” “font-size”/”line-height” “font-family”;
What does the “font-variant” property specify?
The “font-variant” property specifies whether or not a text should be displayed in a small-caps font
True or False: You can bring in icons from other sources, like Google Icons, in the “head” of your HTML.
True, you can link it like a style sheet.
What element is used for html icons?
“i” elements
What property is used to remove underlines from links?
text-decoration
What are the 4 states of links?
link, visited, hover, active
What are the order rules for links?
a: link and a:visited BEFORE
a: hover BEFORE
a: active
What are the 2 main types of lists?
unordered (ul)
ordered (ol)
What does the “list-style-type” property specify for list elements?
The “list-style-type” property specifies the type of list item marker
What is the order of the list-style shorthand?
list-style: list-style-type, list-style-position, list-style-image
What are the 2 options for the “list-style-position” property?
outside and inside. This is for if the bullet point (or any list-item marker) is inside or outside of the border (if you were to use a border)
How do you use an image for the “list-style-image” property?
list-style-image: url(‘image-name.jpg’);
What property sets whether the table borders should be pushed into a single border or not?
border-collapse
How would you create a style that only applies to every even rows in a table?
Use nth-child(even) {…} to create the style
If your table is too large horizontally, what would need to be added to add a scroll bar?
overflow-x: auto;
What does it mean if an element has a property of “display: block;”?
It means the element always starts on a new line and takes up the full width available.
What does it mean if an element has a property of “display: inline;”?
It means the element does not start on a new line and only takes up as much width as necessary.
What is “display: none;” used for?
It is commonly used with JavaScript to hide and show elements without deleting and recreating them.
What’s the difference between “display: none;” and “visibility: hidden;”?
“display: none”, acts as if the element is not there at all, while “visibility: hidden” makes the element appear hidden but the layout will stay the same.
What should you do with the following div element to ensure that it a responsive design?
div { width: 500px; margin: auto; }
div { max-width: 500px; margin: auto; }
Using max-width ensures the div changes size if the window it’s in goes below the designated width.
What are the 5 different position property values?
And which one is the default.
static (default) relative fixed absolute sticky
How are static elements positioned?
Static elements are always positioned according to the normal flow of the page
How are relative elements positioned?
Relative elements are positioned relative to its normal position
How are fixed elements positioned?
Fixed elements are positioned relative to the viewport, which means they always stay in the same place even if the page is scrolled
How are absolute elements positioned?
Absolute elements are positioned relative to the nearest positioned ancestor, but if there is no positioned ancestors it will act as fixed
How are sticky elements positioned?
Sticky elements are positioned based on the user’s scroll position. Sticky elements toggle between relative and fixed, it is positioned relative until a given offset position is met in the viewport then it “sticks” in place
What does the z-index property do?
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others)
True or False: An element’s stack order (z-index) is within the range of 0 and 1.
False, an element can have a positive or negative stack order, using any number.
