Use TRouBLe: Top Right Bottom Left.
margin: 10px 5px 40px 20px Ten pixels top, five pixels right forty pixels bottom and twenty pixels left
Categories
To a browser, all elements contained in a document are considered boxes of content (text, images, etc). Each box has the following attributes:
- padding (surrounding the content)
- border (after the padding, background-color property stops here)
- margin (after the border, before the other elements)
The most common box model problem: in IE 5, IE 6 and IE 7, and in quirks mode, the padding shrinks the content instead of expanding the size of the box, as in the other browsers.
You have the choice to pick what box model applies to elements. The attribute is: box-sizing, and the possible choices are: content-box (default, the padding / border pushes out of the content), or border-box (the padding / border pushes inwards, toward the content instead).
It is recommended you set that as part of your reset, so you have all browsers following the same convention. Then again, that would be like saying IE6 was right all along…
Note that this does not apply to margins! Those will still push stuff out, spawning right out of the boxes borders.
- Changing the style of the bullet:
- list-style-type: square; Or disk, or circle, or square
- list-style-type: none; No bullets
- use margin-top and margin-bottom to add spaces between bullets
- Putting an image as the bullet:
- list-style-image: url(images/bullet.gif);
- But it is better to use background images, since you have little control over the placement of the image
- Display lists horizontally:
- display: inline; and list-style-type: none;
Categories
CSS fonts and text formatting
- text-decoration: underline (or none to remove it, or overline to strike it out)
- text-decoration: blink; alternative to deprecated tag <blink>
- letter-spacing: 10px (controls the distance between letters)
- word-spacing: 10px (controls the distance between words, negative numbers will overlap words)
- line-height: 1.5; (equivalent to saying 150% of the normal line size)
- text-align: center; or left, right, justified (space between words vary slightly to make the end of line more uniform)
- text-indent: 25px; Indenting the first line of text:
@font-face allows you to use external files to install and use fonts on the fly.
The syntaxis is a bit hacky, in order to get it right it may be easier for you to use the following resource:
http://www.fontsquirrel.com/fontface/generator
But it goes something like this:
@font-face {
font-family: ‘Tagesschrift’;
src: url(‘tagesschrift.eot’); /* IE 5-8 */
src: local(‘☺’), /* sneakily trick IE */
url(‘tagesschrift.woff’) format(‘woff’), /* FF 3.6, Chrome 5, IE9 */
url(‘tagesschrift.ttf’) format(‘truetype’), /* Opera, Safari */
url(‘tagesschrift.svg#font’) format(‘svg’); /* iOS */
}
Here are some services offering font faces:
Categories
Specify font size with CSS
- Pixel specified (px). The disadvantage is that IE 6 won’t resize it when font display size is set (accessibility issue)
- Percentage
- Keyword (small, extra-small, etc)
- em
Categories
CSS best practices
- When styling the body of a page, use a class instead of the body { … } reference because that gives you the flexibility to apply different styles to different pages. For instance, <body style=”x”> where x can be swapped where we need to change it
So the way it works is: in CSS, you specify a font family, then at the end you specify a generic family, so in case the computer you are using don’t have the font family installed, it will fall back to the default generic family at the end.
Generic families are: Serif, Sans-serif and monospace.
Example of use is: p{font-family:”Times New Roman”, Times, serif;}
Serif fonts
- Times, Times New Roman, Georgia
Sans-serif fonts
- Sans means “without”, meaning they don’t have the little hitches
- On computer screens, these are the easier to read ones
- Often used for headlines
- Clean and simple apperance
- Arial, Helvetica, Vendana, Formata
Monospaced fonts
- Used to display computer code
- Courier New, Courier, monospace
When you use italics or bold font variations and they don’t look good, it is usually because you are using a @font-face, and you don’t have the bold and italics variations for them to look good. So the browser is doing an effort to create an italic or bold version of what it has. And sometimes it fails spectacularly. Stop using font faces that don’t have the bold or italic variations you need, or use a font family that includes those already.
| html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, | |||||
| variable, form, fieldset, blockquote { | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| font-size: 100%; | |||||
| font-weight: normal; | |||||
| } | |||||
| ol { | |||||
| margin-left: 1.4em; | |||||
| list-style: decimal; | |||||
| } | |||||
| ul { | |||||
| margin-left: 1.4em; | |||||
| list-style:square; | |||||
| } | |||||
| img { | |||||
| border: 0; | |||||
| } | |||||
Not all attributes get inherited: border, bg wouldn’t make sense to, for example.
When rules conflict, the one that is more specific to the current tag wins.
When several external and internal styles apply to an element, the browser applies them all as long as they don’t conflict
When they conflict, follow this rule:
1) A tag selector is 1 point
2) Pseudo-elements are worth 1 point (like :first-child)
3) A class selector is 10 points
4) Pseudo-classes are worth 10 points (like :link)
5) An ID selector is worth 100 points
6) An inline style is worth 1,000 points
7) Inherited tags don’t have any specificity value (whatever you inherit, if more specific stuff is set, your inheritance don’t count)
8) For mixed cases, like p.myclass for example, the values are added (tag = 1 + class = 10, total = 11)
9) When there is a tie, the last one style that got defined (the one closer to the </head>) is the one that wins
– Style sheets attached with the @import command always appear before internal styles
10) !important overwrites specificity rules, and ensures the one rule you specify is the one that displays:
– a { color: teal !important; }
– Use this sparingly, for real emergencies only
11) The other way to improve specificity: Include as much as the path to your tag as possible: instead of just .myclass, say: #myidentifier .myclass
a:link unvisited links
a:visited stored in the browser’s memory
a:hover can be used for other elements, with some quirks behavior in IE 6
IMPORTANT: because of specificity rules, the order is important or this won’t work: a:hover has to be after a:link and a:visited on your CSS
a:active brief nanosecond after the user clicks on the link
a:focus user use the tab to navigate to it IE8, firefox, safari, opera only
li:first-child targets the first children
li:last-child targets the last one
li:nth-child(even) target odd or (or in this case even) elements of a series of children, good to produce the zebra effect on tabular data
li:nth-child(n) Target the “n” child” where n is an integer