Css Selectors Flashcards
Css Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
Type selector
select elements by type ex: table{color:red}
Class selector
select elements by class .table{color:red;}
Id selector
select elements by id #table{color:red;}
attribute selector
select by attribute, [data-author]{color:red;} can you wildcard characters to select,
selector chaining
use commas to chain selectors table, ul
Psuedo-elements
used to add special effects to some selectors.
Css combinators
combining simple selectors so they apply to targeting section
what is data dash and why is it important
new feature to html 5 any that gives the ability to create custom attributes as long as they begin with data-
ata- attributes as a mechanism for applying metadata to elements. It turns out that this metadata is also useful when selecting elements. The browser does not use data- attributes when rendering the page. This means that they can be used to select elements independently of the element hierarchy and styling.
What is the 3 types of css positioning
relative, absolute and fixed, static is the default
Position:Static
the element is not positioned may be used to override positioning
Postion:Relative
then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static;
Position:Absolute
the element is removed from the document and placed exactly where you tell it to go
What are two other things that happen when you set position: relative?
One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block
Position:Fixed
This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school “frames” days.
What are the four different ways to add color in css
named, rgb, slk and opacity
Syntax for named color in css
color:red
Syntax for hex color in css
color:#ffffff or color:fff when the pairs have the same number
Syntax for rgb color in css
takes 3 values rgb(0,255,0) red blue green this is what monitor display uses
Syntax for hsl color
hsl(hue, saturation, lightness) hsl(0, 50%, 50%)
What are css text properties
text-decoration, text- transform, text shadow
text-decoration
underlines text
text-transform
transforms text to upper or lower case
What are css font properties
font-style, font-variant, font-weight, font-size, font-family
