Brainscape's Knowledge GenomeTM

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


See full index

IT > CSS > Flashcards

CSS Flashcards

1
Q

What is the basic syntax of CSS made up of?

A

A selector, property and value

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

What does a basic css syntax look like?
An example.

A

div.bold-text {
font-weight: 700;
}

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

Label the parts of a syntax. Selector.

div.bold-text {
font-weight: 700;
}

A

(div.bold-text)

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

Label the parts of a syntax. Property.

div.bold-text {
font-weight: 700;
}

A

(font-weight:)

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

Label the parts of a syntax. Value.

div.bold-text {
font-weight: 700;
}

A

(700;)

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

What are selectors?

A

HTML elements to which CSS rules apply.

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

What are universal selectors? What’s their syntax?

A

The universal selectors will select elements of any type and the syntax for it is a simple asterisk

  • {
    color: purple;
    }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are type (element) selectors? syntax?

A

A type or element selectors will select all element of the given element type, and the syntax is just the name of he element.

div {
color: white;
}

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

What are class selectors?

A

Class selectors will select all elements with a given class

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

What does a class attribute look like and what are their functions?

A

[<div (class=“name”)> …]

Just an attribute, like a tag you put on an HTML element.

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

Rules and features of a class attribute?

A

You can add as many class as you want to an element using spaces.

They aren’t required to be unique.

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

What does a class selector syntax look like?

A

.alert-text {
color: red;
}

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

What are ID selectors?

A

They select an element with a given ID

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

What is an ID attribute? What does it look like?

A

An attribute you place on an HTML element.

[ <div id=“title”> … ] I

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

What do ID selectors look like?

A

title {

background-color: red;  }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Rules for ID attributes and selectors

A

Case sensitive
Only use when necessary
ID’s are unique and cannot be repeated
Should not contain whitespaces

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

How to group selectors?

A

Group them in a comma separated list, if they share declarations.

.read,
.unread {
color: white;
background-color: black;
}

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

How to chain selectors?

A

If you want to add a style separately to an element that contains both classes or ids.

.subsection.header {
color: red;
}

.subsection#preview {
color: blue;
}

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

chain selectors rules

A

You can’t chain more than one type selector.

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

What are descendant combinator?

A

Allows us to combine multiple selectors with parent child relationships

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

How does a descendant combinator look like?

A

A single space between selectors.
.ancestor .contents {
/* declarations */
}

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

Rules for descendant combinator

A

You can add as many as you want .

Avoid elements that need a large amount of nesting, can get complicated.

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

Function of the color property?

A

Sets an element’s text color

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

Function of background-color property?

A

Sets the background color of an element.

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

What do color properties accept?

A

A keyword like red
The transparent keyword
HEX, RGB, and HSL

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

Function of the font-family property?

A

Determines what font an element uses.

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

What does the value of the font-family property look like?

A

Single value or comma separated list of values that determine what font an element use.

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

Why do some values of the font-family property have double quotes?

A

A font family name like “DejaVu Sans” which uses double quotes because of space brown the word

A generic family name like sans-serif
which never used quotes cus no space,

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

Why add a list of fonts?

A

For when a browser doesn’t support one it keeps on going down till it finds the one it supports.

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

Function of the font-size property?

A

Set the size of the font

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

How does the font-size property value look like? Rules?

A

font-size: 22px
No spaces in the values

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

Function of the font-weight property?

A

Affects the boldness of the text

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

font-weight property values. Rules.

A

The value can be a keyword.
font-weight: bold

Or a number between 1-1000
font-weight: 700 (=bold)

Usually the increment is of 100 up to 900. Depends on the font.

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

How to change an img size without adjusting its proportions

A

img {
height: auto;
width: 500px;
}

35
Q

Why you should always style your img size?

A

If the img loads slower than the rest of the page it won’t suddenly shift the page.

36
Q

What is the cascade?

A

It’s what determines what rules gets added to html

37
Q

What are the 3 factors used to determine the cascade?

A

Specificity, Inheritance, and Rule Order.

38
Q

What is specificity in the context of cascade?

A

A declaration that is more specific will take precedence over less specific ones.

39
Q

In-line or selectors which is more specific?

A

In-line

40
Q

Rank of the top 3 specific selectors

A
  1. ID selectors
  2. Class selectors
  3. Type selectors
41
Q

When the specificity of selectors equals what happens

A

