CSS

Question 1

where does CSS go ?

Answer 1

in a separate file.

Question 2

how to link CSS in a separate file?

Answer 2

put in the head

<link></link>

Question 3

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

Answer 3

a rule

Question 4

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

Answer 4

the selector (the element we want to style.)

Question 5

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

Answer 5

a declaration block composed of declarations

Question 6

what is a declaration composed of?

Answer 6

a property and value pair.

Question 7

what does the Cascade mean ?

Answer 7

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

Question 8

what does CSS stand for ?

Answer 8

Cascading Style Sheet.

Question 9

why do you use many fonts in css ?

Answer 9

backup

Question 10

where do we link our google fonts?

Answer 10

before our stylesheet

Question 11

how to turn code into comment on CSS?

Answer 11

select and ctr+/

Question 12

how to underline text on css ?

Answer 12

text-decoration : underline;

Question 13

how to change the size of a text in CSS?

Answer 13

font-size: ?px;

Question 14

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

Answer 14

parent > child

Question 15

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

Answer 15

parent child

Question 16

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

Answer 16

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

Question 17

how to select one distinct element?

Answer 17

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

Question 18

what are classes for?

Answer 18

they are for selecting multiple elements syntax : .className

Question 19

what is specificity

Answer 19

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

Question 20

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

Answer 20

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

Question 21

what is the box model ?

Answer 21

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

Question 22

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

Answer 22

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

Question 23

how to center an element?

Answer 23

margin: 0 auto;

Question 24

how to clear an element for floats?

Answer 24

clear:both;

Question 25

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

Answer 25

box-sizing: border-box

Question 26

how to make an element disappear ?

Answer 26

display:none;

Question 27

how to contain float element?

Answer 27

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

Question 28

what is line height?

Answer 28

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%)

Question 29

how to center a text vertically using line-height?

Answer 29

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

Question 30

how to add a background img?

Answer 30

background-image:url('img.png')

Question 31

how to display a background image once?

Answer 31

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

Question 32

how to get a linear gradient background?

Answer 32

background:linear-gradient(color1,color2)

Question 33

how to get a radial gradient background

Answer 33

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

Question 34

how to control the direction of a linear gradiant background?

Answer 34

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

Question 35

how to set te size of a background image?

Answer 35

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

Question 36

what is the start attribute for ol?

Answer 36

the start attribute defines a number for the list to start

Question 37

what is the reversed attribute?

Answer 37

the reversed attribute, when used on the

element, allows a list to appear in reverse order.

Question 38

how to create a dropdown list?

Answer 38

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

Question 39

how to center a block element horizontally?

Answer 39

text-align:center;

Question 40

what is relative position?

Answer 40

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

Question 41

how to center an element using positions

Answer 41

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%