Brainscape's Knowledge GenomeTM

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


See full index

100DEVs > CSS Basics > Flashcards

CSS Basics Flashcards

1
Q

Where do you write your CSS?

A

In a separate file

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

What part of HTML do you link your CSS?

A

The Head

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

How to write link tag to link CSS to HTML? Where do you write it?

A

Write in HTML head

< link rel= “stylesheet” href= “path” >

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

p{
color: red;
font-weight: bold;
}

What is P?

A

The selector

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

p{
color: red;
font-weight: bold;
}

What is:

Color: red;

A

A declaration (line)

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

p{
color: red;
font-weight: bold;
}

What is

{
color: red;
font-weight: bold;
}

A

Declaration Block

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

What is

p{
color: red;
font-weight: bold;
}

A

A rule

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

p{
color: red;
font-weight: bold;
}

What is color?

A

Property

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

p{
color: red;
font-weight: bold;
}

What is red?

A

A value

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

p{
color: red;
font-weight: bold;
}

What happens if you forget ;?

A

The stuff after might break/ no render

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

What is the cascade principle?

A

Read CSS from top to bottom.

Code below overrides code above

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

Different parts of CSS have stronger value than others. What is this point system called?

A

Specificity weight

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

p{
color: red;
font-weight: bold;
}

p{
color: blue
}

If you want P to be red what can you do? What ex.

A

Give P a higher specificity weight (ex. Add a class)

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

4 ways to CSS color?

A

Word
Hex
RGBa
HSLa

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

What color property?

0, 100%, 50%, 1

A

HSLa

Hue, saturation, light

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

What CSS color property? What does the last number mean?

(255, 0, 0, 1);

A

RGBa.

Last number = transparency

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

FF0000

What color property?

A

Hex

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

What’s an alpha channel and what property do you find it? What’s the range?

A

Alpha = the a in RGBa or HSLa = transparency label

Range = .01 -1

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

How to write CSS font-family? Explain the different parts.

A

Write link in Head of HTML. Then in CSS…

