CSS (Cascading Style Sheets)
Nesting Files
@import "otherfile.css";
Units
| Name | Desc |
|---|
| px | pixels |
| pt | points (font points) |
| pc | |
| mm | |
| cm | |
| in | |
| em | ? Seems line 1 line height of base font |
| ex | |
| % | % of screen size (width or height as appropriate) |
Edge Terminology
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
Margins, Borders, and Padding
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
/* The above example with 3 values corresponds to: */
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
border:
border-top:
border-right:
border-bottom:
border-left:
Example
<HEAD>
<STYLE>
<!--
#pageName {
font-size: 14pt;
font-variant: normal;
font-style: normal;
}
.className { background-color: red }
.dataTable {
font-family: monospace;
font-size: smaller
}
#idName { background-color: green }
* { background-color: blue }
H2 { background-color: yellow }
-->
</STYLE>
</HEAD>
<BODY>
<DIV ID="idName" CLASS="className">Hello<DIV>
<DIV ID="idName2" CLASS="className">Hello<DIV>
</BODY>