TeamTreeHouse CSS Flashcards
What does css allow for?
css allows for presentation and screensizes and resolutions
What are the three ways to add css to your page?
1- inline styles, 2- internal styles, 3- external stylesheets
How can you inspect an element?
right click it on a webpage
How to make text bold?
font-weight: bold;
how to control size of your font?
font-size: 2 em;
What is another way of expressing the styles “we” create?
author styles
How do we write inline-styles?
we write our css directly in our html element:
< body style = “ background - color : orange ; “ > blah < / body >
Should inline-styles be used under best practices?
NO
In the css cascade where do inline-styles fit in?
They override everything.
Where do you place internal styles?
internal styles are placed in the < head > section of your html using a < style > tag.
Code for an internal style …
< head >
< title > wha happin? < / title >
< style >
p {
font-size: 20px;
font-weight: bold;
}
< / head >
Are internal styles best practice?
NO
What does D.R.Y. mean?
Don’t Repeat Yourself
Where do you find external stylesheets?
Generally, in the same folder but in a different file as your html.
Why is it best practice to use external styles?
To keep seperate content from presentation.
How would you make text display in the center?
body {
text-align: center;
}
Where could you go to see if particular css code will work in a particular browser?
https : / / caniuse.com
What are the two main parts of a css rule?
the selector and the declaration
Which is the universal selector?
* {
property: value;
}
the asterisk
How do you control the color of text?
a {
color: blue;
}
How do you control for the background color of text?
a {
background-color: blue;
}
How do you get rid of the anchor underline?
a {
text-decoration: none;
}
What would you do to target just one element of your html?
use an id selector
How do you define an id selector on your html element?
< header >
< section id = “ education “ >
< ul >
….
How do you define an id selector in your css?
education {
border: 3px solid red;
}
For id names …
- start with a letter
- don’t include spaces
- avoid most punctuation
- hyphens/underscores OK
- meaninful names best
- must be unique
- 1 id per element at most
What can be said about class selectors?
They can be used to target more than one html element.
If your selector is targeting something unique should you use a class or id?
Use an id.
How would you code a class in css?
with a dot
.top-skill {
font-weight: bold;
}
How do you code a class in html?
< li class = “ top-skill “> html < / li >
What can be said about class names?
they follow the same conventions as id names.
What can be said about classes and html elements?
You can apply as many classes to a single html element as you like.
How would you code for a rounded border?
border-radius: 12px;
How do you add more than one class to a html element?
< p class = “ date special “ > Blah < / p >
In css how do you capitalize your text?
text-transform: uppercase;
Can you add an id and a class to the same element?
YES, YES a thousand times YES!
Code for an id and class in a single html element …
< li class = “ top-skill “ id = “ proud “ > JS < / li >
Do id selector or classes carry more weight?
id selectors are more specific so therefore carry more weight
Should you share the same properties between classes and id’s?
NO, NO a thousand times NO!
How to choose the type of font you would like?
font-family: Ariel, sans-serif;
How to alter the spacing between letters?
letter-spacing: 3px;
How to change the styles of a list item?
li {
list-style: none;
}
How would we target only p elements found in the header element?
header p {
….
}
use a space between selectors, of course your highness
How would you target an h3 in your #education id?
education h3 {
…..
}
with a space between selectors
Can you target li’s in a particular type of list?
ol li {
….
}
with a space between selectors
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.
What does the link pseudo-class do?
it allows us to style links that have not been visited yet …
a: link {
color: blue;
}
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;
}
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;
}
How do you underline text?
text-decoration: underline;
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;
}
How to comment in css?
/* some comment */, this also allows us to turn off some code when testing for example
What is a great resource for all things web and for css colors as well?
MDN docs, the mozilla developer network
What can be said about pixel units?
Px’s are absolute, they don’t scale and measure 1/96th of an inch.
What can be said about dimensions 800 x 600 ?
the width is the 800 value and the height is the 600 value.
What can be said about percentages?
They are always relative, never absolute.
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.
What is the text default size?
16px’s
What are the two font relative units?
EM’s and REM’s
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.
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?
What are the 3 ways that color values can be expressed?
- color keyword 2. hex 3. RGB value
What can generally be said about more specific styles in relation to less specific ones?
The more specific styles generally take precedence.
