Brainscape's Knowledge GenomeTM

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


See full index

100DEVs > CSS Properties And Values > Flashcards

CSS Properties And Values Flashcards

1
Q

You want to underline text and make it red

A

Text-decoration : underline red ;

OR

Border-bottom : 2px solid red ;

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

Why is border - bottom a good way to do underlining?

A

More control. You can use padding to push away the underlining.

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

Change color of text?

A

Color: ___

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

Two groups of properties to change texts

A

Font

Text

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

Font - family : “ Helvetica Neue” , helvetica, Arial;

Why is helvetica Neue in quotation marks and not the others?

A

Any font family with 2+ words need quotation marks.

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

What property to italicize a font? What other values in this property group?

A

Font - style : italic (oblique, normal, inherit)

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

What declaration to make all texts capitalized but small? (What other values in this property?

A

Font - variant : small - caps (normal, inherit)

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

How to change thickness of font?

A

Font - weight : bold (or normal, bolder, lighter, inherit)

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

Font weights start at 100, 200, 300, up to 900. Which number is normal thickness? Which is bold? When can we use them?

A 
Normal = 400
Bold = 700

Only can use if typeface comes in those weights.

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

How to control spacing between lines of text? What is the normal spacing value?

A

Line - height : ___ px ;

Normal = 150% or 1.5

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

You have a box or button with a text in it. How to vertically center that text?

A

Height : 22px ;
Line - height : 22 px ;

Make height & line height the same value.

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

When writing shorthand for font properties, what do the letters mean below:

Font: A B C D / E F, F, F ;

Which letters are required? Why the / and the commas?

A 
A = font - style
B = Font - variant
C = Font - weight
D = font - size
E = line - height
F = all font family options

Only D & E are required. ? Separates them. Commas separate font families.

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

What’s a CSS pseudo-class. Ex?

A

Add to end of a selector to style an element in SPECIFIC CONDITIONS

Ex. Hover = content changes style when you hover over it.

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

You want to change the style of an element when you float your mouse over it. How?

A

Type : hover after your selector + your style rules

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

You want your text to be all the way right, or left, or centered… what property? What other values in this property group?

A

Text - align : left, center, right, justify, inherit.

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

Text align left vs float left?

A

Text align = moves text inside element

Float = moves ENTIRE ELEMENT

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

What property to underline your text? What other values are in this property group?

A

Text - decoration: underline, none, overline, line - through, inherit.

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

How to code MULTIPLE text decorations in the same element?

A

Separate with a space

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

How to indent text? What property?

A

Text - indent :

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

Text - indent : 20px

Vs

Text - indent : - 20px

A

20 px = indents inward (to the right)

  • 20 px = opposite direction
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How to make a shadow for your text? What property? What values?

A

Text - shadow : A B C D

A = horizontal distance
B = Vertical distance
C = blur radius
D = color
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

You want to put a shadow on your text that goes down 10 px and to the right 5 pixels . It will be a little blurry, and have an rgba of 2, 3, 9, .5. How to code?

A

Text - shadow : 5px 10px 3px rgba(2, 3, 9, .5) ;

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

How to change space between letters of a text?

A

Letter - spacing :

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

What does letter - spacing : relative ; mean?

A

Relative = keeps correct space between letters even as font-size changes

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

How to control space between text words? What property?

A

Word - spacing : __ ;

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

What are web-safe fonts?

A

Every gadget and computer has these fonts installed in them. 100% guarantee they will work if you use them.

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

How do you use fonts that you created by yourself?

A

You can embed them into your CSS with @ font - face selector

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

Make background of element a different color

A

Background - color : ____ ;

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

How to code a backup background color or property in your CSS? Give example

A

Write the backup above the first choice:

Div {

_ background - color : backup value (choose most accessible option)
_ background - color : first choice

}

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

What color values aren’t supported by all browsers?

A

Rgba and HSLa

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

Use an image as a background

A

Background - image : url ( “name of file “ ) ;

32
Q

What happens if you use a back ground image and ONLY code the image location? How to stop this?

A

Image will repeat from top Left to right and down until all element is filled.

Stop w/ background - repeat : no - repeat ;

33
Q

What are all the values of the background - repeat property? How are they different?

A

Repeat - x = horizontally repeat
Repeat - Y = vertically repeat
No - repeat = only show x1

34
Q

You coded a background image and want to control it’s position in the element. How?

A

Background - position : A px B px ;

A = horizontal distance from top L corner

B = vertical distance from top

  • if you only write 1 value = A, B will default to 50%
35
Q

What are other ways to position a background image besides pixels?

A

Background - position : Left/Right top or Left/Right bottom or percentages

36
Q

What does the shorthand for background property mean?

Background : A B C D E

A

A = color
B = url
C & D = position
E = repeat value

37
Q

Are gradients accessible in all browsers? How to make them?

A

Not all browsers. Only modern.

Create with background or background - image properties.

38
Q

How to make sure your background gradient shows in all browsers?

A

Use vendor prefixes:

  • WebKit -
  • moz -
39
Q

What are two different types of gradients you can make? How are they different?

A

Linear = color change from one side to the other

Radial = color change from center to outside.

40
Q

How do you code a linear gradient?

A

Background : linear - gradient ( color A, color B )

41
Q

What is the default direction of a linear gradient? How do you change it?

A

Default = top to bottom

Change = put the final direction before your colors ex:
Background : linear - gradient ( to right bottom OR degree 0 to 360, color A, color B ) ;

42
Q

How to make a radial gradient?

A

Background : radial - gradient ( color A, color B ) ;

43
Q

What if you want to use more than 2 colors for a gradient?

A

Write all you want but separate with commas

44
Q

You added multiple colors to a gradient but want to control their position on the gradient. How?

A

Background : linear - gradient ( to right, color A distance (ex. 85%), color B distance, color C distance…. ) ;

45
Q

How to use multiple background images on a page? How are they organized?

A

Background: image 1, image 2, image 3 ;

Separate with commas
Image 1 in front, 2 in the middle, 3 in the back.

46
Q

How to control size of your background image? What values?

A

Background - size : width height ;

Px, % , or auto, or cover, contain

47
Q

Background - size: cover vs contain?

A 
Cover = all element will be covered by image (can crop)
Contain = image will stretch until reaches element borders
48
Q

You want a background image to extend to just the padding. How? What about to the border?

A

Background - clip : padding - box (or border - box)

49
Q

You want the background image to start from inside the border, not the content. How?

A

Background - origin : border - box

50
Q

For an ordered list, you want to the list to start from a number DIFFERENT than 1. How?

A

< ol start = “ start number “ >

51
Q

You want your ordered list to have reverse numbers. How?

A

< ol reversed >

52
Q

For an ordered list, how to change the list order number in the middle of the list? What would happen after?

A

< ol >

< li > …
< li > …
< li value = “ new number “ >

  • all subsequent numbers will go from the new number value.
53
Q

How do you change the marker style on your list items?

A

List - style - type : ex. Square ;

54
Q

How to use an image as your list item markers ?

A

Very complicated but possible:

Li {
Background: url ( image path) o 50% no-repeat ;
List - style - type : none ;
Padding - left : 12 px ;

55
Q

How to control the position of your list markers?

A

List - style - position: outside, inside, or inherit.

Inside = texts will wrap around the marker.

56
Q

What is the short hand for styling your list markers?

A

List - style: A B ;

A = type 
B = position
57
Q

How to make a list appear horizontally?

A

Display : inline (or inline - block )

Inline block = better control

58
Q

What’s the difference between floating vs making list items inline/inline block

A

Changing list displays will remove the marker.

Float if you want to keep the marker.

59
Q

How to code an image?

A

< img src = “ location “ alt = description >

60
Q

How to change the size of an image?

A

Img {
Height : value ;
Width : value ;
}

61
Q

What are the different ways to position an image on a page?

A
  • Change display: block , inline, inline - block

- Float

62
Q

When to use image as a background in CSS or as a tag in HTML?

A

HTML if image has semantic value

CSS if image only for styling

63
Q

You want to style the inline frame in your html. How?

A

Iframe {
Border, width, height…
}

64
Q

When you use em for font size, where does the value come from? Why is this good?

A

EM’s get their font size from the parent font size. Great for responsiveness and easy updates.

65
Q

Em vs REM in font size? Benefits of each?

A

EM = the font size of the closest parent

REM = font size of the ROOT element (the html element). Great for accessibility

66
Q

How to write the structure of a media query?

A

@ media (minimum value) and (maximum value) {

67
Q

You want to make a media query for content between 0 and 600 pixels. How?

A

@ media screen and ( max - width : 600 px ) {

Screen = 0

68
Q

You want to write a media query for a screen between 600px and 900. How?

A

@ media (min - width : 601 px ) and ( max - width : 900 px ) {

69
Q

What must you add to your HTML, to ensure that all your media queries work?

A

< meta name = “ viewport “ content = “ width = device - width, initial - scale = 1 “ >

Add into the head of HTML

70
Q

How to make a really accessible font size?

A

Use a % value for your HTML font size. Then use only REMs

71
Q

What two properties are used to style table borders?

A

Border - collapse

Border - spacing

72
Q

Your table cells have a border that is super thick between them. How to fix it?

A

Table {

Border - collapse : collapse ;

73
Q

You want all the cells in your table to be separated by a 2 px space. How?

A

Table {

Border - spacing: 2px ;

74
Q

How to put a border around a table row?

A

No direct way. Put bottom borders under all th’s and tr’s and td’s

75
Q

You want to color your table rows to make them easier to read. How?

A

2 methods:

  1. Put a class in every OTHER tr & set background color.
  2. Tr : nth - child (even or odd ) {
    Background : color ;
76
Q

How to align table text vertically? Horizontally?

A 
Vertical = vertical - align : top, middle or bottom ; 
Horizontal = text - align : \_\_\_ ;
77
Q

You want to select the first section ONLY in a main.

A

Main section : first - child {

100DEVs (9 decks)

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