CSS Flashcards

1
Q

where does CSS go ?

A

in a separate file.

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

how to link CSS in a separate file?

A

put in the head

<link></link>

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

what is the whole thing called? :
p {
color:red;
font-weight:bold;
}

A

a rule

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

in :
p {
color:red;
font-weight:bold;
}
what is p called?

A

the selector (the element we want to style.)

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

in:
p {
color:red;
font-weight:bold;
}
what is whats between the brackets called?

A

a declaration block composed of declarations

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

what is a declaration composed of?

A

a property and value pair.

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

what does the Cascade mean ?

A

CSS is read from top to bottom but what is below can override what is above.

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

what does CSS stand for ?

A

Cascading Style Sheet.

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

why do you use many fonts in css ?

A

backup

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

where do we link our google fonts?

A

before our stylesheet

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

how to turn code into comment on CSS?

A

select and ctr+/

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

how to underline text on css ?

A

text-decoration : underline;

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

how to change the size of a text in CSS?

A

font-size: ?px;

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

how to select an element that is the direct descendant of another element?

A

parent > child

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

how to select an element thats is the child but not the direct descendant of an element?

A

parent child

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

how to select an element that is the direct sibling of another element?

A

element + element (it only works if it has a sibling above it)

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

how to select one distinct element?

A

id syntax: #id (elements can only have one id, there can oly be one id of the same value in the document.)

18
Q

what are classes for?

A

they are for selecting multiple elements syntax : .className

19
Q

what is specificity

A

tags classes ids and other have points, to override a rule with a certain specificity you need the same or more value

20
Q

how many points of specificity does tags classes and ids have?

A

tag: 1 classes: 10 ids:100 other(inline !important):1000

21
Q

what is the box model ?

A

every element is a box composed of the element + padding+border and a margin bully to push it around

22
Q

how to apply margin or padding on the top and botom only?

A

padding 10px 0; it read clockwise starting from the top

23
Q

how to center an element?

A

margin: 0 auto;

24
Q

how to clear an element for floats?

A

clear:both;

25
Q

how to tell the browser to ignore borders in the box model?

A

box-sizing: border-box

26
Q

how to make an element disappear ?

A

display:none;

27
Q

how to contain float element?

A

use the cllearfix hack and give the class to the containing element

28
Q

what is line height?

A

it si the distance between two lines of text . it is controlled using the line-height property (general guide line is 1.5 or 150%)

29
Q

how to center a text vertically using line-height?

A

by using the same value of height and line height (mainly for short text like btns)

30
Q

how to add a background img?

A

background-image:url(‘img.png’)

31
Q

how to display a background image once?

A

background images by default repeat indefinitely, to not repeat use: background-repeat:no-repeat;

32
Q

how to get a linear gradient background?

A

background:linear-gradient(color1,color2)

33
Q

how to get a radial gradient background

A

radial gradiant means from the center outwards, its using the function background: radial-gradiant(color1,color2)

34
Q

how to control the direction of a linear gradiant background?

A

using to-left to-right to right-bottom etc or using degrees like 315deg (before the colors)

35
Q

how to set te size of a background image?

A

background-size: width height; (use auto for second value)

36
Q

what is the start attribute for ol?

A

the start attribute defines a number for the list to start <ol start='20'>

37
Q

what is the reversed attribute?

A

the reversed attribute, when used on the <ol> element, allows a list to appear in reverse order.

<ol>
</ol>

38
Q

how to create a dropdown list?

A

To create a drop-down list we’ll use the <select> and <option> elements. The <select> element wraps all of the menu options, and each menu option is marked up using the <option> element.</option></select></option></select>

39
Q

how to center a block element horizontally?

A

text-align:center;

40
Q

what is relative position?

A

it allows you to move the element relative to the position it would be if it was static using top bottom left and right.

41
Q

how to center an element using positions

A

the parent element should be position relative and the element should be absolute , move to center with left:50% top:50%
complete the centering with translate transform -50%, -50%