TeamTreeHouse CSS Flashcards
(159 cards)
1
Q
What does css allow for?
A
css allows for presentation and screensizes and resolutions
2
Q
What are the three ways to add css to your page?
A
1- inline styles, 2- internal styles, 3- external stylesheets
3
Q
How can you inspect an element?
A
right click it on a webpage
4
Q
How to make text bold?
A
font-weight: bold;
5
Q
how to control size of your font?
A
font-size: 2 em;
6
Q
What is another way of expressing the styles “we” create?
A
author styles
7
Q
How do we write inline-styles?
A
we write our css directly in our html element:
< body style = “ background - color : orange ; “ > blah < / body >
8
Q
Should inline-styles be used under best practices?
A
NO
9
Q
In the css cascade where do inline-styles fit in?
A
They override everything.
10
Q
Where do you place internal styles?
A
internal styles are placed in the < head > section of your html using a < style > tag.
11
Q
Code for an internal style …
A
< head >
< title > wha happin? < / title >
< style >
p {
font-size: 20px;
font-weight: bold;
}
< / head >
12
Q
Are internal styles best practice?
A
NO
13
Q
What does D.R.Y. mean?
A
Don’t Repeat Yourself
14
Q
Where do you find external stylesheets?
A
Generally, in the same folder but in a different file as your html.
15
Q
Why is it best practice to use external styles?
A
To keep seperate content from presentation.
16
Q
How would you make text display in the center?
A
body {
text-align: center;
}
17
Q
Where could you go to see if particular css code will work in a particular browser?
A
https : / / caniuse.com
18
Q
What are the two main parts of a css rule?
A
the selector and the declaration
19
Q
Which is the universal selector?
A
* {
property: value;
}
the asterisk
20
Q
How do you control the color of text?
A
a {
color: blue;
}
21
Q
How do you control for the background color of text?
A
a {
background-color: blue;
}
22
Q
How do you get rid of the anchor underline?
A
a {
text-decoration: none;
}
23
Q
What would you do to target just one element of your html?
A
use an id selector
24
Q
How do you define an id selector on your html element?
A
< header >
< section id = “ education “ >
< ul >
….
25
How do you define an id selector in your css?
education {
border: 3px solid red;
}
26
For id names ...
1. start with a letter
2. don't include spaces
3. avoid most punctuation
4. hyphens/underscores OK
5. meaninful names best
6. must be unique
7. 1 id per element at most
27
What can be said about class selectors?
They can be used to target more than one html element.
28
If your selector is targeting something unique should you use a class or id?
Use an id.
29
How would you code a class in css?
with a dot
.top-skill {
font-weight: bold;
}
30
How do you code a class in html?
\< li class = " top-skill "\> html \< / li \>
31
What can be said about class names?
they follow the same conventions as id names.
32
What can be said about classes and html elements?
You can apply as many classes to a single html element as you like.
33
How would you code for a rounded border?
border-radius: 12px;
34
How do you add more than one class to a html element?
\< p class = " date special " \> Blah \< / p \>
35
In css how do you capitalize your text?
text-transform: uppercase;
36
Can you add an id and a class to the same element?
YES, YES a thousand times YES!
37
Code for an id and class in a single html element ...
\< li class = " top-skill " id = " proud " \> JS \< / li \>
38
Do id selector or classes carry more weight?
id selectors are more specific so therefore carry more weight
39
Should you share the same properties between classes and id's?
NO, NO a thousand times NO!
40
How to choose the type of font you would like?
font-family: Ariel, sans-serif;
41
How to alter the spacing between letters?
letter-spacing: 3px;
42
How to change the styles of a list item?
li {
list-style: none;
}
43
How would we target only p elements found in the header element?
header p {
....
}
use a space between selectors, of course your highness
44
How would you target an h3 in your #education id?
#education h3 {
.....
}
with a space between selectors
45
Can you target li's in a particular type of list?
ol li {
....
}
with a space between selectors
46
What is a css pseudo-class?
Pseudo-classes target elements dynamically when they are in a certain state such as being hovered over by a mouse or selected using a keyboard.
47
What does the link pseudo-class do?
it allows us to style links that have not been visited yet ...
a: link {
color: blue;
}
48
What does the visited pseudo-class selector allow us to do?
It allows us to target links that have already been visited ...
a: visited {
color: seagreen;
}
49
What does the hover pseudo-class do?
It allows us to target an element when the mouse is hovering over it ...
a:hover {
text-decoration: underline;
}
50
How do you underline text?
text-decoration: underline;
51
What does the first-child pseudo-class target?
the first-child selector allows us to target exactly what it sounds like, the first-child of a particular element ...
ol li:first-child {
font-weight: bold;
}
52
How to comment in css?
/\* some comment \*/, this also allows us to turn off some code when testing for example
53
What is a great resource for all things web and for css colors as well?
MDN docs, the mozilla developer network
54
What can be said about pixel units?
Px's are absolute, they don't scale and measure 1/96th of an inch.
55
What can be said about dimensions 800 x 600 ?
the width is the 800 value and the height is the 600 value.
56
What can be said about percentages?
They are always relative, never absolute.
57
What else can be said about the percentage value definition?
The size of the child-element adjusts in relation to the parent element ...
header {
width: 80%;
margin-left: 10%;
}
header will be 80% of browser width regardless of browser width, the header being the child of the browser viewport element in this case.
58
What is the text default size?
16px's
59
What are the two font relative units?
EM's and REM's
60
How are EM's calculated?
by using the parent elements font-size, 1 em is equal to the font-size of the parent, 2 em's is equal to twice that size.
61
What are REM's always in reference to?
The root size element's text-size, the html element's size. If the html font-size is 32px's and your \< p \> is defined in css as ...
p {
font-size: 2 rem;
}
then it's going to be 64px's, see, well ... do ya?
62
What are the 3 ways that color values can be expressed?
1. color keyword 2. hex 3. RGB value
63
What can generally be said about more specific styles in relation to less specific ones?
The more specific styles generally take precedence.
64
In order of precedence what will styles written later in the document do?
they will take over precedence and wield their power with an iron fist.
65
What can be said about colors and inheritence?
Colors are inherited from their parent html elements.
66
Where can you find a css validator?
jigsaw.w3.org/cssvalidator
67
Generally, what does the css box model propose?
that every element in html can be considered a rectangular box.
68
Code to set each padding element individually ...
header {
padding - top : 10px;
padding - right : 15px;
padding - bottom : 10px;
padding - left : 15px;
}
69
Code to add padding to all 4 sides with the same value ...
header {
padding : 15px;
}
70
Code to add padding to all four sides using just one property ...
header {
padding : 10px 15px 20px 25px ;
}
the values run clockwise with the values running top, right, bottom then left
71
Code for padding using just 3 values ...
header {
padding : 10px 15px 20px;
}
values run top, sides, then lastly bottom
72
Code padding using just two values ...
header {
padding : 10px 15px ;
}
top and bottom, then both sides
73
Which border properties can be set individually?
border-width, border-style, border-color
74
Code for border using just one property ...
header {
border : 12px solid red;
}
75
Do margin properties and their values mimic the same dynamic as padding?
YES, YES, a thousand times YES!
76
Can margins take on negative values, unlike properties tho ?
YES
77
How would you code to move a, for example, footer to the center?
by using auto,
footer {
margin : 30px auto 15px;
}
78
How do you include the border and padding in the box-size?
box-sizing : border-box;
79
How do you control dimensions of an image by hand/code?
min-width
max-width
min-height
max-height
80
What is the viewport?
area in which window-content can be seen
81
What is 1 VW equal to?
1% of the viewport width
82
What is 1 VH equal to?
1 VH is equal to 1% of the viewport height
83
Code to hide an element, usually for testing purposes ...
p {
display : none ;
}
84
How to describe the behavior of block level elements?
block level elements take up 100% of their container, or parent element's width by default. They're also placed underneath each other, not side by side.
85
How to describe the behavior of inline elements?
inline elements default display is on the same line as other content, also you can't change the width or height of inline elements using css.
86
Describe behavior of inline-block elements ...
inline-block elements are inline as the naming suggests but you can change the width and height using css.
87
Code to override an inline element, namely the anchor element in css ...
a {
display : block ;
}
overrides default behavior
88
How to "horizontalise" a block level \< ul \> to make it a nav?
ul li {
display : inline - block ;
width : 30 % ;
padding : 10px 0 ;
background - color : yellow ;
text - align : center ;
}
89
How is positioning defined by default?
it is defined by default through the "normal" flow listed in the html document
90
What is a relative position?
relative to itself
h1 {
position : relative ;
background - color : red ;
left : 60px ;
}
will move 60px to the left relative to its default position
91
What is absolute positioning?
absolute positioning removes an element from the normal document flow, allows you to position the element based on the edges of the viewport ...
h1 {
position : absolute ;
top : 20px ;
right : 10px ;
background-color : red ;
}
92
What are some important caveats of using absolute positioning?
Absolute positioning actually is defined as positioned relative to the closest positioned ancestor. If a parent element uses relative positioning we can use absolute positioning to position a child element relative to the parent.
93
What behaviors define fixed positioning?
Fixed positioning is relative to the viewport, not to any parent elements.
Fixed elements stay in place even while the page is scrolling.
header {
position : fixed ;
top : 0 ;
left : 0 ;
}
94
What can be said about z-index?
z-index allows you to stack css boxes on top of one another.
higher z-index are stacked in front of the lower z-index
95
What can be said about position sticky?
Sticky stays in the normal flow until you scroll the element to the top which is where it sticks.
h1 {
position : sticky ;
top : 0 ;
}
96
What can be said about the float property?
Float allows you to place content on the right or left side and have content wrap around it.
## Footnote
place a class on an img
\< img src = " https : // www. .... " class = " small - img " \>
on css :
.small-img {
float : left ;
width : 300px ;
}
97
What can be said about the clear property?
To make an element to not wrap around a floated element use clear :
## Footnote
.clear {
clear : both ;
}
98
What is a css media query?
A css media query detects information about how your webpage is being viewed or a set of css rules that get applied based on device type or characteristics.
99
Where are media queries placed?
They're placed at the bottom of your stylesheet.
100
Code for a print media query ...
@ media print {
section {
min-height : auto ;
}
}
101
what is a css selector
the target element, p for example in the following
p {
color : blue ;
}
102
what is a declaration block?
everything except for the selector in the following, except for p.
p {
color : blue ;
}
103
what is a css declaration?
in the following it is color : blue ;
p {
color : blue ;
}
104
where does the css link go?
in the html \< head \>
105
code for a css link
\< link href = " style.css " type = " text/css " rel = " stylesheet " \>
106
what is a css property?
in the following it is color.
p {
color : blue ;
}
107
what is a css value?
in the following it is blue.
p {
color : blue ;
}
108
where do you place an internal stylesheet?
in the \< head \> of the html
109
what element do you use to list an internal stylesheet?
\< style \>
p {
color : blue ;
}
\< / style \>
110
code for a link to a css stylesheet using a URL
\< lin href = " https://www. ... " rel = " stylesheet " \>
111
code for a css link using a relative path
\< link href = " . / style.css " rel = " stylesheet " \>
112
what is \*?
it is the universal selector
113
code for a css class in html and in the css file
\< p class = " brand " \> Sole Shoe Co. \< / p \>
above is the html,
the css is:
. brand {
....
}
114
how to code in html for two css classes?
with a space:
\< h1 class = " green bold " \> .... \< / h1 \>
115
which css element do we use if we want to style an html element uniquely?
use an id, one unique per page
116
code for an id
in the html:
\< h1 id = " large-title " \> .... \< / h1 \>
in the css:
#large-title {
....
}
117
code for selecting an attribute
[href] {
color : magenta ;
}
118
code for selecting a string in an attribute
in html:
\< img src = " / image/seasons/cold/winter.jpg " \>
in the css:
img [src \* = " winter "] {
height : 50 px ;
}
119
list some pseudo-classes
:focus, :visited, : disabled, :active
120
code for a p selector hover pseudo-class
p : hover {
background-color : lime ;
}
121
what do id's override?
classes and types
122
what is best practice when deciding what type of selector to use?
first use types, then classes, then id's
123
what is it called when you combine multiple selectors?
chaining
124
list a selector for h1 elements w/a class of .special
h1.special {
....
}
125
write a css rule to select the descendants of the \< ul class = " main-list " \>
\< li \> .... \< / li \>
\< / ul \>
.main-list li {
.....
}
126
code for font-family: Georgia for two selectors, an h1 and .menu
h1, .menu {
.....
}
127
which property do you use to change the typeface on your webpage?
font-family:
128
what is the term of a group of fonts supported across most browsers and OS's
web safe fonts
129
when a font is more than one word, what do you do?
h1 {
font-family : " Courrier New " ;
}
enclose in quotes
130
which property do you use to change the font size?
p {
font-size : 18 px ;
}
131
which property do you use to change how bold or thin font appears?
p {
font-weight : bold ;
}
132
which property do you use to align text and where is it aligned to?
p {
text-align : right ;
}
it will align text in reference to its parent
133
what are the values for text-align?
left, right, center, or justify
134
which property styles an elements foreground color:
p {
color : red ;
}
135
which property styles an elements background color?
p {
background-color : red ;
}
136
how to measure how transparent an element is
0 to 1
1 - 100% fully visible
0 - 0 % fully invisible
137
code for 50% opacity
.overlay {
opacity : 0.5 ;
}
138
code for a background as an image
.main-banner {
background - image : url ( " https://www. ... .jpg " ) ;
}
139
code for a background image with a relative path
.main-banner {
background - image : url ( " images / mountains . jpg " ) ;
}
140
what will override any particular style and should almost never be used?
p {
color : blue ; ! important ;
}
141
what is meant by the box model?
all elements on a web page are interpreted by the browser as "living" inside of a box.
142
what are the boxes elements from innermost to outermost?
content, padding, border, and margin
143
height and width can be used to modify which element of the box model?
the content
p {
height : 80 px ;
width : 240 px ;
}
144
what happens when the width and height of an element are set in pixels?
it will be the same size on all devices
145
what is a border in css?
a border is a line that surrounds an element
146
code for a border 3 px wide that has a solid line and is colored coral
p {
border : 3 px solid coral ;
}
147
which element will allow you to modify the corners of a border?
border-radius :
148
a perfect circle uses a border-radius of what percent?
border-radius : 50 % ;
149
what is the area between the contents of a box and its border?
padding :
150
code for a padding of 10 px's on all 4 sides
p {
padding : 10 px ;
}
151
how can you be most specific when coding paddings
padding-top :
padding-right :
padding-bottom :
padding-left :
152
padding shorthand with 4 values mean what?
p {
padding : 6px 11px 4px 9px ;
}
from top moving clockwise, right, bottom then left
153
padding shorthand when using 3 values
p {
padding : 5px 10px 20px ;
}
when right and left side padding equal
154
padding shorthand when using 2 values
p {
padding : 5px 10px ;
}
top and bottom equal and right and left equal
155
what is the space outside of the border seperating elements on the page?
this is called the margin
156
code for a margin of 20 px's all around
p {
margin : 20 px ;
}
157
be specific for margins
margin-top :
margin-right :
margin-bottom :
margin-left :
158
what can be said about margin shorthand for 4, 3, 2, and 1 values
they totally mimic padding shorthand
159
