Css Tag Names
Css Rules
Usage
Media Queries
@media (min-width: 480px) { body { color: #fff; } }
control all properties and values of html elements. .
Style Tag
< style> < /style>
Container for the css style rules.
External Stylesheets
< link rel = "stylesheet" type="text/css" href="">
The stylesheet is in a separate document.
Internal Stylesheets
< style> < /style>
The style rules are in between the style tags.
Pixcels, Ems, Percent
body {20px, 20ems, and 20% }
Px, ems and percent [%] are all forms of measurement.
Box-Sizing
body {box-sizing:border-box;}
Shows correct measurement after padding and margin added.
Div Tag
#mybigblock { margin: 0 auto;}
The division name is preceded by #. One div per page.
Span Class Tag
< span class ="" >< /span >
Similar to divisions. Many spans can share the same name.
Link Tag
< a href="" > < /a>
shows file location.
Margin
p {margin:20px;}
Margin adds space outside an element.
Padding
p {padding:20px;}
Padding adds space inside an element.
Color
p {color:white;}
p {color:#fff;}
p {rgba(0,140,255,1};
Color names, hexcode or rgb values [Red, Green, Blue, Alpha]
CSS Positioning: Absolute
#cake {position: absolute; top: 20px; left: 20px;}
Positions the cake div exactly 20px form the top and 20 pixels from the left.
CSS Positioning: Fixed
#cake {position: fixed; top: 20px; left:20px;}
Scrolling the page will not cause the div to move. It is fixed to the page.
CSS Positioning: Relative
#cake {position: fixed; top: 20px; left:20px;}
Positions the cake x amount of pixels from its original location.