css3 from scratch Flashcards

1
Q

css stands for

A

cascading style sheets

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

css style parts broken down

A

selector{property:value; property: value;}

ex p{color:blue; font-size:20px;}

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

ways of implementing css

A

internal, external using link rel=”stylesheet”,inline

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

external stylesheets exist where

A

a file of its own

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

advantages of external stylesheets

A

faster loading because it is cached

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

internal style sheet implementation

A

in header

'style'
{
color:blue;
}
'/style'
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

set style for specific type of element, like a footer that is inside a paragraph tag

A
style
footer p
{
}
/style
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

selector types

A

tag,class,id

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

selector tag

A

page-wide

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

class selector

A

apply to every element in that class

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

id selector

A

apply to one specific tag

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

id and javascript

A

javascript can use id selector

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

how to set style of a class type

A

using the .(class)’style’‘/style’

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

how to set tyle of an id

A

(id) …style…

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

background color css3 keyword

A

background-color: x;

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

set font color in css

A

color:x;

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

import stlyehseet

A

in head:

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

t/f

A

the inclusion of css sheets matters– second one overrides rules, first is base set

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

what does margin:auto do

A

equal margins on all sides and centered on page, can add constraints for the auto to inherit from

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

how to add two classes to an elemnet

A

seperate by space

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

what is one way to overide a css style for one of the elements in a grid so tyat it removes/adds something it needs

A

sperate class name my space, and add formatting in its corresponding css

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

overwrite css settings of an element after using it

A

set button to custom color, and set link tag (anchor tag) to default

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

what css atrr can make text upercase

A

text-transform: uppercase;

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

how to add an action to a css element in css

A

.btn:hover {

color:blue

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

padding and margin paramaters follow what order of pattern

A

trbl

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

what is float in css

A

float denotes the arrangement of items, like horizontal

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

what is list-style in css

A

a property that can remove list decorations or add them, like bullets

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

what are some border css styles

A

size, solid, etc.

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

css border can be added to individual sides of an element t/f

A

t, border-right or top etc.

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

in css, the word cascading means what

A

it means your styles can be overwritten

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

in css what is a Descendent Selector

A

CSS selector that selects all the elements of a given type that are nested inside another type of element.

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

whats a css rule

A

basically just the css:

footer { color: green;}

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

in csss in using a descendent selector, say you have

nav>ul>li>a; in stylyiyng the anchor tag (a) in a nav, how do we do this? Do we need to include ul,li?

A

nav a{}

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

css element to make a link not be underlined

A

text-decoration:none;

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

in css what is max-width

A

max-width:900px says we want it to have no larger width than 900px

36
Q

in css what is text-align

A

you can align text to center, left, or right etc.

37
Q

in css how to use margin to center it on the page

A

margin: 0px auto;

38
Q

in css max-width property is useful for browsers that are smaller than the set max bc why

A

the element will reduce in size to adjust

39
Q

in css hexadecimal color what is the shorthand for a color

A

fff, is equiv to #ffffff

40
Q

how to denote a pseudo class in css

A

:

a:visitited

41
Q

how to ass a css comment

A

/*

42
Q

in css what is font-family

A

defines which font should be applied to text

43
Q

in css what is font-size

A

sets size of text in either relative or absolute unitys

44
Q

in css if a font-family isnt found how can you specify a backup font-family

A

just use a comma and the alternative name

45
Q

in css what is em

A

it is a relative unit, 1.75 would be 1.75x the relative font

46
Q

in css what is font-weight

A

you can use font-weight to set bold, normal, etc.

47
Q

in css what is line-height

A

sets the amount of space between each line of text– accepts any css length unit

48
Q

in css what is an alternative way to set just a top, bottom etc for margin or padding

A

margin-top:x; etc

49
Q

in css what would happen if you set an img to max-width:100%; in a container

A

if the container shrinks, the image shrinks with it

50
Q

in css what does list-style do

A

Sets the style of numbers or bullet points for ordered and unordered lists. The marks can also be removed entirely with the value “none”

51
Q

in css what does float do

A

Allows an element to be taken out of the normal flow and placed to the left or right of its container. Text and other inline elements will wrap around it.

52
Q

in css what does clear propety do

A

specifies whether an element can be adjacent to a floated element or if it should be moved down and “clear” any floated elements

53
Q

in css setting width to 100% would do what

A

span the element across its entire parent element

54
Q

in css what is the display property

A

Sets whether an element should be rendered as a block element, inline element, or inline-block element.

55
Q

in css what does border-radius do

A

defines the roundness of a border corner

56
Q

in css, if border-radius were set to 100% what would happen

A

it would appear as a circle

57
Q

in css how can you add a link that is a telephone number

A

href=”tel:555-5555”

58
Q

in css how can you add a link for an email adress

A

href=”mailto:adress@.com”

59
Q

in css how to set a background image

A

background-image: url(‘www’’)

60
Q

in css how to set the size of a background image

A

background-size:

61
Q

in css how to set if a background image should be repeated

A

background-repeat:

//by default backgrounds will repeat

62
Q

in css what is a media query

A

allows for the change of layout of the page elements based on the resizing of the page

63
Q

in css what is a breakpoint

A

The specific screen widths where a responsive layout “breaks” and needs to change in order to accommodate the screen.

64
Q

in css media queries use @x (what is x?) for what

A

Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.

65
Q

in css and media queries, how do you specify a media query based on the screen size

A

@media screen and (min-width:x){

}

66
Q

in css you can use a pseudo class so that every nth child gets some specialized css, how do you do this

A

example:
li:nth-child(4n){ clear:left; } //this applies clear to every fourth item

67
Q

can css be shared across multiple html files?

A

yes

68
Q

what are a few new features of css 3

A

rounded corners, box shadows, gradients, transitions/animations, flexbox

69
Q

in css what are the fundamentals of the “cascade”

A

importance(depends on origin [from least importance to greatest]: each browser has its own “User Agent sytyle sheet”, then user style sheets, and then the author style sheet),specificity,source order(top to bottom)

70
Q

in css what is a user agent style sheet

A

a browsers default css

71
Q

in css, what is inheritence

A

its properties values are inherited from its parent

72
Q

three methods to add css

A

inline, external, interal

73
Q

in css how to use inline style

A

‘p style=”background:blue”’

74
Q

in css, will inline styles override external style sheets?

A

yes

75
Q

in css how to add internal css

A

in the head, using the style tag (type=”text/css”)

76
Q

what is the downside of using internal css

A

they are downloaded each time the page is loaded

77
Q

in css using an external style sheet requires what in the link tag

A

rel (relationship) which for css needs to be “stylesheet”, and the href for the path of the css

78
Q

what is a big advantage of using an external css

A

external css is often cached by the browser, so it only needs to be loaded once

79
Q

in css how do you import an additional stylesheet

A

using @import preceeding the other css, or internal in a style tag

80
Q

what is the drawback of using @import in css

A

performance as it needs to call the server for each import

81
Q

what is a universal selector in css

A

*{prop:value}//this sets it to every element on the page

82
Q

in css what is a descendent selector

A

for example a h1 inside of a span: span h1{}

83
Q

in css what symbol defines a direct child selector

A

> ; .main > a{} //this means only direct children instead of all

84
Q

in css how do we define an adjacent sibling selector (using what symbol)

A

+; it targets only those that are directly adjacent to its parent

85
Q

in css an attribute selector is defined how

A

[class]

86
Q

in css how could you use an attribute selector to set the style of an input type

A

input[type=”submit”]{}