Brainscape's Knowledge GenomeTM

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


See full index

01Web > Css > Flashcards

Css Flashcards

1
Q

how to link HTML and Css

A

<head>
<link></link>
</head>

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

text color

A

colour

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

background color

A

background-color

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

;

A

semicolon

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

Txt-align

A

lef center right

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

how to adjust the boldness of txt

A

font-weight

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

text-decoration

A

text-decoration: blue underline;
or
text-decoration: #996219 underline wavy;

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

line-height:

A

space between lines

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

letter-spacing

A

space between letters

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

font-family:

A

to chose the font

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

text-transform:

A

upercase
capitalise
none
full width
full-size-kan

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

universal selector:
select every piece

A

selector=> *{}

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

element selector:

A

selector=> button{}

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

select a list

A

selector=> h1,h2{}

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

Id selector

A

selector=>#signup

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

class selector

A

selector=>.Ali{}

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

selector=>li a{}

A

Descendant selector
select all <a>’s that are nested inside an <li>
____________________
.Ali a{}
Select all <a>’s that are nested inside Ali class
_________________-
Section span a{}</a></a>

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

selector=>h1+p{}

A

Adjustment selector:
select only the paragraph that comes right after an h1

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

selector=>footer>a{}

A

Direct Child selector:
select links that are direct children of a footer

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

selector=> input[type=”text”]{}

A

Attribute selector:
select all input elements where the type attribute is set to “text”

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

selector=>section.post

A

it will select only the section with the class post

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

pseudo classes=> pseudo(pronauciation:sudo) classes

A

keywords that we add to a selector that specifies state of the selected element.

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

:

A

colon

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

pseudo classes=> hover:

A

button:hover{}
________________
.post button:hover{}

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

pseudo classes=>Aktiv:

A

button:aktiv{}

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

pseudo classes=>cheked:

A

for any input with type of radio. for example yo can change the color when its cheked.
input:cheked{color:red;}

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

pseudo classes=>nth-of-type:

A

select an element based on the position among sibilings of same type.
P:nth-of-type(2){}
P:nth-of-type(2n){}
P:nth-of-type(2n+1){}

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

Pseudo Element:

A

keywords added to a selector that lets you style a particular part of selected elements.
they all start with two semicolons.
h2::first letter{}
________________
p::first-line{}
_________________
p::selection{background-color:yellow}
the background color will change to yellow when we select the text.

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

The cascade

A

It means the order is important.

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

what is Box Model

A

It is basically just the idea that everything in CSS is a Box

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

Borde, Margin, Padding

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

thickness of the border

A

border-width

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

color of border

A

border-color

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

controle the border line style

A

border-style

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

change the right side of border color

A

border-right-color

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

change the right side of border line style

A

border-right-style

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

change the right side of border thikness

A

border-right-width

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

change width style and color of border at once

A

border: medium dashed red;

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

control corner redius of border

A

border-redius: 10px;
border redius: 50%;

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

change top right border redius

A

border-top-right-redius:10px

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

change every corner of the border to diffrent values at once

A

border-redius:10% 20% 30% 40%;

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

color of border in inspect

A

blue

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

color of padding in inspect

A

green

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

color of margin in inspect

A

orande

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

change the right side padding

A

padding-right

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

change the left side padding

A

padding-left

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

change top padding

A

padding-top

48
Q

change bottom padding

A

padding-bottom

49
Q

padding:10px;

A

change all sides padding to same value at once

50
Q

padding:10px 50px;
__________________
padding:0 20px;

A

give vertical padding and horizantal diffrent valu

51
Q

padding: 10 px 15px 20px;

A

chang top padding horizantal pading and bottom padding

52
Q

padding: 10px 2ßpx 15px 5px;

A

change Top right botoom left padding

53
Q

marigin: 10px auto;

A

the content will be at the center horizantally because vertical horizantal value set to auto

54
Q

which element has a default margin

A

body

55
Q

Dispalay property=> Inline

A

h1{dispaly:inline;}

56
Q

Dispalay property=>Block

A

h1{dispaly:block;}

57
Q

Dispalay property=> Inline-block

A

