Fundamentals Flashcards
What is CSS syntax?
Selector and Declaration.
A Declaration is composed of Property: Value;
h1 { font-size: 12px; }
What are the three ways to add CSS to a document and their cascading order?
Internal CSS (2), External CSS (2), and Inline CSS (1).
[browser default is priority 3]
How do you write comments in CSS?
/* multi line comment */
What is background shorthand?
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
It does not matter if one of the property values is missing, as long as the other ones are in this order.
What is border shorthand?
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
p {
border: 5px solid red;
}
works for border-left, border-top, border-right, border-bottom
What is Margin Collapse?
When a top and bottom margin become one margin, equal to the largest of the two margins.
What are Margins?
Empty space around elements, outside of defined borders.
p {
margin: 25px 50px 75px 100px;
}
margin: auto;
Centers the borders within it’s container horizontally.
can be overriden with margin: inherit;
What is padding?
Space between the content and its borders.
div {
padding: 25px 50px 75px 100px;
}
//top right bottom left
If the padding property has three values:
top
right and left
bottom
if two values top/bottom right/left
What can be used for height and width values?
auto, length [px, cm, etc.], %, inherit, initial
What are the dimension properties
height, width
max-height, max-width
min-heigh, min-width
CSS Box Model
What is a CSS Outline?
What goes outside borders.
outline-style: solid //outline style must be set.
outline-color: …;
ourline-width: …;
outline-offset adds space between the outline and the border.
outline shorthand:
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
//order doesn’t matter
It can inherit the outlines styles of borders, but is not a border
What are the web safe fonts?
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
What are CSS icons?
Icons that can be inserted through CSS
fontawesome.com
google icons
What are the four link states?
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
display
controls how the element is displayed…
display: block; //as a block element
display: inline //default as an inline element
display: none; //hides the element, takes no space
in contrast to
visibility: hidden //hides the element, but space is reserved
position: static;
the default position for an element, follows the normal flow of the page.
position: relative;
the element will be adjusted ‘relative’ to it’s normal position
position: fixed;
the element will be relative to the viewport.
good for nav elements.
position: absolute;
Well be relative to it’s nearest ancestor, instead of the viewport
position: sticky;
toggles between relative and fixed depending on the scroll position
z-index
specifies the stack order for elements, can be positive or negative.
if not specified the most recent element will be on top.
overflow
specifies how to handle overflow
visible //default, not clipped and spills out
hidden //overflow is clipped content becomes invisible
scroll //adds scrollbar
auto //only adds scrollbar when necessary
