Difference between revisions of "CSS"
From Wikicliki
| Line 33: | Line 33: | ||
# display - html understands all things as being block or inline. for example, "p" is a block like a flat thing on a plate while inline things like "em" are things on the plate. but you can reset it and change it to the other type. eg if you have a few links as inline, they will just be next to each other on a line but if they are block they will force break after each item. | # display - html understands all things as being block or inline. for example, "p" is a block like a flat thing on a plate while inline things like "em" are things on the plate. but you can reset it and change it to the other type. eg if you have a few links as inline, they will just be next to each other on a line but if they are block they will force break after each item. | ||
# box display (V. IMPORTANT) | # box display (V. IMPORTANT) | ||
| − | <div style="border:1px solid black; width: | + | <div style="border:1px solid black; width:500px; text-align:center"> |
margin | margin | ||
| − | < div style="border:1px solid black; width: | + | <div style="border:1px solid black; width:400px; background:#eeeeee"> |
border | border | ||
| − | <div style="border:1px solid black; width: | + | <div style="border:1px solid black; width: 300px; background:#dddddd"> |
padding | padding | ||
| − | <div style="border:1px solid black; width: | + | <div style="border:1px solid black; width: 200px; background:#cccccc"> |
CONTENT | CONTENT | ||
</div> | </div> | ||
Revision as of 15:35, 16 September 2008
if your browser is strictly css compliant you will see the smiley face in the Acid 2 test: http://www.webstandards.org/files/acid2/test.html#top
- link your css externally:
<link rel="stylesheet" TYPE="text/css" href="file.css"> - html versions:
- 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - 4.01 transitional - means that some things like font will be deprecated but others wont. ie: its like saying you can use it now but in later html versions its totally gonna be depreciated. was created in period when css support was not so consistent for all and so had to accept some less strict html 4.01.
- 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:
- validate your html after that:
- hide your code from older browsers by commenting it out cos ancient browsers display it as a html mess
- use external whereever possible, inline only for small impt bits
- class and ids - class more flexible (for a group of items) id more specific (has to be unique)
- class attribute - fullstop selector
- id attribute - hash selector
- can combine multiple class and id attributes - no spaces between them. eg .thing.stuff will select something with div class thing and p class stuff.
- universal selector
- asterisk is universal for every element not already specifically defined it will be formatted as such (be careful)
- selectors can be grouped with commas (eg: h1, h2, h3, h5)
- descendant selectors
- selectors descendants can be selected by grouping with spaces - eg: p cite will retrieve all cites in ps. all descendents apply however deeply nested. does not necessarily have to be immediate child.
- pseudo-classes
- :active - elements (like a) which ahve been clicked on
- :first-child - first child of the element
- :focus - things like form fields which have focus (receiving input first)
- :lang() - language used (eg: span lang defined as en-uk, or british english)
- :hover - things which are mousedover
- :link - unfollowed link
- :visited - previously visited links
- you can combine pseudo-classes with real classes, order doesnt really matter, a:link.nav and a.nav:link will be the same thing.
- pseudo-elements - used to insert generated content!
- :before, after, first-letter, first-line - only certain properties work
- interesting idea: use first-line with first-child
- display - html understands all things as being block or inline. for example, "p" is a block like a flat thing on a plate while inline things like "em" are things on the plate. but you can reset it and change it to the other type. eg if you have a few links as inline, they will just be next to each other on a line but if they are block they will force break after each item.
- box display (V. IMPORTANT)
margin
border
padding
CONTENT
padding
border
margin
