Created by Juyoung. Built this site while I was teaching myself HTML and CSS.
Click Here to go to first page
Click Here to go to third page
The border-collapse Property
Collapse Border Example
| Cell A Collapse Example |
| Cell B Collapse Example |
Separate Border Example
| Cell A Separate Example |
| Cell B Separate Example |
The border-spacing Property
Collapse Border Example with border-spacing
| Cell A Collapse Example |
| Cell B Collapse Example |
Separate Border Example with border-spacing
| Cell A Separate Example |
| Cell B Separate Example |
The caption-side Property
This caption will appear at the top
| Cell A |
| Cell B |
This caption will appear at the bottom
| Cell A |
| Cell B |
The empty-cells Property
|
Title one |
Title two |
| Row Title |
value |
value |
| Row Title |
value |
value |
The table-layout Property
| 1000000000000000000000000000 |
10000000 |
100 |
The border-style Property
- none: No border. (Equivalent of border-width:0;)
- solid: Border is a single solid line.
- dotted: Border is a series of dots.
- dashed: Border is a series of short lines.
- double: Border is two solid lines.
- groove: Border looks as though it is carved into the page.
- ridge: Border looks the opposite of groove.
- inset: Border makes the box look like it is embedded in the page.
- outset: Border makes the box look like it is coming out of the canvas.
- hidden: Same as none, except in terms of border-conflict resolution for table elements.
This example is showing all borders in different colors.
This example is showing all borders in green color only.
This is a border with none width.
This is a border with groove border.
This is a border with inset border.
This is a border with dashed border.
This is a border with different styles.
The border-width Property
This is a solid border whose width is 4px.
This is a solid border whose width is 4pt.
This is a solid border whose width is thin.
This is a solid border whose width is medium.
This is a solid border whose width is thick.
This is a border with four different width.
Border Properties using shorthand
This example is showing shorthand property for border.
CSS - Margins
- margin
- margin-bottom
- margin-top
- margin-left
- margin-right
The margin Property
all four magins will be 15px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser.
Facebook Header Example with CSS Margin
CSS - Lists (pg.43)
- list-style-type: control shape or appearance of the marker
- list-style-position
- list-style-image
- list-style
marker-offset: specifies distance btw a marker and text in the list.-Not supported in IE6
1.The list-style-type Property:
list-style-type: 'disc' is default; a filed-in circle
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
2.The list-style-position Property:
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
- Maths
- Computer Science
- English
3.The list-style-image Property
the list-style-image allows you to specify an image so that you can use your own bullet style.
4. The list-style Property
The list-style allows you to specify all the list properties into a single expression.
Example
- Maths
- Computer Science
- Korean
Click Here to go to third page