Brainscape's Knowledge GenomeTM

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


See full index

Complete Web Development - Udemy > Section 6 - CSS Properties > Flashcards

Section 6 - CSS Properties Flashcards

1
Q

What do you call the code that comes after the colon?

Ex:

html {
color: red
}

A

it’s called the value (red), what you want to set the property to

the property is first (color)

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

The way CSS rules work is that the first part is the ____

A

property

html {
background-color: red;
}

property is: background-color

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

If you’re not sure what a property does, what can you check?

A

the MDN docs

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

If you use the “color: blue” property and value, what does that do?

A

Changes the text color

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

What are named colors? Where can we find them? (2)

A
  1. All the colors we can use on our website (default CSS colors)
  2. We can find them by going Googling “MDN Docs named color”
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are hex codes?

A

A different way of representing the larger number code for the color instead of just “red”

(hex codes are for colors that are blended RGB)

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

What does the “font-family” property do?

A

sets the font typeface you want to use

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

What does the “font-weight” property do?

A

Allows you to apply bold, underline, italics, etc.

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

How big is 1px?

A

1/96th of an inch
or
0.26 mm

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

Besides pixels, what’s another common way to represent font size with CSS properties? What is its abbreviation?

A

using a point “pt”

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

The point property is used by what?

A

many different applications (like Word)

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

When you’re using 12 points on your web page, what can you expect it to look like in comparison?

A

When you’re using 12 points on your webpage, you can expect that when the website is at 100%, it will look about the same as a 12 font on your Word document.

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

What are the 4 different ways to represent font size in CSS properties?

A
  1. px (pixels)
  2. pt (point)
  3. em (relative to parent)
  4. rem (relative to root)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is “em” definition?

A

defined as the full width of an “m” letter of the alphabet (since it’s one of the widest letters)

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

For font-size, how does “em” work?

A

You set a tag to have the “em” property (h4 for example), and if it has a parent it will inherit the size of the parent at a scale of the number in front of the “em”.

Example:
h3 font-size: 20px
{h4: 2em}
2 x (parent size, like 20px) = 40 px

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

What is “rem”? How does it work?

A

Works the same way as em except it’s relative to the root of your HTML file

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

What is the “root” of your HTML file?

A

Usually an <html> element that encloses everything inside (remember, from earlier lessons? The veggie burger layers?)

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

What method of changing the font size does she recommend using for web developers? Why? (2)

A

rem

(using em is too messy, rem is more consistent)

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

What type of font sizes are “pixel” and “point”?

A

static font sizes

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

What type of font sizes are “rem” and “em”?

A

relative font sizes

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

How do you use “rem” and “em” in code to set the font size?

A

rem {

font-size: 1rem;
}

font-size: 1em;
}

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

What is font-weight?

A

A property to change the font-weight: bold to make the text look heavier

(heavy -> weight -> bold)

h1 {
font-weight: bold
}

22
Q

What are 3 ways to change the font-weight?

A
  1. Basic keywords
  2. Relative to parent (lighter or bolder)
  3. Number (100 - 900) light -> bold
23
Q

What is “font-family”?

A

the (property) code we use that determines what you want your font to look like (typefaces)

(Values like: Helvetica, sans-serif, arial)

h1 {
font-family: Helvetica, sans-serif
}

24
Q

With the font-family property, what is often done and is also a very important step?

A

You write the font name, then a comma and a backup generic font type (that’s equivalent) in case the first font name isn’t available on that OS

h1 {
font-family: Helvetica, sans-serif
}

25
Q

What’s the difference between sans-serif and serif? (2)

A

sans-serif font type is basically all right angles
serif has little feet/decorations

26
Q

Helvetica is the same as.. ?

A

sans-serif (which is why it’s used as a backup in the font-family)

27
Q

Times New Roman is the same as…?

A

serif

28
Q

What are the 2 main types of different typefaces?

A

sans-serif
serif

(Helvetica, Times New Roman)

29
Q

How do you code a longer font name with spaces?

A

You add quotation marks around the font in order to tell the CSS file there’s spaces in the name

h3 {
font-family: “Times New Roman”, serif
}

30
Q

What’s a way to insert a link into your file that will pull in a font from the internet for any user regardless of OS? (Step 1)

A

Use the embed code from fonts.google.com for example, insert it under the <style> element but still in the head section</style>

31
Q

On Windows, what’s the default sans-serif type font?

A

Arial

32
Q

What’s the 2nd step to linking a custom online google font to your webpage?

A

Add in the copied bottom section of the Google font code (CSS class for a variable style) to your targeted element using a desired selector (in the CSS section)

h1 {
font-family: “Caveat”, cursive;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

33
Q

The generic fonts you see depend on the computer and browser you use. T or F?

A

True

(that’s why you can specify and link to a specific font so it’s the same for everyone)

34
Q

What property do you use to align text?

A

text-align

h1 {
text-align: center
}

35
Q

What are 4 examples (there’s more) of values Angela says we can use with the text-align property?

A
  1. left
  2. right
  3. start
  4. end
36
Q

Do changes that you make to the CSS in Chrome Developer Tool affect the original file?

A

No

37
Q

What’s the reason that some CSS code is striked out in the Chrome Developer Tools?

A

We applied a custom CSS rule that conflicts with the automatic, default rules

(our own rules override existing rules like default font color)

38
Q

What’s the purpose of the “Computed” tab in the Chrome Developer Tools?

A

You can see in one place what’s being applied (a cleaner way to see)

like how much of RGB is being applied to the text font color

39
Q

What’s the purpose of the “Elements” tab in the Chrome Developer Tools?

A

Under Styles, it shows us the styles that have been applied to the elements we select

40
Q

What forms the important CSS concept known as the “Box model”? (5)

A
  1. Margin
  2. Padding
  3. Border
  4. Width
  5. Height
41
Q

How many values can the border property take?

A

3
Border: 10px solid black

42
Q

For the box model, what are the 2 ways we can add numbers?

A
  1. pixels
  2. percentages

height: 300px;
width: 100%;

43
Q

One important thing to remember in terms of width/height when changing the border size is?

A

changing the border size does not change the height/width (it remains unaffected by changes)

border size increases -> increases outwards not inwards

44
Q

How many values can border-width take?

A

4 values maximum

45
Q

In what direction does border-width go in when assigning values?

A

clockwise (when assigning values)

46
Q

What happens when you only set 2 values for border-width?

(q: only done with border-width? unsure)

A

the first number is for the top/bottom
the second number is for the left/right

0px 20px

47
Q

What does the ‘padding’ property do?

A

adds padding/space between the element and the border

48
Q

What does the ‘margin’ property target?

A

the outside of the border, the spacing between elements and other divs

49
Q

Why is the box model useful?

A

It’s really, really handy when adding items to your website and determining how they look and are placed relative to each other

50
Q

What 3 box model properties function the same way when it comes to values?

(they can all accept multiple values)

A
  1. padding
  2. margin
  3. border-width

(clockwise values)

51
Q

What is the content division element used for?

A

to create our own “custom” invisible boxes to wrap around elements

content goes in between tags, as many elements as we want

52
Q

What tag is used for the content division element?

A

<div> </div>

<div> </div>

53
Q

What are “divs”?

A

The separate boxes containing content in between the opening and closing tags

(separate, custom content boxes)

Complete Web Development - Udemy (9 decks)

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