CSS Flashcards

(42 cards)

1
Q

What does CSS stand for?

A

Cascading Style Sheets

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

What is the purpose of CSS?

A

It alters and styles the appearance of a webpage. For example, it changes font, text color, size, spacing, etc.

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

What are the parts of the CSS syntax rule?

A
  1. Selector
  2. Declaration
  3. Property
  4. Value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the selector in a syntax?

A

The selector is the HTML element that is being styled.

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

What is the declaration in a syntax?

A

The declaration is a pair of property and value, separated by a colon. It is closed with a semicolon at the end.

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

What is a declaration block?

A

It is a structure that begins with an opening brace ( { ) and ends with a closing one ( } ).

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

What is the property in a syntax?

A

The specific aspect or characteristic of the selector that is being modified.

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

What is the value in a declaration?

A

The setting for the property, such as blue as color, 30px as font-size, or 2px solid black as border.

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

How can you type a comment in CSS?

A

By using this text: /*(insert text here)*/

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

How are colors specified?

A

With predefined color names (red, yellow, sky blue) or RGB, HEX, HSL, RGBA, and HSLA values.

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

Which property sets the background color of an element?

A

background-color

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

Which property sets the color of a text?

A

color

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

What does RGB stand for?

A

Red Green Blue

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

How does RGB function?

A

Each parameter is set from 0 to 255 (0 being the lowest intensity and 255 being the highest). The more intense a color is, the more it will be visible.

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

How can you make shades of grey with RGB?

A

By aligning the parameters to be equal.
Ex: rgb(60, 60, 60)

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

What does the A mean in RGBA and what is its function?

A

Alpha.
The function of alpha is to adjust the opacity of a color from the value of 0-1. 0 is fully transparent, and 1 is not transparent at all.

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

What is a HEX color?

A

A HEX, or hexadecimal color, is specified with #RRGGBB. The RR is red, the GG is green, and the BB is blue. They describe the components of a color.

18
Q

How are HEX colors measured?

A

The values are between 00 and ff, which is equivalent to 0 and 255 in RGB.
Ex: #ff0000 is red because red is the highest value.

19
Q

How can you make shades of grey with HEX?

A

Use equal values for all three light sources.
Example: 3c3c3c, f9f9f9

20
Q

What does HSL stand for?

A

Hue Saturation Lightness

21
Q

I don’t really care about HSL so I’m not gonna bother to elaborate further

A

Okay πŸ‘

22
Q

Which property states the opacity of an element?

A

opacity
Tip: The value spans from 0.0 to 1.0. The lower the value, the more transparent.

23
Q

Which property specifies an image to use as a background?

A

background-image

24
Q

Which value is used to input an image as a background for the background-image property?

A

url(β€œβ€¦β€)

25
By default, a background image would repeat both horizontally and vertically. How can you prevent this from happening?
By using the background-repeat: no-repeat; declaration.
26
Which declaration repeats a background image horizontally?
background-repeat: repeat-x; Tip: X refers to the x-axis, which is horizontal.
27
Which declaration repeats a background image vertically?
background-repeat: repeat-y; Tip: Y refers to the y-axis, which is vertical.
28
Which property specifies the position of a background image?
background-position
29
Which property specifies whether the background image would be fixed or scroll (scroll meaning that the image goes down or up with the rest of the content)?
background-attachment
30
Which property is used for shorthand coding for backgrounds? (by shorthand, I mean without typing the extra properties)
background
31
Which property specifies the style of a border, or what kind of border to display?
border-style
32
Which property defines a border's width? And what predefined values are set for that property?
border-width thin, medium, or thick
33
Which order does styling a border (or anything like margins) go?
Clockwise (top, right, bottom, left)
34
Which property specifies a border's color?
border-color
35
Which property is shorthand for border-style, border-width, and border-color?
border
36
Which property rounds borders?
border-radius
37
Which properties sets the characteristics of a border's sides?
border-right border-left border-bottom border-top
38
What do margins do?
Margins create space around elements outside of any defined border.
39
Which properties specify the margin of an element's side?
margin-top margin-bottom margin-left margin-right
40
What is the shorthand property for all margin properties?
margin
41
Which value automatically centers an element horizontally?
auto
42
What does padding do?
Padding creates space between elements and their borders.