Css Flashcards
1
Q
how to link HTML and Css
A
<head>
<link></link>
</head>
2
Q
text color
A
colour
3
Q
background color
A
background-color
4
Q
;
A
semicolon
5
Q
Txt-align
A
lef center right
6
Q
how to adjust the boldness of txt
A
font-weight
7
Q
text-decoration
A
text-decoration: blue underline;
or
text-decoration: #996219 underline wavy;
8
Q
line-height:
A
space between lines
9
Q
letter-spacing
A
space between letters
10
Q
font-family:
A
to chose the font
11
Q
text-transform:
A
upercase
capitalise
none
full width
full-size-kan
12
Q
universal selector:
select every piece
A
selector=> *{}
13
Q
element selector:
A
selector=> button{}
14
Q
select a list
A
selector=> h1,h2{}
15
Q
Id selector
A
selector=>#signup
16
Q
class selector
A
selector=>.Ali{}
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>
18
Q
selector=>h1+p{}
A
Adjustment selector:
select only the paragraph that comes right after an h1
19
Q
selector=>footer>a{}
A
Direct Child selector:
select links that are direct children of a footer
20
Q
selector=> input[type=”text”]{}
A
Attribute selector:
select all input elements where the type attribute is set to “text”
21
Q
selector=>section.post
A
it will select only the section with the class post
22
Q
pseudo classes=> pseudo(pronauciation:sudo) classes
A
keywords that we add to a selector that specifies state of the selected element.
23
Q
:
A
colon
24
Q
pseudo classes=> hover:
A
button:hover{}
________________
.post button:hover{}
25
pseudo classes=>Aktiv:
button:aktiv{}
26
pseudo classes=>cheked:
for any input with type of radio. for example yo can change the color when its cheked.
input:cheked{color:red;}
27
pseudo classes=>nth-of-type:
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){}
28
Pseudo Element:
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.
29
The cascade
It means the order is important.
30
what is Box Model
It is basically just the idea that everything in CSS is a Box
31
Borde, Margin, Padding
32
thickness of the border
border-width
33
color of border
border-color
34
controle the border line style
border-style
35
change the right side of border color
border-right-color
36
change the right side of border line style
border-right-style
37
change the right side of border thikness
border-right-width
38
change width style and color of border at once
border: medium dashed red;
39
control corner redius of border
border-redius: 10px;
border redius: 50%;
40
change top right border redius
border-top-right-redius:10px
41
change every corner of the border to diffrent values at once
border-redius:10% 20% 30% 40%;
42
color of border in inspect
blue
43
color of padding in inspect
green
44
color of margin in inspect
orande
45
change the right side padding
padding-right
46
change the left side padding
padding-left
47
change top padding
padding-top
48
change bottom padding
padding-bottom
49
padding:10px;
change all sides padding to same value at once
50
padding:10px 50px;
__________________
padding:0 20px;
give vertical padding and horizantal diffrent valu
51
padding: 10 px 15px 20px;
chang top padding horizantal pading and bottom padding
52
padding: 10px 2ßpx 15px 5px;
change Top right botoom left padding
53
marigin: 10px auto;
the content will be at the center horizantally because vertical horizantal value set to auto
54
which element has a default margin
body
55
Dispalay property=> Inline
h1{dispaly:inline;}
56
Dispalay property=>Block
h1{dispaly:block;}
57
Dispalay property=> Inline-block
Behave like an inline element except width, hight, Margin & padding are respected
58
Dispalay property=> none
h1{dispaly:none;}
59
how to change opacity in rgb ?
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
How to change opacity in hexadecimal color ?
the last two digits show the opacity.
61
the position property=>what is default position status of elements ?
static
62
the position property=>
when our values for position will not work ?
when the position status is static
63
Css transition=> the position property=>relativ
it will keep the elements in the normal felow of decument.
#relativ{
top:100px;
bottom:-20px;
right:100px;
left:100px;
}
64
the position property=>Absolute
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
the position property=>what element is ancector element of
in this example?
hello
66
the position property=>Fixed
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
Css transition=> what is Css transition
it will allow us to animate the transition of one property value to another property value.
HTML=>
Transition
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
Css transition=> how to give Css transition delay ?
transition: background-color 3s 1s;
69
Css transition=>how to give everything a transition ?
transition: all 3s 1s;
not recomended.
70
Css transition=> how to send an element 500pix to right in 3 s when we hover ?
section div{
height: 200px;
width: 200px;
background-color: turquoise;
margin: 20px 0;
transition: margin-left 3s;
}
section:hover div{
margin-left:500px;
}
71
Css transition=> how can we start our transition very slow at the begining and then very fast at end?
by using transition-timing-function
72
transform=> with wich units we can rotate ?
deg, grad, rad, turn
73
transform=>rotate
rotate()
74
transform=>rotate in 3D
rotateX()
rotateY()
RotateZ()
75
transform=>Scale()
scale(2)
scale(2,1)
(hight scale,width scale)
76
transform=>Translate
it allows us to take one element and move it around
translate()
translate3d()
translateX()
translateY()
translateZ()
77
transform=>skew
it is going to skew an element on a 2D plane
skew()
skeX()
skew()
___________-
skew (30deg)
skew(10deg,25deg)
(x.y)
78
transform=>how can we combine translates ?
by space between them.
transform: translateX(-300px) rotate(180deg) scaleY(1.5)
79
Background=> how can we put an image instead of color on background ?
background-image:url("")
80
Background=>background-size=> contain
it is going to scale everything as large as possible without streching image but instead we getting a repeat.
81
Background=>background-size=> cover
its going to scale everything as large as possible without streching but it will crop
82
Background=>background-size=> 30% or 30px
.
83
Background=>background-position:
bottom
Top
left
right
84
Background=> You can change backgroun image and size at once
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
Background=>Background=> how to have multiple backgrounds ?
body {
background: url("https") center/40% no-repeat, url(https) center/40%;
}
86
where we should paste link google font gives us ?
after title in our HTML
87
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 ?
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
flex box=> how we turn on flex box
by display:flex;
89
flex box=>how is main axis direction by default in flex box?
it goes from left to right
90
flex box=> whith wich property will we change the main axis ?
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
flex box=>justify content property=> what is justify content property ?
it determains how the content disterbuted.
92
flex box=>justify content property=>
=>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
flex box=>flex wrap=> what is flex wrap?
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
flex box=>flex wrap =>
flex-wram: wrap;
flex-wram: wrap-reverse;
flex-wram: nowrap;
95
flex box=>align items=> what is align item property?
it will disterbute our items along the cross axis(vertically).
96
flex box=>align items=>
align-items:flex-start;
align-items:center;
align-items:flex-end;
align-items:baseline;
it gonna use the baseline of out text
97
flex box=>align content=>what is it ?
we control the space between rows with it.
98
flex box=>align content=>
align-content:space-betweenn;
align-content:flex-start;
align-content:flex-end;
align-content:centre;
align-content:space-around;
99
flex box=>align-self=>what is it ?
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
flex box=>Flex sizing properties=>Flex Spaces=>
flex-basis:400px;
flex-width:400px;
flex-grow:1;
101
flex box=>Flex sizing properties=>Flex Spaces=>what is the diffrence between flex-basis and flex-width ?
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
flex box=>Flex Spaces=> what is flex grow?
it is going to control the amount of space that an element takes up if there is available space.
103
flex box=>what property should be there so we can adjust what happend when we shring down ?
flex-wrap:wrap;
104
flex box=>whith what elements can we limit the behavior of our elements when we shrink ?
max-width
min-width
max-height
min-height
105
flex box=> by which property can we adjust how much it should shrink relativ to other elements
flex-shrink
106
flex box=>what is defaault value for flex-shrink ?
1
107
flex box=>what should i do if I want an element will not shrink ?
we will govr flex-shrink the value of 0
108
flex box=>flex=>what is this property ?
it is a shorthand property which allows us to set all all values in one property
109
flex box=>flex=>three values
flex:2 2 10%;
flex-grow/flex-shrink/shrink-basis
110
flex box=>flex=>two values
flex:2 2;
flex-grow/flex-shrink
or
flex:2 30px;
flex-grow/flex-basis
111
flex box=>flex=>one value with node (unitless ) number
flex:2;
flex-grow
112
flex box=>flex=>one value with united number
flex:10em;
or
flex:min-content;
flex-basis
113
what is Media queries ?
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
all mediaqueries start with what ?
@media
115
what is view port ?
it is what currently visible on my browser.