Behave like an inline element except width, hight, Margin & padding are respected

58
Q

Dispalay property=> none

A

h1{dispaly:none;}

59
Q

how to change opacity in rgb ?

A

wi using rigba on bckground color.
#A {background-color: rgba(255, 255,255, 0.7); }
or
#A {opacity: 0.5;}
but it will effect everything not only background

60
Q

How to change opacity in hexadecimal color ?

A

the last two digits show the opacity.

61
Q

the position property=>what is default position status of elements ?

A

static

62
Q

the position property=>
when our values for position will not work ?

A

when the position status is static

63
Q

Css transition=> the position property=>relativ

A

it will keep the elements in the normal felow of decument.
#relativ{
top:100px;
bottom:-20px;
right:100px;
left:100px;
}

64
Q

the position property=>Absolute

A

when we position an element to absolut, the element is removed from the normal document and no space is created for element. and it will be position to closest ansestor. (do not confuse with parrent)

65
Q

the position property=>what element is ancector element of <p> in this example?

<body><section><div><p>hello</p></div></section></body>

A

<body>
</body>

66
Q

the position property=>Fixed

A

It is kind of like absolute, except it has nothing to do with any parent ellements or anything like that.
*it will always stay in the position even when we scrool (like logo in many websites)

67
Q

Css transition=> what is Css transition

A

it will allow us to animate the transition of one property value to another property value.
HTML=>

<body>
<h1>Transition</h1>
<div></div>

</body>

Css=>

.circle{
width: 300px;
height: 300px;
background-color: brown;
transition: 3s;
}
.circle:hover{
width: 50px;
height: 50px;
background-color: green;
border-radius: 50%;
}
check the screept for further info.

68
Q

Css transition=> how to give Css transition delay ?

A

transition: background-color 3s 1s;

69
Q

Css transition=>how to give everything a transition ?

A

transition: all 3s 1s;
not recomended.

70
Q

Css transition=> how to send an element 500pix to right in 3 s when we hover ?

A

section div{
height: 200px;
width: 200px;
background-color: turquoise;
margin: 20px 0;
transition: margin-left 3s;
}
section:hover div{
margin-left:500px;
}

71
Q

Css transition=> how can we start our transition very slow at the begining and then very fast at end?

A

by using transition-timing-function

72
Q

transform=> with wich units we can rotate ?

A

deg, grad, rad, turn

73
Q

transform=>rotate

A

rotate()

74
Q

transform=>rotate in 3D

A

rotateX()
rotateY()
RotateZ()

75
Q

transform=>Scale()

A

scale(2)
scale(2,1)
(hight scale,width scale)

76
Q

transform=>Translate

A

it allows us to take one element and move it around
translate()
translate3d()
translateX()
translateY()
translateZ()

77
Q

transform=>skew

A

it is going to skew an element on a 2D plane
skew()
skeX()
skew()
___________-
skew (30deg)
skew(10deg,25deg)
(x.y)

78
Q

transform=>how can we combine translates ?

A

by space between them.
transform: translateX(-300px) rotate(180deg) scaleY(1.5)

79
Q

Background=> how can we put an image instead of color on background ?

A

background-image:url(“”)

80
Q

Background=>background-size=> contain

A

it is going to scale everything as large as possible without streching image but instead we getting a repeat.

81
Q

Background=>background-size=> cover

A

its going to scale everything as large as possible without streching but it will crop

82
Q

Background=>background-size=> 30% or 30px

A

.

83
Q

Background=>background-position:

A

bottom
Top
left
right

84
Q

Background=> You can change backgroun image and size at once

A

background: url(“https …”) no-repeat;

*the order is not important
if we are using background size it may only be included immediately after position seprated with the forward slash character like this:
background: url(“https…”) no-repeat center/80%;
or
background:
center/80% url(“https…”) no-repeat;
or
.
.
.

85
Q

Background=>Background=> how to have multiple backgrounds ?

A

body {
background: url(“https”) center/40% no-repeat, url(https) center/40%;
}

86
Q

where we should paste link google font gives us ?

A

after title in our HTML

87
Q

