Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Html 5 Tags > Css Selectors > Flashcards

Css Selectors Flashcards

1
Q

Css Selectors

A

In CSS, selectors are patterns used to select the element(s) you want to style.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Type selector

A

select elements by type ex: table{color:red}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Class selector

A

select elements by class .table{color:red;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Id selector

A

select elements by id #table{color:red;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

attribute selector

A

select by attribute, [data-author]{color:red;} can you wildcard characters to select,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

selector chaining

A

use commas to chain selectors table, ul

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Psuedo-elements

A

used to add special effects to some selectors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Css combinators

A

combining simple selectors so they apply to targeting section

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

what is data dash and why is it important

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the 3 types of css positioning

A

relative, absolute and fixed, static is the default

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Position:Static

A

the element is not positioned may be used to override positioning

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Postion:Relative

A

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;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Position:Absolute

A

the element is removed from the document and placed exactly where you tell it to go

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are two other things that happen when you set position: relative?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Position:Fixed

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the four different ways to add color in css

A

named, rgb, slk and opacity

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Syntax for named color in css

A

color:red

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Syntax for hex color in css

A

color:#ffffff or color:fff when the pairs have the same number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Syntax for rgb color in css

A

takes 3 values rgb(0,255,0) red blue green this is what monitor display uses

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Syntax for hsl color

A

hsl(hue, saturation, lightness) hsl(0, 50%, 50%)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are css text properties

A

text-decoration, text- transform, text shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

text-decoration

A

underlines text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

text-transform

A

transforms text to upper or lower case

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are css font properties

A

font-style, font-variant, font-weight, font-size, font-family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Font-style

A

sets the style of text normal, italic, oblique

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

font-variant

A

normal, small caps

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What are the different ways to specify font sizes in css

A

name, lenght, and percentage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is the default font size

A

named medium

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What are the different font lenght allowed

A

px, cm

30
Q

Write the syntax for font size for each type

A

font-size:100%, 10px, 50cm, small

31
Q

What is text shadow

A

add a shadow to text requires a series of arguments and direction

32
Q

Syntax for text shadow

A

text-shadow: #6374AB 20px -12px 2px; , shadow color, x coord, y coor, blur radius

33
Q

line height

A

specifies line height, takes normal, a number, lenght(px, pt, cm) and percentage

34
Q

where does the browser look for fonts

A

based on what is on the users machine you can specify the url for a font in css with @font-face

35
Q

What is the font shorthand

A

shorthand way of applying css for all font properties

36
Q

What are the font shorthand rules

A

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

37
Q

what are css columns

A

set columns left to right on the page

38
Q

What is the syntax for css columns

A

column width, column count

39
Q

What are boxes in the css world

A

basically a div

40
Q

What are properties that affect a box sized shape etc

A

border, padding and margin

41
Q

Border

A

around the box px and color

42
Q

Margin

A

space around the box

43
Q

Padding

A

space in the div

44
Q

Outline Offset

A

The outline-offset property offsets an outline, and draws it beyond the border edge.

45
Q

Box sizing properties

A

width, height, min, max

46
Q

What are some of the css visibility properties

A

display and visibility

47
Q

Tell me more about the disply properties

A

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

48
Q

Box Shadow

A

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.

49
Q

Border Radius

A

Created rounded borders #example1 {
border-radius: 15px;
}

50
Q

Gradients

A

Allows you to create gradients in css on elements

51
Q

Linear

A

a function tht creates a image which represents a linear gradient of colors

52
Q

child selector

A

someDiv > p

53
Q

example of chaining

A

div > div > p

54
Q

adjacent sibling selector

A

p + p

55
Q

syntax for asterik selector chaining

A

someDiv *

56
Q

What are link related psuedo selectors

A

visited, hover and active

57
Q

What are input and link related psuedo selectors

A

focus, target, enabled, disabled, checked, intermediate

58
Q

What are position number based pseudo class selectors

A

root, first-child, last-child, nth-of-type, first or type, last-of-type, nth-last-of-type, only-of-type,

59
Q

Relational psuedo class selectors

A

not(S), empty

60
Q

Text related psuedo classes

A

first-letter, first-line, lang, selection

61
Q

Content type pseudo elements

A

before, after

62
Q

What is the syntax for adding CSS Tina web page.

A

link=’CSS path’ rel=’stylesheet’ type=’text/CSS’

63
Q

What is the syntax for adding CSS Tina web page.

A

link=’CSS path’ rel=’stylesheet’ type=’text/CSS’

64
Q

Border css properties

A

border-style, border-width, border-color, border individual sides and border shorthand

65
Q

Margin css properties

A

top, bottom, right, left you can use lenght, %, auto and inherit

66
Q

Padding css properties

A

top bottom left right lenght and percentage

67
Q

Margin

A

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

68
Q

Padding

A

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.

69
Q

What is the css box model

A

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.

70
Q

Outline

A

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.

Html 5 Tags (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions