CSS Flashcards

1
Q

Css syntax

A

Selector {attribute:value;attribute:value;}

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

Synthax to add a comment

A

/* comment text */

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

Simple selector

A

An HTML element (i.e. div)

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

Id selector

A

idname{

declaration;
declaration;
}

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

Class selector

A

.classname{
Declaration;
Declaration;
}

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

How to select a class of an element?

A

p.classname{
declaration;
}

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

Is it possible to apply more than one class?

A

Yes

<p></p>

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

Universal selector

A

*{
Delclaration;
Declaration;
}

The rule will affect every html element on the page

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

Group selectors

A

h1,h2,h3,p {
Text-align:centre;
}

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

How many ways are there to insert CSS?

A

EXTERNAL CSS style sheet

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

In case of rule conflict which one applies?

A

Last rule read will apply

Dependind on the order, usually:

  1. Stylesheet
  2. Style tag
  3. Inline style

Browser default shall apply where the above are missing

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

Attribute color

A

Changes font color

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

Attribute background-color

A

Modifies background color

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

Attribute border

A

Border:2px solid color

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

Color: r g b a

What alpha determines?

A

Determines transparency

Values 0.0 to 1.0

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

Border-style values

A
Dotted
Dashed
Solid
Inset (form)
Outset (button)
Mixed
(...)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How to set border width?

A

Border-width:value in px/cm/em;

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

Define border color

A

Border-color: value;

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

How to set rounded corners

A

Border-radius: value in px;

20
Q

How to set all values in one line for each part of the border?

A

Border-bottom: width value style value color value
Border-top: width value style value color value
Border-right: width value style value color value
Border-left: width value style value color value

21
Q

Margin values

A

Auto
Value in px/cm/etc.
%
Inherit (inherited from the parent element)

22
Q

Are negative values for margins allowed?

A

Yes

23
Q

How to write margin values in one line?

A

Margin: top right bottom left

24
Q

What is padding?

A

The space between content and margin

25
Q

How to keep the width of an element no matter the padding added?

A

Box-sizing: border-box;

26
Q

What property defines the length in the y axis?

A

Height: value in px/cm;

27
Q

How to set the maximum width of an object?

A

Max-width:value in %/cm/etc;

28
Q

What effect has max-width property on width property?

A

Max-width overrides width

29
Q

What is the CSS box model?

A

Consists on a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

30
Q

How is the total width of an object calculated in the box model?

A

Total element width = width + left padding + right padding + left border + right border + left margin + right margin.

31
Q

What is an outline?

A

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out.

32
Q

What are Outline values?

A

outline-style

outline-color (invert)

outline-width

outline-offset

outline (one line) width style color

33
Q

Color

A

Sets the color of text

34
Q

CSS text properties

Direction

A

Specifies the text direction/writing direction

35
Q

Css text

Letter-spacing

A

Increases or decreases the space between characters in a text

36
Q

Css text

Line-height

A

Sets the line height

37
Q

Css text

text-align

A

Specifies the horizontal alignment of text

38
Q

Css text

Text-transform

A

Controls the capitalization of text

39
Q

Css text

Text-overflow

A

Specifies how overflowed content that is not displayed should be signaled to the user

40
Q

Css text

vertical-align

A

Sets the vertical alignment of an element

41
Q

Display property

A

Specifies if/how an element is displayed.

42
Q

Display values

A

Block
Inline
Flex
Grid

43
Q

How Display:block; lays out an element?

A

Block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

44
Q

How display:inline; lays out an element?

A

An inline element does not start on a new line and only takes up as much width as necessary.

45
Q

What are the states of an hyperlink?

A

Link: a (unvisited)

Link: visited (visited)

Link: hover (mouse over it)

Link: active (while clicking on it)

46
Q

What is the style order rule for an hyperlink?

A

1 a:
2 visited:
3 hover:
4 active:

47
Q

How to remove default color and underline of an hyperlink?

A

Text-decoration: none;