Css
Cascading Style Sheet is a design languagr for styling markup languages such as html and xml
A css style rule is made up of three things.
/*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 document
Style 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
Display
| display |
none, block, inline, inline-block |
Position
| position |
auto, relative, absolute, fixed, inherit |
Overflow
| overflow-x |
auto, hidden, scroll |
Visibility
Resize
| resize |
both, horizontal, vertical |
Scroll Bar
Z-index
Extra
| :active |
|
| :focus |
|
| :hover |
|
| :link |
|
| :visited |
|
| :first-child |
|
| :first-letter |
|
| :first-word |
|
| :first-line |
|
| :lang |
|
| :before |
|
| :after |
|
