Difference between revisions of "CSS list"

From Publication Station
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" width="216" cellspacing="0" cellpadding="0"
{| class="wikitable" border="0" cellspacing="0" cellpadding="0"
|-
|-
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]</u>
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]</u>
| Align text to the left, right, center or justify


|-
|-
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font.asp font]</u>
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font.asp font]</u>
| Change all font properties in one line of code


|-
|-
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]</u>
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]</u>
| Change the typeface of this element


|-
|-
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]</u>
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]</u>
| Change the size of the font


|-
|-
Line 19: Line 23:
|-
|-
| 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


|-
|-
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]</u>
| nowrap="nowrap" width="216" |<u>[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]</u>
| Change the weight of the font


|-
|-
| 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/pr_class_cursor.asp cursor]</u>
| 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/css3_pr_text-shadow.asp text-shadow]</u>
| 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/pr_class_position.asp position]</u>
| 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/css3_pr_perspective.asp perspective]</u>
| 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_columns.asp columns]</u>


|-
|-
| 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


|}
|}

Latest revision as of 13:09, 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 Align text to the left, right, center or justify
font Change all font properties in one line of code
font-family Change the typeface of this element
font-size Change the size of the font
font-width Stretch the width of the font
font-style Make font italic or oblique
font-weight Change the weight of the font
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
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=CSS_list&oldid=10190’