Difference between revisions of "CSS list"
From Publication Station
Arjensuijker (talk | contribs) |
Arjensuijker (talk | contribs) |
||
| Line 19: | Line 19: | ||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]</u> | ||
| Make font italic or oblique | |||
|- | |- | ||
| Line 25: | Line 26: | ||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_dim_height.asp height]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_dim_height.asp height]</u> | ||
| Change the height of an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_margin.asp margin]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_margin.asp margin]</u> | ||
| Put empty space around the outside of an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]</u> | ||
| Change the transparency of an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_padding.asp padding]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_padding.asp padding]</u> | ||
Put empty space around the inside of an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_text_color.asp color]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_text_color.asp color]</u> | ||
| Change text color | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]</u> | ||
| Change the line-height of text | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]</u> | ||
| Make element (in)visible | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_border.asp border]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_border.asp border]</u> | ||
| show a border around an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]</u> | ||
| Give an element a drop shadow | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]</u> | ||
| Give text a shadow | |||
|- | |||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_border-radius.php border-radius]</u> | |||
| Give an element rounded corners | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_background.asp background]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_background.asp background]</u> | ||
| Change the background of an element into a color, image or gradient | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]</u> | ||
| Put a color filter on an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/ | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/sel_hover.php :hover]</u> | ||
| Define what happens if the mouse is on an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/ | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]</u> | ||
| Change the cursor if it hovers over an element | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]</u> | ||
| Transform the dimensions of an element, for example by skewing, scaling or rotating | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]</u> | ||
| Make an element transition smoothly if it changes | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/ | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]</u> | ||
| Put the elements inside an element into columns | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/ | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_class_position.asp position]</u> | ||
| Change how an element is positioned. For example absolute or fixed | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_grid.asp grid]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_grid.asp grid]</u> | ||
| Put the elements inside an element into a grid | |||
| | |||
|- | |- | ||
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]</u> | | nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]</u> | ||
| Animate the properties of an element | |||
|} | |} | ||
Revision as of 12:17, 24 October 2024
This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
| text-align | |
| font | |
| font-family | |
| font-size | |
| font-width | Stretch the width of the font |
| font-style | Make font italic or oblique |
| font-weight | |
| height | Change the height of an element |
| margin | Put empty space around the outside of an element |
| opacity | Change the transparency of an element |
| padding
Put empty space around the inside of an element | |
| color | Change text color |
| line-height | Change the line-height of text |
| visibility | Make element (in)visible |
| border | show a border around an element |
| box-shadow | Give an element a drop shadow |
| text-shadow | Give text a shadow |
| border-radius | Give an element rounded corners |
| background | Change the background of an element into a color, image or gradient |
| filter | Put a color filter on an element |
| :hover | Define what happens if the mouse is on an element |
| cursor | Change the cursor if it hovers over an element |
| transform | Transform the dimensions of an element, for example by skewing, scaling or rotating |
| transition | Make an element transition smoothly if it changes |
| columns | Put the elements inside an element into columns |
| position | Change how an element is positioned. For example absolute or fixed |
| grid | Put the elements inside an element into a grid |
| animation | Animate the properties of an element |
