Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
What do color properties accept?
A keyword like red The transparent keyword HEX, RGB, and HSL
26
Function of the font-family property?
Determines what font an element uses.
27
What does the value of the font-family property look like?
Single value or comma separated list of values that determine what font an element use.
28
Why do some values of the font-family property have double quotes?
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,
29
Why add a list of fonts?
For when a browser doesn’t support one it keeps on going down till it finds the one it supports.
30
Function of the font-size property?
Set the size of the font
31
How does the font-size property value look like? Rules?
font-size: 22px No spaces in the values
32
Function of the font-weight property?
Affects the boldness of the text
33
font-weight property values. Rules.
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.
34
How to change an img size without adjusting its proportions
img { height: auto; width: 500px; }
35
Why you should always style your img size?
If the img loads slower than the rest of the page it won’t suddenly shift the page.
36
What is the cascade?
It’s what determines what rules gets added to html
37
What are the 3 factors used to determine the cascade?
Specificity, Inheritance, and Rule Order.
38
What is specificity in the context of cascade?
A declaration that is more specific will take precedence over less specific ones.
39
In-line or selectors which is more specific?
In-line
40
Rank of the top 3 specific selectors
1. ID selectors 2. Class selectors 3. Type selectors
41
When the specificity of selectors equals what happens
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
Which selector has no specificity value?
The universal selector and hence always the lowest priority
43
What is inheritance in the context of cascade?
Refers to certain CSS properties when applied to an element are inherited by that elements defendants.
44
Which properties are usually inherited in a cascade
Typography (color, font etc)
45
When does inheritance bested in a cascade?
When targeting an element specifically
46
An example of specificity beating inheritance
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
What is rule order in cascade
When there are still conflicting rules targeting an element. It does the one that comes last
48
Ways to add CSS to HTML
External CSS (most common) and Internal CSS
49
What is External CSS?
Involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing tags with a self-closing element.
50
How does External CSS look like?
51
Name of ur external css file name
Anything following the file naming rules as long as it ends with (.css)
52
Pros of external css
Keeps our code clean and small Useful for multiple pages in a website with the same style.
53
What is internal (embedded) css?
Adding CSS within the HTML file itself instead of creating a completely separate file
54
What do you do in Internal css?
You place all the rules within a