- Selector
- Property
- Value
/*single line */
selector { property:value;}
/* multiple lines*/
selector {
property:value;
}
Selectors
Universal
* { property:value; }
/* example */
* { color:black; }
Descedant
parent child { property:value; }
parent > direct child { property:value; }
parent + adjacent child { property:value; }
parent ~ all children { property:value; }
Class
.class { property:value }
parent.class { property:value }
ID
#id { property:value }
parent#id { property:value }
Attribute
element[attribute] { property:value }
element[attribute=attributeValue] { property:value }
Grouping
selector1,selector2 { property:value }
Multiple Properties
selector { property1:value1;property2:value2; }
Always end a property group with a semi-colon(;)
Embending
You can place css at any part in html documentStyle Element
<style>
...
</style>
Style Attribute
<element style="property1:value1;property2:value2;">...</element>
External Css
<link rel="stylesheet" href="style.css" type="text/css"/>
Css Overriding
Decreasing priority down the list- Style Attribute
- Style Element
- External Stylesheet
Comments
Any text between /* and */ is a comment.Properties and Value
Background
| background-attachment | fixed, scroll |
| background-color | red, #f00, #ff0000, rgb(255,0,0) |
| background-image | url("example.png") |
| background-position | |
| background-repeat | repeat, no-repeat |
Margin
| margin-top | 2px, auto, inherit |
| margin-right | 2px, auto, inherit |
| margin-bottom | 2px, auto, inherit |
| margin-left | 2px, auto, inherit |
Padding
| padding-top | 2px, auto, inherit |
| padding-right | 2px, auto, inherit |
| padding-bottom | 2px, auto, inherit |
| padding-left | 2px, auto, inherit |
Border
| border-top-style | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| border-top-color | red, #f00, #ff0000, rgb(255,0,0) |
| border-top-width | 2px, 2%, 2cm, 2px |
| border-top-radius | 2px, 2%, 2cm, 2px |
| border-right-style | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| border-right-color | red, #f00, #ff0000, rgb(255,0,0) |
| border-right-width | 2px, 2%, 2cm, 2px |
| border-right-radius | 2px, 2%, 2cm, 2px |
| border-bottom-style | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| border-bottom-color | red, #f00, #ff0000, rgb(255,0,0) |
| border-bottom-width | 2px, 2%, 2cm, 2px |
| border-bottom-radius | 2px, 2%, 2cm, 2px |
| border-left-style | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| border-left-color | red, #f00, #ff0000, rgb(255,0,0) |
| border-left-width | 2px, 2%, 2cm, 2px |
| border-left-radius | 2px, 2%, 2cm, 2px |
Text
| text-color | red, #f00, #ff0000, rgb(255,0,0) |
| text-align | left, right, center, justify |
| text-transform | uppercase, lowercase, capitalize |
| text-decoration | none,underline |
| text-indent | 50px |
| text-direction | rtl, ltl |
| letter-spacing | 3px |
| word-spacing | 10px |
| line-height | 2 |
Font
| font-family | "New Times Roman" |
| font-style | nomal, oblique, italic |
| font-size | 25, 2em, 25px, small, medium, large |
| font-weight | nomal, bold, light |
| font-variant | nomal, small caps |
Lists
| list-style-type | circle, square, decimal, upper-roman, lower-alpha |
| list-style-image | url("example.gif") |
| list-style-position | inside, outside |
Tables
| border-collapse | nomal, collapse |
Outline
| outline-style | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| outline-color | red, #f00, #ff0000, rgb(255,0,0) |
| outline-width | 2px |
| outline-offset | 2px |
Cursor
| cusor | pointer |
Display
| display | none, block, inline, inline-block |
Position
| position | auto, relative, absolute, fixed, inherit |
Overflow
| overflow-x | auto, hidden, scroll |
Visibility
| Visibility | none,hidden |
Resize
| resize | both, horizontal, vertical |
Scroll Bar
| scrollbar |
Z-index
| z-index | 1, 2 |
Extra
| :active | |
| :focus | |
| :hover | |
| :link | |
| :visited | |
| :first-child | |
| :first-letter | |
| :first-word | |
| :first-line | |
| :lang | |
| :before | |
| :after |
