| Child pages (Children Display) |
|---|
...
Tutorials
- CSS: The Missing Manual - sort of rec'd by the creator of railstutorial.org
- https://flukeout.github.io/
- http://css.maxdesign.com.au/floatutorial/
- Described as 'amazing' here
- W3Schools - CSS
- rec'd by Naveed.
- CSS Tutorial things to remember:
selector
element selector
id selector
class selector
multiple classes for an element.
grouping selectors
multiple style sheets
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
The syntax for a link to an external stylesheet (<link rel="stylesheet" type="text/css" href="mystyle.css">)
The syntax for an internal stylesheet. (<style>h1 { color: orange; } </style>)
- width vs. max-width
- margin vs. border vs. padding vs. width
- When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
- An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". However, the outline property is different from the border property - The outline is NOT a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
- Q: Does the outline consume space from the border? Or from the margin? Or neither? In which case, does it need to be considered when calculating the total width / height of an element and all its surrounding boxes?
- Note: For W3C compliant CSS: If you define the color property, you must also define the background-color
- hmm: "Note: It is not recommended to underline text that is not a link, as this often confuses the reader."
- In CSS, there are two types of font family names:
- generic family
- font family
- The font-family property should hold several font names as a "fallback" system.
- Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
- The font-size value can be an absolute, or relative size.
- Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
- Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
- Absolute size:
...