Section 1
Preview this deck
overflow
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
1
All-time users
1
Favorites
0
Last updated
1 year ago
Date created
Mar 1, 2020
Cards (90)
Section 1
(50 cards)
overflow
"overflow" property controls what happens to content that overflows its box can be set to the following values: - hidden (hide overflow content) - scroll (scrollbar added) - visible (overflow displayed outside of containing element)
horizontal margins add,
so add the right and left margin sizes
multiple selectors
h1, .menu{ font-family: Georgia; } (both h1 and .menu elements will be georgia)
box model
comprisesa set of properties used to create spacea round and between html elements
content
has height and width
margin collapse
margins collapse (but top and bottom padding does not)
position
change default position of an element
classes can be reusable
ids can not
z-index
controls how far back/forward an element is on the page z-index: 1; z-index: 2; ect
border radius
p{ border: 3px solid coral; border-radius: 5px; } to create perfect circle: border-radius: 100%
<style> tag
write a section of CSS code in HTML placed inside <head>
vertical margins collapse,
so the space between vertically adjacent elements is eequal to the larger margin
!important
even more specific than IDs will override any stile should almost never be used ex: .description h5{ color: teal !important; }
display (block)
not displayed on the same line as surrounding content fill entire width of page unless specified, are the height necessary to fit content inside them elements that are block-level by default: <h1>-<h6>, <p>, <div>, <footer>
when font has two or more words
put it in quotes
padding
space between content and border can specify padding-top, right, bottom, or left you can specify how much padding should be on each side in one declaration padding: 6px 11px 2px 3px (clockwise) padding: 5px (top and bottom) 10 px (left and right) ^this applies for margins too
RGB
numbers describe mix of red green and blue color: rgb (143, 188, 143)
tag name
the word/character between <> CSS syntax for <p> is p{
display (inline)
displays content on the same line as the content surrounding it, including the anchor tag
ID name
use if an HTML element needs to be styled uniquely with id attribute <h1 id= "large title"> ... </h1> #large-title{ }
auto
the margin property that allows you to center content div{ margin: 0 auto; } ^will center content 0 sets top and bottom margins to 0px and auto makes it centered (in order to center an element, a width must be set for the element)
float
left: move elements as far left as possible right: move elements as far right as possible
<link>
link CSS file to HTML with <link> - placed within <head> - self closing tag <link href= "url" type= "text/css" rel= "stylesheet"> if CSS file is in the same directory as HTML file, use relative path instead of url <link href= "./style.css" type= "text/css" rel= "stylesheet">
CSS can select multiple elements by their rag, class, and ID
order of power: ID, classes, tags you should always use least specific style possible
position (absolute)
all other elements on page will ignore the element, and the element will be positioned relative to its closest parent element can use offset properties top, bottom, left, right (in px)
"color"
styles foreground color
multiple classes
separate with space
resetting defaults
*{ margin: 0; padding: 0; } resets default margin and padding values of all html elements
visibility
can be used to hide items from view you can make the visibility of an element "hidden" or "visible"
fixed
fix an element to a specific position (regardless of scrolling)
float (clear)
clear specifies how elements should behave when the bump into each other - left: left side of element will not touch any other element - right: right side of element will not touch any other element - body: neither side of element will not touch any other element -none: the element can't touch either side
display (inline-block)
can appear next to each other and specify height and width ex: images are default inline-block
property
property you'd like to style (size, color, ect)
value
value of the property (18px, blue)
default font for HTMl
times new roman
display
<strong> <em> <a>
boder
can be set with width, style and color - width: thickness style: none, dotted, solid, ect p{ border: 3px solid coral; } default border: medium none color
nested elements
ex: lists nested elements selected with (for example): .main-list li{ }
inline styles
make it possible to write CSS code directly within HTML code add "style" attribute and CSS styles (end with ;) ex: <p style= "color: red;"> I'm learning code </p>
height and width of content can be set to
pixels or percentage
HSL
numbers describe hue saturation and lightness color: hsl(120, 60%, 70%)
.css file
keep style code separate from HTML
box model
position (relative)
position an element relative to its default static position on the web page can use offset properties top, bottom, left, right (in px)
Adding more than one tag, class, or id to a CSS selection
increases the specificity of the CSS selection
HTML elements can have attributes
"class" attribute is common HTML: <p class= "brand"> Sole Shoe </p> CSS: .brand { }
named colors
words describe color
New box model
"content-box": the default box model "border-box": resets box model -height and width remain fixed -border thickness and padding will be included in box (so overall dimensions don't change)
background image
.main-banner{ background-image: "https://ww....." }
chaining selectors
combining multiple selectors h1.special{ }
Section 2
(40 cards)