A large amount of a selectors will beat a smaller amount

Or the one which comes first

ID + 2Class will beat an ID + 1Class

Class1 will beat Class 2 if it comes first.

42
Q

Which selector has no specificity value?

A

The universal selector and hence always the lowest priority

43
Q

What is inheritance in the context of cascade?

A

Refers to certain CSS properties when applied to an element are inherited by that elements defendants.

44
Q

Which properties are usually inherited in a cascade

A

Typography (color, font etc)

45
Q

When does inheritance bested in a cascade?

A

When targeting an element specifically

46
Q

An example of specificity beating inheritance

A

Child with a class attribute isn’t overcomes by a Parent with an ID attribute because the cascade on the child would inherited if the style wasn’t specified.

47
Q

What is rule order in cascade

A

When there are still conflicting rules targeting an element. It does the one that comes last

48
Q

Ways to add CSS to HTML

A

External CSS (most common) and Internal CSS

49
Q

What is External CSS?

A

Involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing <head> tags with a self-closing <link></link> element.

50
Q

How does External CSS look like?

A

<head>
<link rel=“stylesheet” href=“styles.css”>
</head>

51
Q

Name of ur external css file name

A

Anything following the file naming rules as long as it ends with (.css)

52
Q

Pros of external css

A

Keeps our code clean and small

Useful for multiple pages in a website with the same style.

53
Q

What is internal (embedded) css?

A

Adding CSS within the HTML file itself instead of creating a completely separate file

54
Q

What do you do in Internal css?

A

You place all the rules within a <style> element placed inside the <head> element. This method does not require link.</style>

55
Q

What is in-line css?

A

Makes it possible to add styles directly to HTML elements. Not recommended

56
Q

What happens in in-line css

A

You don’t add selectors
Use the style attribute to add style directly to the elements

57
Q

What’s does in-line css look like?

A

[<div style=“”>…]

58
Q

Cons of in-line css?

A

Can bloat your html file
Can cause repetition and bloat when involving many element with the same style
Will override external and internal css

59
Q

What does the text-align property do?

A

Will align text horizontally within an element.

60
Q

What shape is everything? I

A

A box

61
Q

What happens if you do nothing to a box?

A

The content of the box fills the space inside the box

62
Q

One of the ways to make your box bigger.

A

padding: #px;

63
Q

Where does padding occur? Seen commonly in…?

A

Inside the border. The background of the element. Seen commonly in

64
Q

What does the border do?

A

It surrounds your padding.

65
Q

What does margin do?

A

Wraps the border. Used to space elements. Invisible

66
Q

How to change the dimensions of your box?

A

Height and width.

67
Q

Margin rules

A

Collapse under each other and the bigger one is chosen. Always added

68
Q

What determines the entere box dimension?

A

Padding + width + height + border + margin

69
Q

What does the box-sizing: border-box; do?

A

Makes the height and width the count for everything else.

70
Q

Purpose of the box model?

A

Complex layouts align items

71
Q

Types of boxes in CSS

A

Block boxes and in-line boxes.

72
Q

Features of the Outer display type.

A

Break into newline
Width, height, padding etc will push away other elements.

73
Q

Some HTML elements that uses outer display automatically?

A

<h1> , <p>, and block.
</p></h1>

74
Q

Types of of displays?

A

Outer and inner.

75
Q

In-line box outer display features.

A

Doesn’t break into a new line.
Width and height does not apply.
Padding etc will apply but will not cause space
Horizontal padding etc will move other apply to other in-lines.

76
Q

Some Elements that use in-line boxes outer display by default?

A

<a>, <span>, <em>, and <strong></strong></em></span></a>

77
Q

What is normal flow?

A

Elements inside a box, act as block or in-line boxes

78
Q

What is the inner display type? Ex.

A

Dictates how elements inside the box are laid out.

Ex. Flex

79
Q

What does the value of display determine?

A

Whether the type of box is block or in-line.

80
Q

Parts of a block box in html?

A

Border
Margin
Padding
Content

81
Q

What is the standard box?

A

A block box with an in-line-size and block-size that defined the in-line-size and block-size of the content box

82
Q

How to turn on alternative css box model?

A

box-sizing: border-box;

83
Q

How to use the box-sizing property properly?

A

Set it on the html element and all other element to inherit that value

84
Q

Negative margin?

A

Causes overlap brown other things on the page

IT (11 decks)

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