we have 6 fotos in 3 colomn, every fotos width is equal to 30%, so we have 10% free space.
we want to use this free space as margin.
how are we gonna devide this 10% space so all foto have equal margin ?

A

img{width: 30%; margin: calc(10% /6)}
and one very important thing is we should write all images in same line without any space between them.

88
Q

flex box=> how we turn on flex box

A

by display:flex;

89
Q

flex box=>how is main axis direction by default in flex box?

A

it goes from left to right

90
Q

flex box=> whith wich property will we change the main axis ?

A

flex-direction:row;
(left to right)
flex-direction:row-reverse;
(right to left)
flex-direction:colum;
(upside down)
flex-direction:colum-reverse;
(downside up)

91
Q

flex box=>justify content property=> what is justify content property ?

A

it determains how the content disterbuted.

92
Q

flex box=>justify content property=>

A

=>flex-start
if our main axis goes from left to right, the starts is on left.
=>flex-end
=>center
=>space-between
it is going to take all of the extra space and disterbute it between the elements, but not on the outside edges.
=>space-around
it will give each element the same amount of space around it.
=>space-evenly
it will ensure that the space is even between the elements, and the container.

93
Q

flex box=>flex wrap=> what is flex wrap?

A

it determains whether our elements are going to wrap along the main axis onto a new line if its horizantal or a new clumn if its a vertical main axis.

94
Q

flex box=>flex wrap =>

A

flex-wram: wrap;
flex-wram: wrap-reverse;
flex-wram: nowrap;

95
Q

flex box=>align items=> what is align item property?

A

it will disterbute our items along the cross axis(vertically).

96
Q

flex box=>align items=>

A

align-items:flex-start;
align-items:center;
align-items:flex-end;
align-items:baseline;
it gonna use the baseline of out text

97
Q

flex box=>align content=>what is it ?

A

we control the space between rows with it.

98
Q

flex box=>align content=>

A

align-content:space-betweenn;
align-content:flex-start;
align-content:flex-end;
align-content:centre;
align-content:space-around;

99
Q

flex box=>align-self=>what is it ?

A

it is similar to line item, except it is actually a property we add to single elements or doesnt have to be one, but to indivisual items in the flex container

100
Q

flex box=>Flex sizing properties=>Flex Spaces=>

A

flex-basis:400px;
flex-width:400px;
flex-grow:1;

101
Q

flex box=>Flex sizing properties=>Flex Spaces=>what is the diffrence between flex-basis and flex-width ?

A

flex spaces is along the main axis and that might be horizantal (width) but if I change to column it will be vertical (hight)

102
Q

flex box=>Flex Spaces=> what is flex grow?

A

it is going to control the amount of space that an element takes up if there is available space.

103
Q

flex box=>what property should be there so we can adjust what happend when we shring down ?

A

flex-wrap:wrap;

104
Q

flex box=>whith what elements can we limit the behavior of our elements when we shrink ?

A

max-width
min-width
max-height
min-height

105
Q

flex box=> by which property can we adjust how much it should shrink relativ to other elements

A

flex-shrink

106
Q

flex box=>what is defaault value for flex-shrink ?

A

1

107
Q

flex box=>what should i do if I want an element will not shrink ?

A

we will govr flex-shrink the value of 0

108
Q

flex box=>flex=>what is this property ?

A

it is a shorthand property which allows us to set all all values in one property

109
Q

flex box=>flex=>three values

A

flex:2 2 10%;
flex-grow/flex-shrink/shrink-basis

110
Q

flex box=>flex=>two values

A

flex:2 2;
flex-grow/flex-shrink
or
flex:2 30px;
flex-grow/flex-basis

111
Q

flex box=>flex=>one value with node (unitless ) number

A

flex:2;
flex-grow

112
Q

flex box=>flex=>one value with united number

A

flex:10em;
or
flex:min-content;
flex-basis

113
Q

what is Media queries ?

A

It will allow us to modify our styles depending on particular parameters like screen width or devise type.
it is the main mechanism that we can use to make a responsive website.

114
Q

all mediaqueries start with what ?

A

@media

115
Q

what is view port ?

A

it is what currently visible on my browser.

01Web (5 decks)

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