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
Font-style
sets the style of text normal, italic, oblique
font-variant
normal, small caps
What are the different ways to specify font sizes in css
name, lenght, and percentage
What is the default font size
named medium
What are the different font lenght allowed
px, cm
Write the syntax for font size for each type
font-size:100%, 10px, 50cm, small
What is text shadow
add a shadow to text requires a series of arguments and direction
Syntax for text shadow
text-shadow: #6374AB 20px -12px 2px; , shadow color, x coord, y coor, blur radius
line height
specifies line height, takes normal, a number, lenght(px, pt, cm) and percentage
where does the browser look for fonts
based on what is on the users machine you can specify the url for a font in css with @font-face
What is the font shorthand
shorthand way of applying css for all font properties
What are the font shorthand rules
his CSS shorthand version will only work if you’re specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.
Example: font: bold italic small-caps 1em/1.5em verdana,sans-serif
what are css columns
set columns left to right on the page
What is the syntax for css columns
column width, column count
What are boxes in the css world
basically a div
What are properties that affect a box sized shape etc
border, padding and margin
Border
around the box px and color
Margin
space around the box
Padding
space in the div
Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
Box sizing properties
width, height, min, max
What are some of the css visibility properties
display and visibility
Tell me more about the disply properties
has a possible of 4 values and I am unsure of what they all mean
None - hides the div
block - The element is displayed as a block-level element (like paragraphs and headers)
inline-block-The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline- default the element is displayed inline like a span
Box Shadow
allows box shadow syntax box-shadow: 10px 10px 5px #888;
Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.
Border Radius
Created rounded borders #example1 {
border-radius: 15px;
}
Gradients
Allows you to create gradients in css on elements
Linear
a function tht creates a image which represents a linear gradient of colors
child selector
someDiv > p
example of chaining
div > div > p
adjacent sibling selector
p + p
syntax for asterik selector chaining
someDiv *
What are link related psuedo selectors
visited, hover and active
What are input and link related psuedo selectors
focus, target, enabled, disabled, checked, intermediate
What are position number based pseudo class selectors
root, first-child, last-child, nth-of-type, first or type, last-of-type, nth-last-of-type, only-of-type,
Relational psuedo class selectors
not(S), empty
Text related psuedo classes
first-letter, first-line, lang, selection
Content type pseudo elements
before, after
What is the syntax for adding CSS Tina web page.
link=’CSS path’ rel=’stylesheet’ type=’text/CSS’
What is the syntax for adding CSS Tina web page.
link=’CSS path’ rel=’stylesheet’ type=’text/CSS’
Border css properties
border-style, border-width, border-color, border individual sides and border shorthand
Margin css properties
top, bottom, right, left you can use lenght, %, auto and inherit
Padding css properties
top bottom left right lenght and percentage
Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Space outside the border
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
What is the css box model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
Outline
An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.
The outline properties specify the style, color, and width of an outline.