P{
font-family: ‘sans pro’, ‘helvetica’ sans-serif;

Sans pro = 1st choice
All others = backups

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

How to link font family to HTML? Where to write it? What does it look like on the CSS side?

A

In head.
Html = < link href = “ URL of font “ rel = “ stylesheet “ >

CSS = font - family : ‘ font 1 ‘ , ‘ font choice 2 ‘ font choice 3 ;

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

Where do you get new font links?

A

Check google fonts

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

When adding fonts to your HTML, do you put the link before or after your CSS stylesheet link? Why?

A

Before!

The CSS has instructions for the font. CSS cant load the font, if the font not available

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

Section
——p

How to make p red?

A

Section > p{
color: red;
}

> is a parent child selection

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

Section
>article
»p
What is article to section?

A

Article = direct descendant of section

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

2 p’s are nested in a section. What’s their relationship?

A

Siblings

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

Section
>article
»P
What is section and article to P?

A 
Section = grandparent
Article = Parent
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What’s the difference between parent>child and parent child?

A

Parent > is direct child selection

Parent child = all child’s in a parent

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

You use P + P selection. Why does only the 2nd P get targeted?

A

P + P = all the P’s following a P. Initial P doesn’t follow a P

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

This model talks about how different element takes up space. And how they’re spatially related to each other?

A

The box model.

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

4 important parts of box model?

A

Height/width
Padding
Border
Margin

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

Every single element in HTML is a _____

A

Box

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

If box width = 100px, and box border width = 10px, padding right=20px. how wide is total section?

A

140px!

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

Border, margin, content, padding. Which is outermost to inner most?

A

Margin, border, padding, content

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

What’s the point of padding?

A

Creates distance between content and its border.

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

H2.likesquack.dinosaur{

If the selector has no space, what does that mean?

A

Means all elements that are H2s WITH likesquack class WITH dinosaur class. No nesting. All simultaneous.

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

What direction will text go if you float it Left? Right?

A

All the way up, all the way Left. Right = opposite

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

How to apply a rule to multiple selectors?

A

Use commas! (Header,footer{)

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

How to select a class in CSS (ex. Class=zebra)

A

.zebra

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

How to select an ID in CSS (ex = fruit)

A

fruit

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

What are the 3 basic selectors in CSS?

A 
1 = type (ex. P, div, H1..)
2= class (.zebra)
3= ID (#animal)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

How to link CSS into HTML? What part of HTML do you link CSS?

A

Link inside head.

link rel=stylesheet href = file location.

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

What are two CSS resets? How are they different?

A

Eric Myer’s reset = normal popular variant

Normalize.css = more advanced reset.

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

How to write a CSS comment?

A

/* content */

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

What is the issue with the following CSS selector? Why?

.hotdog p.mustard

A

Not best practice to preface a class selector w/ an element. Better to select all elements of a given class, not just one type of element. .hotdog .mustard is better.

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

In a combined selector, which one is the key selector? What are the other parts called?

A

Key selector = the last selector. All other before it = pre-qualifiers

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

How many different classes can you assign to an element? Give ex.

A

Many. Ex. < a class = bean bean-tower > < / a > (2 classes)

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

What does em mean in CSS? Example?

A

For length sizing. Em = how many times size of font. Width = 5em;

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

How to write two classes for one tag? (Ex. Cat + dog classes)

A

Class = “ cat dog”

49
Q

all elements have default display. How can you override it? Ex. Change a block to an inline level element.

A

P {
Display: block (inline or inline-block){
}

50
Q

how to CSS code a 40in margin on the left of a content box, but a 20 inch margin on the right?

A

Margin - right: 20px ;

Margin - left: 40 px;

51
Q

Block, inline-block, and inline level elements. Which one cannot have a custom height/width? Why?

A

Inline levels = must change to only fit their content

52
Q

You want to change an inline element and make it bigger with a border. How?

A

Change the display to inline-block or block.

53
Q

can you use margins on inline level elements?

A

L and R margins yes

Top and bottom margins no

54
Q

what does margin: 10px 20px ; mean?

A 
10px = top and bottom
20px = left and right
55
Q

What does padding: 10px 20px 0 15px ; mean?

A

10px on top, 20px right, 0 bottom, 15 left. (Clockwise)

56
Q

What different types of borders?

A

Solid, double, dashed, dotted.

57
Q

How do I create a border only on the bottom of content?

A

Border-bottom: …

58
Q

How to code rounded corners on a box?

A

border - radius

59
Q

What does x and Y mean in this CSS code?

Border - radius: X Y ;

A 
X = top L & bottom R corner 
Y = Top R and bottom L corner
60
Q

What does A B C D mean in the following?

Border - radius: A B C D ;

A 
A = Top L
B = Top R
C = Bottom R
D = Bottom L
61
Q

What are vendor prefixes? Are they important?

A

Prefixes to properties to allow different browser compatibility; ex: - moz - = Mozilla

Good for old browsers, slowly not being used anymore.

62
Q

What is the “ box - sizing “ property? What are it’s values?

A

Different way to change an element size.

Values = content - box, padding - box, border -box

63
Q

Explain the content-box value for the box -sizing property.

A

Same as traditional box model. You specify height width padding, etc.

64
Q

What is the padding-box value for box - sizing property? Is it popular?

A

More padding = smaller box width to compensate. Deprecated code - dont use anymore

65
Q

Explain the border-box value in a box-sizing property.

A

Makes everything (border, padding, element) = total width/ height

66
Q

Of all the values of the box-sizing property, which one is the best? Why?

A

Border - box because we don’t need to think about math when deciding dimensions.

67
Q

What are developer tools?

A

Filters in browser to help you analyze your code.

68
Q

what does a comma mean in CSS

Ex: p , h1 {

A

It means AND

Ex. All paragraphs AND h1’s…

69
Q

Explain the “auto” value when writing margin or padding widths

A

Auto = automatic = computer will make L and R side equal and center the content.

70
Q

What are two basic ways to position content in CSS?

A

Floats

Inline-Blocks

71
Q

What do floats do?

A

Pull content away from page flow and move it somewhere

72
Q

What kinds of values are used with the float property?

A

Left, right

73
Q

What happens when floater has a parent? When it doesn’t have a parent?

A

Parent = float to edge of parent element

No parent = float to edge of page

74
Q

What can happen to the elements around a floated element?

A

The content will wrap around and also might be affected visually.

75
Q

If you don’t want other elements to wrap around your float, what can you do?

A

Clear or contain the float

76
Q

How do you clear floats?

A

Clear: (left, right, or both) ;

77
Q

What does it mean to contain a float?

A

You nest the floated element into a parent element, and then clear the parent element. This prevents the float from visually changing the elements around it.

78
Q

What’s the difference between containing and clearing a float.

A

Both do the same thing. But containers, prevent floats from changing the elements around them.

79
Q

How to contain a float? What’s a clear fix?

A

Nest it inside another element and assign that element a class = “clearfix”

In CSS code…
. Clearfix : : after {
Content: “ “ ;
Clear: both ;
Display : table ; 
}
80
Q

Inline block elements naturally have a small space between them. How to override this space? (2 easy ways)

A

1 = start opening tag of next section on same line as closing tag of previous section.

2 = start comment after previous section closing tag, end comment before next section opening tag.

81
Q

Besides floats And inline-block elements, what can you do when you want to position an element in a really specific location?

A

Use a position property with box-offset properties.

82
Q

How does a position property work? What values does it have?

A 
Position = whether or not code will be part of the html flow.
Values = static (part of code flow), relative or absolute.
83
Q

You want to move a section/box down 2 inches, and right 2 inches. What do you code?

A 
Section { 
Top: 2in ; 
Position: relative;
Left: 2in ; 
}
84
Q

Position w/ box offset vs floats

A

Float pulls code from html = many problems with surrounding content.

Position = saves the content’s spot, and puts it where you want it.

85
Q

Position: relative vs Position: absolute

A

Relative = content stays in code flow . keep content’s original spot, and can move it anywhere.

Absolute = content rips from code flow. Content moves in relation to its parent (that is relatively positioned. No relatively positioned parent = content moves in relation to body.

86
Q

What display value completely hides an element and removes it from the html code?

A

Display: none ;

87
Q

If you want to center an element, how do you set the margin?

A

Margin: 0 auto ;

88
Q

width vs max - width property?

A

Width = defines size but will change depending on window size.

Max - width = no changes regardless of window size.

89
Q

When coding box - sizing : border - box, what prefixes should you write, to adapt to all browsers?

A
  • WebKit - box - sizing : border - box ;
  • moz - box - sizing : border - box;
    Box - sizing : border - box ;
90
Q

What are the values to the position property?

A

Static, relative, absolute, fixed

91
Q

What does position : static mean?

A

Static = default value. Aka “not positioned”.

92
Q

What does position : relative mean?

A

If used with top, bottom, left, or right properties, element will be moved from original position, but stay in the code flow; no other elements will take its spot.

93
Q

What does position: fixed mean? What is it good for?

A

Element will stay in whatever place you want, even if scrolling on webpage. Great for “back to top” buttons.

94
Q

What modern way to write a clearfix?

A

. Clearfix {
Overflow: auto ;
Zoom: 1 ;
}

95
Q

When you use percent on content sizing, the content will be a percent of what?

A

It’s container.

96
Q

What is responsive design?

A

Your website responds to every browser and device to look good in all forms.

97
Q

What are media queries? Give an example.

A

CSS codes that activate when a condition happens; usually for changes in screen sizes.

Ex. When a screen becomes smaller like a phone, the webpage layout changes.

98
Q

You want to write a media query that changes all texts to the color black when a screen/window becomes smaller than 500px. How?

A

@ media ( max - width: 499px ) {
Font - color : black
}

99
Q

@ media ( min - width : 600 px)

What does that mean?

A

Code will ONLY activate when the screen is minimum 600 px

100
Q

How do you write a media query for ALL types of screens and media?

A

Just “ @ media “

Or @ media all

101
Q

When making a layout using inline-block elements, what property must you always include.

A

Vertical - align : top

102
Q

When using a NEW CSS property, what must you do to ensure older browser compatibility? Give an example.

A

Use prefixes. Ex. - moz -

103
Q

What’s a flexbox? How does it compare to floats?

A

Newest CSS technique to make layouts. A lot easier and better than floats.

104
Q

What is font-weight?

A

How thick or thin the font is

105
Q

How to check your code on the browser?

A

Highlight > right click > inspect

Or view > developer > tools

106
Q

Do you always have to write your css reset at the beginning of all your CSS documents?

A

No. You can save to separate doc and link it to your HTML.

107
Q

Normalize CSS vs reset CSS

A

Reset = deletes all default browser styles

Normalize = keeps the default styles, but makes them all the SAME in every browser.

108
Q

How to code a clearfix?

A

. Clearfix : after {

Content: “ . “ ;
Display: block;
Clear: both;
Visibility: hidden;
Line - height: 0 ; 
Height: 0 ;
109
Q

What’s the box model hacK?

A

Start with:

Box - sizing : border - box ;

110
Q

Typeface vs font

A

Typeface = what we see

Font = file that contains typeface

111
Q

Text - shadow vs box - shadow?

A

Text = for text

Box = for entire element

112
Q

What are the values in a box - shadow property:

Ex. Box - shadow: A B C D E F

A 
A = inset (shadow inside or outside of box)
B = horizontal distance
C = Vertical distance
D = blur radius
E = spread (shadow gets bigger or smaller than element)
F = color
113
Q

How to capitalize only the first letter of a text?

A

Text - transform : capitalize ;

114
Q

How to make all letters of a word capitalized? What about all lower case?

A

Text - transform : uppercase (lowercase)

115
Q

What are all the values in the text-transform property?

A

Uppercase, lowercase, capitalize, none, inherit.

116
Q

What are Boolean attributes?

A

Don’t require values. Just on or off.

Ex. Autoplay

117
Q

What’s critical pass CSS?

A

Putting CSS in your HTML to facilitate early visual loading. Amazon tactic.

118
Q

When creating media queries, how can you reference typical screen sizes for different devices?

A

Use the inspect tool on chrome.

119
Q

How to select other siblings but not directly?

A

P ~ P

100DEVs (9 decks)

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