css Flashcards
declare that a page is using an external style sheet using html
what is one difference in using @import vs a css style in regards to browsers
some browsers will hide @import from user in source
when using css and @import, where does the @import need to be located
at the top, preceeding other elements
in regards to @import, what is one disadvantage in regards to performance
each @import must call back to the server
in css what does a universal selector accomplish
selects every element on a page
how do you use a universal selector in css
*{ }
browsers have a user agent style sheet that accomplishes what
sets a default style to elements on a page, i.e. padding, margin etc.
the universal selector trumps inheritance in css t, or f
true
in css what does a type selector accomplish
selects a page element i.e. h1, p, etc
in css define a type selector
elementname { style properties }
in css define a descendent selector
selector1 selector2 { style properties }
in css define an element with two classes
div class=”class1 class2”
in css define a descendent selector with the first element being a class
.class1 selector1
in css which has more weight in importance, class or id
id
in an external css style sheet, define a style for two classes
.class1, .class2 {
style
}
in css what symbol defines a child combinator
>
in css define a child combinator
an element directly nested within an element
in css what symbol defines an adjacent sibling combinator
+
in css define an adjacent sibling combinator
an element immediately following an element`
in css what symbol defines every a general sibling combinator
~
in css define a general sibling combinator
every sibling element of given element
in css attribute selectors are decorated with what symbol
[ ] sq brackets
in css select an element with a class of a specific name
a[class=”classname”]
in css select an element with a text attribute
input[type=”text”]
in css declare a pseudoclass selector
a:link, a:hover
in css apply an active pseudo class to all active elements
:active{ }
in css, this structural pseudo class selects the first child
:first-child
in css, this structural pseudo class selects the last child
:last-child
in css, this structural pseudo class selects the only child
:only-child
In css, the only-child structural pseudo class accomplishes what
It will only apply a style to elements that are the ONLY child of a given element, and ignore those with multiple children
declare a begins-with selector
[att^=”val”]
declare a ends with selector
[att$=”val”]
declare a contains selector
[att*=”val”]
In CSS, how can you set the line spacing for text?
line-height:2;
in css, select every odd element
:nth-child(odd)/even
in css define the :nth-element(an+b) syntax
b=element to start, a=every ath element (i.e. 3= every third)
Which color will be applied, red or blue
<p></p>
p.title{ … } p.summer{color:red} p.newproduct{color:blue}
blue
in css static positioning does what
ignores top,left,bottom,right positioning and z index. sets it to default way a browser renders objects: box
in css absolute positioning does what
positions an element with w/e offsets WITHIN its parent eolement (so by default top left of parent)– if no parent, the browser viewport is parent
in css relative positioning does what
positions an element without influencing position of other elements using top left bottom etc (it is offset relative to original positioning, thus the following element uses the position of this element’s non-offset positioning to position itself
in css positioning fixed does what
always stays in place, i.e. a banner when scrolling down stays attatched to the top
in css what is the default positioning
static
in css, the absolute positioning will always be relative to what
the first object with non-static positioning
in css, when using relative positiioning and a left and right offset, which side is typically ignored
the right
in css how can you horizontally align divs
float:left
in css how can you use two background images and place them accordingly
background-image: url(clouds.png), url(background.png);
background-position: top center, bottom center;
