CSS Fundamentals Flashcards
1
Q
CSS stands for __________.
A
Cascading Style Sheets
2
Q
CSS describes the ______ and ______ of the content written in HTML.
A
visual style and presentation
3
Q
CSS consists of countless _________ that developers use to format the content.
A
properties
4
Q
Property and a value is a ________ or style.
A
declaration
5
Q
All of the style/declaration make up the _________, basically all the code inside the curly braces.
A
declaration block
6
Q
A declaration is consist of _______
A
property and value
7
Q
All of this together, the selector plus the declaration block is what we call a _______.
A
CSS rule
8
Q
There are three places where we can write CSS and these are ________
A
inline CSS, internal CSS, and external CSS
9
Q
It’s basically writing CSS code inside of the element.
A
Inline CSS
10
Q
We use the _____ attribute to write inline CSS
A
style
11
Q
True or False: Inline CSS should never be used.
A
True
12
Q
To write internal CSS, we will go inside the ______ element and then we declare the _______ element. From there we can now start writing some CSS rule.
A
<head> and <style>
</style></head>
13
Q
However, if we have a lot of CSS code, _______ is also not practical.
A
internal CSS
14
Q
We never want to merge our HTML with CSS codes directly because it entangles two things in one file, we want to keep these two things separate, this principle is also called ______________.
A
separation of concerns.
15
Q
With __________ we can separate things even more by putting all of our CSS code into a special CSS file.
A
External CSS
16
Q
The main HTML should be named ___________ but when it comes to CSS, you can name the file whatever you want.
A
index.html
17
Q
What element tag should we use to use our CSS file in our HTML? What are its two required attributes?
A
link element, href and rel attribute.
18
Q
Determines the size of text
A
font-size
19
Q
It sets whether a font should be styled with a normal, italic, or oblique face from itsfont-family.
A
font-style
20
Q
This property allows you to uppercase a text element
A
text-transform
21
Q
Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
A
font-family
22
Q
True or false: You can make the h2 element for example bigger than the h1 element. It’s okay since h1 is all about semantics.
A
True
23
Q
True or False: If we are selecting using an element as selector, it will select all of that element and in the page. It will also affect all of its child element (only if the style is about text).
A
True
24
Q
The_______sets the height of a line box. It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
A
line-height
25
Since some of our paragraphs, for example, have child elements like strong, emphasis, and anchor tags, all of them will be affected with the style we think we only set for the paragraph. This behaviour is called? And what kind of property it only shares?
Inheritance, styles about text.
26
The default font-size of list items are ____px
16
27
What kind of selector should we use if we want to style the h1, h2, and h3 with the same declaration block? What will be the syntax for selector?
List selector, it will be h1, h2, h3 then curly braces. It can be in any sequence
28
What does this selector called? Also explain this syntax
footer p {
font-size: 16px;
}
descendant selector - it will select all paragraph element that are inside the footer element
29
Explain this syntax
article header p {
font-size: 16px;
}
It will select all p elements that are inside the header given that the header has article as parent element
30
Besides element selector, we either use this two as selectors
ID and class selectors
31
What attribute do we use to set an ID to an element
id - followed by = and double quotes
32
What attribute do we use to set a class to an element
class - followed by = and double quotes
33
Write the CSS selector if we set the p element to have id of "some-text"
#some-text
34
True or false: We are allowed to set the same id name for 2 or more elements?
False
35
It will be __________ if we attempt to name multiple elements with the same ID.
invalid HTML
36
Now if we want to reuse a name multiple times, then we need to use __________.
class selectors.
37
In CSS, it is a convention that if we have a class or an ID name with multiple words we separate these words by _____.
hyphen
38
Now to select a class in our CSS, we need to use the _________ followed by the class name.
dot
39
True or False: In the real world, we never use IDs
True
40
Every single color can be represented by any combination of these three colors.
red, green, and blue
41
Each of the 3 base colors can take a value between ____ and _____, which leads to 16.8M different colors.
0 and 255
42
What is the value syntax if we want a color of pure red?
rgb(255, 0, 0)
43
What is the value syntax if we want a color of pure green but with transparency of 0.3?
rgb(255, 0, 0, 0.3)
43
To represent complete black, we set all to ____.
zero
44
To represent complete _____, we need to set RGB to maximum value of 255.
white
45
What kind of writing color is this: More used and instead of using a scale from 0 - 255, we go from 0 to ff
Hexadecimal Notation
46
Shorthand, of blue color in Hexadecimal Notation
#00f
47
True of False: In practice, we mostly use hexadecimal colors, and rgba when we need transparency.
True
48
When colors in all 3 channels are the same, we get a _______.
grey color
49
There are ______ pure grays to choose from.
256
50
True or False: Instead of complete black in our text, let’s use a grey color that is known to be used for text.
True
51
A ________ is a keyword added to a selector that specifies a special state of the selected element(s)
pseudo-class
52
Explain the behaviour of this selector
li:first-child
It selects every li element in the document that is the first child of its parent
53
Explain the behaviour of this selector
li:last-child
It selects every li element in the document that is the last child of its parent
54
Explain the behaviour of this selector
li:nth-child(3)
It selects every li element in the document that is the 3rd child of its parent
55
Is this valid syntax:
li:nth-child(odd)
Yes
56
article p:first-child
It will only select the p element, only if the p element is really the first child of the article element.
57
True or false: We should never select the anchor tag and then style it. Instead style a pseudo class of the anchor because that will then allow us to target different states.
True
58
The ______ selects all links that are unvisited.
a:link
59
True or false: The a:link will target all anchor elements with href attributes, hence links without href attribute will not get selected.
True
60
We use this property and value to get rid of the underline of a link.
text-decoration: none
61
The ________ selects all visited links.
a:visited
62
The _______ selects links on mouse over.
a:hover
63
True or false: The text-decoration do also have a shorthand method the, decoration line, style, and color
True
64
The _____ selects the active link.
a:active
65
It is important to remember that these four states for links are always defined in this exact order. So always ______, ________, _______, and _____.
link, visited, hover, and active.
66
The ______ tab shows what styles each element have.
Styles
67
The ________ tab shows our HTML code and it also highlights each element when we hover each of it.
Elements
68
Maybe you wondered before why does h1 element text is bold by default? The reason for that is the _________. It can be seen in the Styles tab of devtools.
default style
69
So, as we have written our code until this point, we have created a couple of situations in which multiple CSS selectors, and, therefore, multiple CSS rules, apply to the exact same element — and I call that _________________.
conflicting selectors
70
True or false: You can add the id attribute to an element which already have a class attribute
True - it is possible but for best practice we never use id
71
id vs class vs element selector: they are selecting the same element. Who will win?
id
72
When there is multiple id selecting the same property in the same element who will win?
The last id selector
73
if there's no id selector, the next priority is
class or pseudo class selector
74
In case there is no ID selector or no class selector, this selector gets the priority
element selector
75
The ___________ is the one with the lowest priority of all
universal selector
76
The CSS selector of universal selector
* sign
77
This has the higher priority than the id selector
Inline style
78
The highest priority of all, after the inline and id
the !important keyword - we put this after the value.
78
The highest priority of all, after the inline and id
the !important keyword - we put this after the property value pair
79
Actually, VS Code helps us resolving this conflict, by the way. So if we hover over this ID selector, we have this hint, which says, __________.
Selector Specificity
80
This is the last resort if you cannot somehow cant figure out which is the cause of conflicting selector
Using the !important keyword
81
Basically what this means is that _________ is a mechanism by which some styles, so some properties get their values inherited from parent elements to child elements.
inheritance
82
True or false: Not all properties do actually get inherited it is mostly the ones that are about text.
True
83
The inherited property can be easily overwritten
True
84
True or false: Inheritance is not conflicting selectors
True - since it has the lower priority than most selectors
85
What kind of properties only got inherited from the parent?
The kind of properties that affects or relates to text.
86
True or false: If I set my body element to have a border, the child elements of it will get border too because of inheritance
False
87
The ____________ is used to select every single element on the page
Universal selector *
88
Lowest priority in specificity
Universal selector *
89
The _________ defines how elements are displayed on a webpage and how they are sized. So in this __________, each and every element on a webpage can be seen as a rectangular box and each of these boxes can have content, a border and space inside and outside of it.
box model
90
Box model is consists of
content, border, padding, and margin
91
It creates empty space outside of element
margin
92
Creates space between the content and the border
padding
93
True or false: The border is technically still inside of the element
True
94
So these three all together are the visible parts of the element as we can see it on the page.
content, padding and border
95
True or false: When we apply background images or background color to an element it will not only apply that property to the content are, but all the way to the entire fill area
True
96
What selector do we use to do a global reset?
The universal selector *
97
When we want to have vertical space between elements it is common to use the ________ property.
margin-bottom
98
True or false: If we apply margin to be 0 in the universal selector, it will remove the bullet points or numbering of lists
True
99
When we have two margins that occupies the same space, only one of them is actually visible on the page — and that is usually the larger of the two. This phenomena is called __________
collapsing margins
100
True or false: This collapsing margins is the reason why we should only add margins always at the bottom if we wanted to space out our elements vertically.
True
101
To add dimensions we used these two properties
height and width
102
Set the height of images to ______ to fix aspect ratio
auto
103
We want to use ____ as unit when giving dimensions to an image
percent
104
True or false: We need to put all our content in a container which parent is the body, to center all our content in page
True
105
Shorthand if we want to center a div
margin: 0 auto
106
These are the two main types of boxes in CSS
Inline and block boxes
107
The block-level elements occupies the entire width of its _______.
parent element
108
The inline-level elements only occupy exactly the space that they need for its ______.
content
109
Block-level elements basically creates _____ after them
line-break
110
True or false: we can change a block element to inline and also inline element to block
True
111
True or false: Inline elements do not accept width and height
True
112
True or false: Inline elements paddings and margins are applied only horizontally
True
113
True or false: It is advisable to not add height in elements
True - it will cause its child elements to overlap
114
Essentially, _________ boxes really combines the best of both worlds of block-level and inline
inline-block
115
True or false: The inline block elements only occupies the space that they need for the content but has the box-model applied where it can take height, width and top and bottom padding and margin
True
116
True or false: Images are actually block boxes
False - they are technically inline-block boxes
117
What to declare to convert an element to inline-block?
display: inline-block
118
Explain this chained pseudo class: nav a:link:last-child
Select the link state of anchor element given that it is the last child of nav element
119
So starting with _________, it is simply the default positioning of elements on our page.
normal flow
120
Now on the other hand, we have ___________, which basically allows us to absolutely position elements anywhere on the page.
absolute positioning
121
To set an element to an absolute position we declare it as
position: absolute
122
True or false: For absolute positioning to work, we need to set the top bottom, left or right properties
True
123
What are the three components or properties we need to make an element properly position in absolute or out of flow?
Set its position: absolute, specify the right, bottom, left, or top properties, and set the container element into position: relative
124
True or false: An absolute positioned element will choose the closest element with position: relative set
True
125
A ________ is a keyword added to a selector that lets you style a specific part of the selected element(s)
pseudo-element
126
What is syntax to select first letter of content of an h1 element
h1::first-element
127
What is syntax to select first line of a paragraph
p::first-line
128
Explain this selector: h3 + p::first-line
It will select the first line of p element only if the p element is the next sibling of h3
129
Explain this selector ::before
It will add content before the start of content of the element
130
Explain this selector ::after
It will add content at the last part of content of the element
131
True or false: pseudo element is actually inline element by default
True
