CSS
Basics
{: .-three-column}
Selectors
{: .-setup}
Selector | Description |
---|---|
| All elements |
| Element |
| Class |
| ID |
| Attribute |
| Attribute |
Combinators
Selector | Description |
---|---|
| Descendant |
| Direct descendant |
| Adjacent sibling |
| Far sibling |
| Have both classes |
Attribute selectors
Selector | Description |
---|---|
|
|
|
|
`[class | ="box"]` |
|
|
|
|
|
|
Pseudo-classes
Selector | Description |
---|---|
| eg, |
--- | --- |
| |
| |
| |
--- | --- |
| 3rd child |
| 2nd child in groups of 3 |
| |
--- | --- |
| |
| |
--- | --- |
| Checked inputs |
| Disabled elements |
| Default element in a group |
--- | --- |
| Elements without children |
Pseudo-class variations
Selector |
---|
|
|
|
|
--- |
|
|
|
|
{: .-left-align}
Fonts
{: .-left-reference}
Properties
Property | Description |
---|---|
|
|
|
|
|
|
|
|
--- | --- |
|
|
|
|
|
|
--- | --- |
|
|
|
|
{: .-key-values}
Shorthand
{: .-prime}
style | weight | size (required) | line-height | family | ||
---|---|---|---|---|---|---|
|
|
|
|
|
|
|
style | weight | size (required) | line-height | family (required) |
{: .-css-breakdown}
Example
Case
Background
{: .-left-reference}
Properties
Property | Description |
---|---|
| (Shorthand) |
--- | --- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{: .-key-values}
Shorthand
color | image | positionX | positionY | size | repeat | attachment | ||
---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
color | image | positionX | positionY | size | repeat | attachment |
{: .-css-breakdown}
Multiple backgrounds
Animation
{: .-left-reference}
Properties
Property | Value |
---|---|
| (shorthand) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{: .-key-values}
Shorthand
name | duration | timing-function | delay | count | direction | fill-mode | play-state | |
---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
name | duration | timing-function | delay | count | direction | fill-mode | play-state |
{: .-css-breakdown}
Example
Event
Last updated