Intermediate CSS Flashcards
You can define your own selectors in the form of _______ selectors
class and id
What is the benefit of classes and ids?
The benefit of this is that you can have the same HTML element, but present it (style it) differently depending on its class or id
A class selector is a name preceded by a _______
full stop (“.”)
An ID selector is a name preceded by a ________
hash character (“#”)
What is the difference between an ID and a class?
An ID can be used to identify one element, a class can be used to identify more than one
p.jam { property: value; }
Style only paragraph elements that have the class “jam”.
Two ways you can simplify HTML and CSS
Grouping and Nesting
What is grouping?
You can give the same properties to a number of selectors without having to repeat them. Separate selectors with commas in one line
You can specify properties to selectors within other selectors using _______
Nesting
_________ are bolted on to selectors to specify a state or relation to the selector
Pseudo classes
selector:pseudo_class { property: value; }
a:link {
color: blue;
}
Target unvisited links with a pseudo class and color them blue
a:visited {
color: purple;
}
Target visited links with a pseudo class and color them purple
Commonly used for links, the _________ can be used to apply styles when something happens to something
dynamic pseudo classes
a:active {
color: red;
}
dynamic pseudo class used to target a link activated by the user, and then color it red
a:hover {
color: blue;
}
dynamic pseudo class used to target a link hovered over by the user, and then color it blue
input:focus, textarea:focus {
background: #eee;
}
dynamic pseudo class used to target an input field or textarea that has focus, and then color the background
Target something only if it is the very first descendant of an element
The first-child pseudo class
p:first-child {
font-weight: bold;
font-size: 40px;
}
Style the first paragraph
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
To shorthand
margin: 1px 5px 10px 20px;
What do these values target?
padding: 1em 10em;
The first value will be the top and bottom
The second value will be the right and left
This combines which properties?
border: 1px red solid;
border-width
border-color
border-style
This combines which properties?
font: italic bold 12px/2 courier;
font-style font-weight font-size line-height font-family
True or False?
Background-images can be used in most HTML elements - not just for the body
True
What is Specificity?
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.
If the selectors are the same then _________ will always take precedence.
The last one
When calculating specificity – An ID selector will be given
A value of 100
When calculating specificity – A class selector will be given
A value of 10
When calculating specificity – An HTML selector will be given
A value of 1
When calculating specificity what is the total of?
body #content .alternative p
HTML selector + id selector + class selector + HTML selector, 1+100+10+1 = 112
The most fundamental types of display are _______ and they can be manipulated with the display property
inline, block and none
Boxes that follow the flow of a line are using which display type?
inline
_______ display type makes a box standalone, fitting the entire width of its containing box, with an effective line break before and after it.
block
_______ will keep a box inline but lend the greater formatting flexibility of block boxes, allowing margin to the right and left of the box
inline-block
Which display type doesn’t display a box at all?
display: none;
What is the difference between display: none and visibility: hidden?
display: none completely removes the bo, whereas visibility: hidden keeps the box and its flow in place without visually representing its contents
You can create tables with CSS. True or False?
True. CSS tables can be created using the display property. display: table; display: table-row; display: table-column
What does the display: list-item property do?
Displays a box in the way that you would usually expect an li HTML element to be displayed. To work properly elements displayed this way should be nested in a ul or ol element
_______ makes a box either in-line or block depending on the display of its parent
run-in
What is first-letter?
pseudo element applies to the first letter inside a box
Pseudo element that applies to the top-most displayed line in a box?
first-line
Is p::first-line a pseudo element or class?
Element uses two colons instead of one
The ________ pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML.
before and after
You can layout page elements _______ to another page element.
absolute, relative, static or fixed
What property is used to do page layout?
position
What is the default position value?
static - the default value and renders a box in the normal
______ is much like static but the box can be offset from its original position with the properties top, right, bottom and left.
relative
What is the absolute box?
The absolute box can be placed anywhere on the page using top, right, bottom and left
________ behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.
fixed
What is Floating a box?
Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
What is floating typically used for?
Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.
What are the two values used with float?
Left or Right
If you do not want the next box to wrap around the floating objects, you can apply the ______ property
clear: left or right or both
