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.
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.
What can be said about colors and inheritence?
Colors are inherited from their parent html elements.
Where can you find a css validator?
jigsaw.w3.org/cssvalidator
Generally, what does the css box model propose?
that every element in html can be considered a rectangular box.
Code to set each padding element individually …
header {
padding - top : 10px;
padding - right : 15px;
padding - bottom : 10px;
padding - left : 15px;
}
Code to add padding to all 4 sides with the same value …
header {
padding : 15px;
}
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
Code for padding using just 3 values …
header {
padding : 10px 15px 20px;
}
values run top, sides, then lastly bottom
Code padding using just two values …
header {
padding : 10px 15px ;
}
top and bottom, then both sides
Which border properties can be set individually?
border-width, border-style, border-color
Code for border using just one property …
header {
border : 12px solid red;
}
Do margin properties and their values mimic the same dynamic as padding?
YES, YES, a thousand times YES!
Can margins take on negative values, unlike properties tho ?
YES
How would you code to move a, for example, footer to the center?
by using auto,
footer {
margin : 30px auto 15px;
}
How do you include the border and padding in the box-size?
box-sizing : border-box;
How do you control dimensions of an image by hand/code?
min-width
max-width
min-height
max-height
What is the viewport?
area in which window-content can be seen
What is 1 VW equal to?
1% of the viewport width
What is 1 VH equal to?
1 VH is equal to 1% of the viewport height
Code to hide an element, usually for testing purposes …
p {
display : none ;
}
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.
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.
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.
Code to override an inline element, namely the anchor element in css …
a {
display : block ;
}
overrides default behavior
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 ;
}
How is positioning defined by default?
it is defined by default through the “normal” flow listed in the html document
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
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 ;
}
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.
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 ;
}
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
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 ;
}
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.
place a class on an img
< img src = “ https : // www. …. “ class = “ small - img “ >
on css :
.small-img {
float : left ;
width : 300px ;
}
What can be said about the clear property?
To make an element to not wrap around a floated element use clear :
.clear {
clear : both ;
}
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.
Where are media queries placed?
They’re placed at the bottom of your stylesheet.
Code for a print media query …
@ media print {
section {
min-height : auto ;
}
}
what is a css selector
the target element, p for example in the following
p {
color : blue ;
}
what is a declaration block?
everything except for the selector in the following, except for p.
p {
color : blue ;
}
what is a css declaration?
in the following it is color : blue ;
p {
color : blue ;
}
where does the css link go?
in the html < head >
code for a css link
< link href = “ style.css “ type = “ text/css “ rel = “ stylesheet “ >
what is a css property?
in the following it is color.
p {
color : blue ;
}
what is a css value?
in the following it is blue.
p {
color : blue ;
}
where do you place an internal stylesheet?
in the < head > of the html
what element do you use to list an internal stylesheet?
< style >
p {
color : blue ;
}
< / style >
code for a link to a css stylesheet using a URL
< lin href = “ https://www. … “ rel = “ stylesheet “ >
code for a css link using a relative path
< link href = “ . / style.css “ rel = “ stylesheet “ >
what is *?
it is the universal selector
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 {
….
}
how to code in html for two css classes?
with a space:
< h1 class = “ green bold “ > …. < / h1 >
which css element do we use if we want to style an html element uniquely?
use an id, one unique per page
code for an id
large-title {
in the html:
< h1 id = “ large-title “ > …. < / h1 >
in the css:
….
}
code for selecting an attribute
[href] {
color : magenta ;
}
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 ;
}
list some pseudo-classes
:focus, :visited, : disabled, :active
code for a p selector hover pseudo-class
p : hover {
background-color : lime ;
}
what do id’s override?
classes and types
what is best practice when deciding what type of selector to use?
first use types, then classes, then id’s
what is it called when you combine multiple selectors?
chaining
list a selector for h1 elements w/a class of .special
h1.special {
….
}
write a css rule to select the descendants of the < ul class = “ main-list “ >
< li > …. < / li >
< / ul >
.main-list li {
…..
}
code for font-family: Georgia for two selectors, an h1 and .menu
h1, .menu {
…..
}
which property do you use to change the typeface on your webpage?
font-family:
what is the term of a group of fonts supported across most browsers and OS’s
web safe fonts
when a font is more than one word, what do you do?
h1 {
font-family : “ Courrier New “ ;
}
enclose in quotes
which property do you use to change the font size?
p {
font-size : 18 px ;
}
which property do you use to change how bold or thin font appears?
p {
font-weight : bold ;
}
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
what are the values for text-align?
left, right, center, or justify
which property styles an elements foreground color:
p {
color : red ;
}
which property styles an elements background color?
p {
background-color : red ;
}
how to measure how transparent an element is
0 to 1
1 - 100% fully visible
0 - 0 % fully invisible
code for 50% opacity
.overlay {
opacity : 0.5 ;
}
code for a background as an image
.main-banner {
background - image : url ( “ https://www. … .jpg “ ) ;
}
code for a background image with a relative path
.main-banner {
background - image : url ( “ images / mountains . jpg “ ) ;
}
what will override any particular style and should almost never be used?
p {
color : blue ; ! important ;
}
what is meant by the box model?
all elements on a web page are interpreted by the browser as “living” inside of a box.
what are the boxes elements from innermost to outermost?
content, padding, border, and margin
height and width can be used to modify which element of the box model?
the content
p {
height : 80 px ;
width : 240 px ;
}
what happens when the width and height of an element are set in pixels?
it will be the same size on all devices
what is a border in css?
a border is a line that surrounds an element
code for a border 3 px wide that has a solid line and is colored coral
p {
border : 3 px solid coral ;
}
which element will allow you to modify the corners of a border?
border-radius :
a perfect circle uses a border-radius of what percent?
border-radius : 50 % ;
what is the area between the contents of a box and its border?
padding :
code for a padding of 10 px’s on all 4 sides
p {
padding : 10 px ;
}
how can you be most specific when coding paddings
padding-top :
padding-right :
padding-bottom :
padding-left :
padding shorthand with 4 values mean what?
p {
padding : 6px 11px 4px 9px ;
}
from top moving clockwise, right, bottom then left
padding shorthand when using 3 values
p {
padding : 5px 10px 20px ;
}
when right and left side padding equal
padding shorthand when using 2 values
p {
padding : 5px 10px ;
}
top and bottom equal and right and left equal
what is the space outside of the border seperating elements on the page?
this is called the margin
code for a margin of 20 px’s all around
p {
margin : 20 px ;
}
be specific for margins
margin-top :
margin-right :
margin-bottom :
margin-left :
what can be said about margin shorthand for 4, 3, 2, and 1 values
they totally mimic padding shorthand
